Ajax

关于ajax:一次Ajax请求未携带cookie问题排查

背景重写一个登录页面，登录接口是跨域接口，重写的页面登录胜利后进入页面报错，起因是申请后盾接口未携带cookie，然而通过老页面进行登录，进入页面后cookie能够失常携带，应用工具比照新老页面登录申请，request和response都是一样。解决排除过以下可能性在代码中进行cookie删除两个申请头不一样导致后果不一样零碎工夫设置谬误，导致cookie过期比照过两边的ajax申请代码，的确都是一样，甚至通过工具一一字节进行比照也是一样，最初发现在老页面一个暗藏的角落有一行这个代码 $.ajaxSetup({ dataType: "json", async: true, xhrFields: { withCredentials: true },});在新页面加上后问题解决。其中外围的就是withCredentials: true这个配置，通过查问官网文档，理解到如果跨域申请须要带上cookie必须设置改参数，官网上是这么形容的 The XMLHttpRequest.withCredentials property is a boolean value that indicates whether or not cross-site Access-Control requests should be made using credentials such as cookies, authorization headers or TLS client certificates. Setting withCredentials has no effect on same-origin requests. In addition, this flag is also used to indicate when cookies are to be ignored in the response. The default is false. XMLHttpRequest responses from a different domain cannot set cookie values for their own domain unless withCredentials is set to true before making the request. The third-party cookies obtained by setting withCredentials to true will still honor same-origin policy and hence can not be accessed by the requesting script through document.cookie or from response headers. ...

关于ajax:使用Ajaxjs实现在指定位置插入html

1、写一个标签，在标签内增加上id属性。 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>  <script type="text/javascript" src="/webjars/jquery/3.6.3/jquery.min.js"></script></head><body> <div> <table align="center" border="1" cellspacing="0">  <tr id="admin"> <td>用户名</td> <td>受权门控</td> <td>门控所在场景</td> <td>勾销受权</td> </tr> </table> </div></body></html>2、应用Ajax向服务器发动申请， const xml = new XMLHttpRequest(); xml.onload = function(){ } xml.open("GET","http://localhost:8080/page/all"); xml.send();3、controller层向数据库发动查问申请，将查问到的记录的汇合转化为json格局，响应给浏览器。 @RestController@RequestMapping("/page")public class page { @Autowired SqlDatabaseDoorImpl sqlDatabaseDoor; @RequestMapping("/all") public String methodD0orAll() throws JsonProcessingException { //Door类是一个pojo类，这是一个应用Spring封装MyBatis框架的查询数据库的操作 List<Door> door = sqlDatabaseDoor.selectAllNOParam(); System.out.println(door); //将查问到的汇合转化为json格局 ObjectMapper mapper = new ObjectMapper(); String json = mapper.writeValueAsString(door); System.out.println(json); return json; }}4、应用Ajax的回调函数，将数据库中读取到的数据展现在页面上 <script> const xml = new XMLHttpRequest(); xml.onload = function(){ if(xml.readyState==4&&xml.status==200){ //获取响应的数据 let vals = xml.responseText; console.log(vals); //将传入的字符串当做 JavaScript 代码进行执行 let jsonArr = eval(vals); console.log(jsonArr); let temp = ''; let div = document.querySelector("#admin")//获取id为admin的标签 console.log(div) for(let user of jsonArr){ console.log(user); temp = '<td>'+user.dr_userName+'</td>'+ '<td>'+user.dr_topic+'</td>'+ '<td>'+user.dr_scene+'</td>'+ '<td><a href="#" data-name='+user.dr_userName+' data-topic='+user.dr_topic+' onclick="del()">勾销</a></td>' console.log("temp="+temp); //afterend 将代码插入在id为admin的标签的下一处中央 //beforebegin 将代码插入在id为admin的标签的上一处中央 //afterbegin 将代码插入在id为admin的标签内的第一个地位 //beforeend 将代码插入在id为admin的标签内的最初一个地位 div.insertAdjacentHTML("afterend",temp); } } } xml.open("GET","http://localhost:8080/page/all"); xml.send();</script>能够看到，在指定的地位上曾经呈现了咱们后续插入的html。如果此时数据库中再插入一条数据。能够看到页面上就会持续插入html ...

关于ajax:初见Ajax的认知与理解-二

AJAX（Asynchronous JavaScript And XML 异步的JavaScript和XML）上期说要新添一个需要：新增一个批改明码的接口，前端再减少一个批改明码的页面，申请和返回都应用JSON，要求复用数据库连贯，合并读取html文件。 1、新增一个批改明码的接口UserMapper接口局部： package com.example.mapper;import com.example.pojo.User;import org.apache.ibatis.annotations.Param;import java.util.List;public interface UserMapper { User selectAll(@Param("userName")String username, @Param("passWord")String password); int update(User user);}增加UserMapper的xml文件： <?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"><mapper namespace="com.example.mapper.UserMapper"> <select id="selectAll" resultType="User"> select userName as username ,passWord as password from user where username = #{userName} and password=#{passWord}; </select> <update id="update"> update user set password = #{passWord} where username = #{userName}; </update></mapper>2、在前端新增一个批改明码的页面创立一个ajax-demo2.html <!DOCTYPE html><html><h1>批改明码</h1> <head> </head> <body> <form id="form2" action="http://localhost:8080/addUser3" method="post" accept-charset="UTF-8" onsubmit="return false"> <p>批改明码</p> <input type="text" name="userName" placeholder="用户名"> <input type="text" name="passWord" placeholder="明码"/> <input type="submit" value="提交" onclick="asd()"/> </form> </body></html>要实现从ajax-demo.html页面跳转到ajax-demo2.html上的性能，就得在ajax-demo.html上减少一个批改明码按钮并实现跳转。ajax-demo.html： ...

关于ajax:初见Ajax的认知与理解-一

AJAX（Asynchronous JavaScript And XML 异步的JavaScript和XML）Ajax 的作用：1、与服务器进行数据交换：通过Ajax能够给服务器发送申请，并获取服务器响应的数据。2、应用Ajax和服务器进行通信，就能够应用HTML来替换JSP页面3、Ajax最重要的就是异步替换，能够在不从新加载整个页面的状况下，与服务器替换数据并更新局部网页的技术，比方，用户是否可校验。同步：大伙循序渐进，老老实实的期待申请服务器，服务器解决，响应客户端这个过程，一步一步走。异步：能够在期待申请服务器，服务器解决，响应客户端的过程中做些别的事件（用户感知不到这个过程，所有都悄咪咪的进行）。那Ajax到底是怎么编写的呢？还是老规矩，给一个需要：通过URL传递数据，前端须要有两个输入框输出用户名和明码，用Ajax申请服务端。建一个数据库表（user），其中有两个字段，一个是Name字段一个是Password字段。提交，服务器接管，查询数据库。如果账号密码在数据库中存在，则提醒胜利，否则提醒失败。传参的形式必须是post，参数不容许呈现在url上。有了大抵流程，咱们就能开始入手啦！ 1、在文本中填入数据点击提交要校验用户的用户名和明码那必定得先输出用户名和明码，还须要提交这个数据，那咱们能够用form表单来实现这个性能。创立HTML，命名为ajax-demo.html： <!DOCTYPE html><html> <head> </head> <body> <form id="form1" action="##" method="post" accept-charset="UTF-8" onsubmit="return false"> <p>校验</p> <input type="text" name="userName" id="txtUserName" placeholder="用户名"/> <input type="text" name="passWord" id="txtPassWord" placeholder="明码"/> <input type="submit" value="提交" onclick="fun()"/> </form> </body></html>表单是创立好了，那该怎么实现把数据提交到服务端上呢？能够看到我在表单里写了一个单击事件，执行fun()办法（onclick="fun()），这时就是咱们这篇的配角Ajax上场啦！2、发送Ajax申请，提交userName和passWord到服务端在应用Ajax之前，咱们先来理解一下Ajax的；两种申请形式：GET 申请和 POST 申请。GET申请和POST申请的用法很类似，都能够通过URL来传递参数。但POST申请还具备requestBody，能够通过 setRequestHeader() 来增加 HTTP 头，通过send来传递参数。如需将申请发送到服务器，咱们应用 XMLHttpRequest 对象的 open() 和 send() 办法。 open(method,url,async)：method：申请的类型；GET 或 POST，url：文件在服务器上的地位，async：true（异步）或 false（同步）。 send(string)：string：仅用于 POST 申请，因为GET申请没有requestBody。当然，想应用open和send办法之前，首先得创立一个XMLHttpRequest对象，因为这两种办法是XMLHttpRequest对象中的两种办法。在理解完这两种申请之后，咱们就持续实现这个需要吧。在这里我就应用POST向http://localhost:8080/addUser2发送申请。 function fun(){ const back = new XMLHttpRequest(); let name = {"userName":form1.userName.value,"passWord":form1.passWord.value} userName="+name+"&&passWord="+psd; let userName = JSON.stringify(name); alert(userName); back.open("POST","http://localhost:8080/addUser2"); //back.setRequestHeader("Content-type", "application/x-www-form-urlencoded");默认办法，固定格局 back.setRequestHeader("Content-type","application/json;charset=UTF-8");//能够发送json格局字符串 back.send(userName); }点击提交！通过浏览器的开发者工具，咱们能看到游览器以及胜利的向服务端提交了一个JSON格局的数据（JSON.stringify()办法将name转换成了JSON格局），接下来就是着手筹备服务端的接管了。3、服务端接管参数浏览器向服务器发送了post申请，因为这次POST申请增加了标头，所以在Servlet中request.getParameter()获取不了这个参数（如果没有增加标头，能够应用request.getParameter()获取浏览器提交的数据）。创立DemoApplication。 public class DemoApplication { @RequestMapping("/addUser2") public People addUser2( HttpServletRequest request, HttpServletResponse response) throws IOException { //String userName = request.getParameter("username"); //String passWord = request.getParameter("passWord"); String contentType = request.getContentType(); ServletInputStream is = request.getInputStream(); BufferedReader br = new BufferedReader(new InputStreamReader(is)); String line=null; String result=""; while((line=br.readLine())!=null){ System.out.println(line); //{"username":"阿贾克斯","password":"123"} result =result + "\n" +line; } System.out.println(result); return null; }}咱们再次提交数据，来查看服务端是否收到了来自浏览器的数据。执行！如同并没有合乎预期呀，难不成是浏览器没有胜利提交数据吗？咱们开启浏览器的开发者工具查看网络：发现浏览器的确提交数据了，那为什么服务端没有收到来自浏览器提交的数据呢？那咱们再查看一下控制台：从“http://localhost:63342”拜访“http://localhost:8080”的XMLHttpRequest已被CORS策略阻止。这是什么起因？这就不得不说一下跨域问题了。跨域，指的是浏览器不能执行其余网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的平安限度。所谓同源是指，域名，协定，端口均雷同，只有有一个不同，就是跨域。能够看到两个URL的端口并不相同（一个端口号是63342，另一个端口号是8080），所以发送了跨域申请，被阻止了。那该怎么顺利完成申请呢？那不如把ajax-demo.html写在servlet里吧，那端口号就统一了。 ...

关于ajax:节流防抖

/** 节流和防抖两者的区别防抖：避免抖动“你先抖着，啥时候停下了，在执行下一步”，做完某一个操作时，限值执行次数，屡次密集的触发只执行一次节流：节俭交互沟通，“别急，一个一个来，按工夫节奏来，插队有效”，进行某一个操作时，限度执行频率，有节奏的执行节流关注“过程”，防抖关注“后果”别离用于什么场景防抖: 输入框，申请按钮节流：拖拽，滚动 */function debounce(callback, delay=300) { let timer = null; return () => { if(timer) { clearTimeout(timer); timer = setTimeout(() => { callback(); timer = null; }, delay)}}} function throttle(callback, delay=300) { let timer = null; return () => { if(timer) returntimer = setTimeout(() => { callback(); timer=null;}, delay)}}

关于ajax:AjaxFetchAxios-三者之间的区别

三者都是用于网络申请，然而之间的维度不同 ajax 是一种技术统称，并不是一个具体的实现fetch 是原生推出的一个具体的API，与 XMLHttpRequeset 是同一纬度，都是用来实现 ajax 的，Fetch 语法更加简略、易用，且反对 Promiseaxios 是一个第三方的库，是基于原生API进行封装的文件。

关于ajax:ajax和axios区别及优缺点

ajax： 1、什么是ajax Ajax是对原生XHR的封装，为了达到咱们逾越的目标，削减了对JsonP的反对。异步的javascript和xml，ajax不是一门新技术，而是多种技术的组合，用于疾速的创立动静页面，可能实现无刷新更新数据从而进步用户体验。　属性：url、method、dataType、beforeSend、success、error… web前端全套视频学习材料：http://www.atguigu.com/download.shtml 2、ajax的原理？由客户端申请ajax引擎，再由ajax引擎申请服务器，服务器作出一系列响应之后返回给ajax引擎，由ajax引擎决定将这个后果写入到客户端的什么地位。实现页面无刷新更新数据。 3、外围对象？ XMLHttpRequest 4、ajax优缺点？长处： 1、无刷新更新数据 2、异步与服务器通信 3、前端和后端负载平衡 4、基于规范被广泛支持 5、界面与利用拆散毛病： 1、ajax不能应用Back和history性能，即对浏览器机制的毁坏 2、平安问题 ajax裸露了与服务器交互的细节 3、对收索引擎的反对比拟弱 4、毁坏程序的异样解决机制 5、违反URL和资源定位的初衷 6、ajax不能很好的反对挪动设施 7、太多客户端代码造成开发上的老本 5、Ajax实用场景　1、表单驱动的交互　2、深层次的树的导航　3、疾速的用户与用户间的交换响应　4、相似投票、yes/no等无关痛痒的场景　5、对数据进行过滤和操纵相干数据的场景　6、一般的文本输出提醒和主动实现的场景6、Ajax不实用场景　1、局部简略的表单　2、搜寻　3、根本的导航　4、替换大量的文本　5、对出现的操纵 7、代码 $.ajax({ type: 'POST', url: url, data: data, dataType: dataType, success: function () {}, error: function () {}}); 8、ajax申请的五个步骤 1、创立XMLHttpRequest异步对象 2、设置回调函数 3、应用open办法与服务器建设连贯 4、向服务器发送数据 5、在回调函数中针对不同的响应状态进行解决 axios： 1、axios是什么 Axios 是一个基于 Promise 的 HTTP 库，能够用在浏览器和 node.js 中；是申请资源的模块；通过promise对ajax的封装。　属性：url、method、data、responseType、.then、.catch…2、axios有那些个性？ ...

关于ajax:快速带你了解-Ajax-技术

概述Ajax（Asynchronous JavaScript and XML，即异步 JavaScript 和 XML）技术用于与服务器替换数据并刷新局部页面，实现更好的用户体验。 Ajax 的外围对象是 XMLHttpRequest，通过 XMLHttpRequest 能够在不刷新页面的状况下申请特定 URL，获取数据。由微软实现并在 IE5 中反对，用于执行异步网络申请。尽管 Ajax 是 Asynchronous JavaScript+XML 的缩写，但 Ajax 通信与数据格式无关，并不一定是 XML 格局。甚至反对 HTTP 以外的协定（如 file:// 和 FTP），只管可能受到更多出于平安等起因的限度。应用 Ajax 须要几个步骤：创立 XMLHttpRequest 对象。收回 HTTP 申请。接管服务器传回的数据。更新网页数据。总之，Ajax 就是通过 XMLHttpRequest 对象收回 HTTP 申请，失去服务器响应并解决。 Ajax 全套学习材料支付链接：http://www.atguigu.com/download.shtml 创立 XMLHttpRequest在所有古代浏览器都能够通过 XMLHttpRequest 构造函数创建对象： let xhr = new XMLHttpRequest();而在老版本 IE5 和 IE6 中应用 ActiveX 对象创立： let xhr = new ActiveXObject("Microsoft.XMLHTTP");应用 XMLHttpRequest创建对象后，须要应用 XMLHttpRequest 对象调用 open(type, url, async) 办法并设置三个参数： ...

关于ajax:ajax跨域session丢失问题

ajax 跨域时session失落了！！！解决办法：首先我 Google 了一下这个问题的起因，我找到了这个：（1）Access-Control-Allow-Origin该字段是必须的。它的值要么是申请时Origin字段的值，要么是一个*，示意承受任意域名的申请。（2）Access-Control-Allow-Credentials该字段可选。它的值是一个布尔值，示意是否容许发送Cookie。默认状况下，Cookie不包含在CORS申请之中。设为true，即示意服务器明确许可，Cookie能够蕴含在申请中，一起发给服务器。这个值也只能设为true，如果服务器不要浏览器发送Cookie，删除该字段即可。（3）Access-Control-Expose-Headers该字段可选。CORS申请时，XMLHttpRequest对象的getResponseHeader()办法只能拿到6个根本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其余字段，就必须在Access-Control-Expose-Headers外面指定。下面的例子指定，getResponseHeader('FooBar')能够返回FooBar字段的值。3.2 withCredentials 属性下面说到，CORS申请默认不发送Cookie和HTTP认证信息。如果要把Cookie发到服务器，一方面要服务器批准，指定Access-Control-Allow-Credentials字段。Access-Control-Allow-Credentials: true------ 阮一峰的网络日志我写了一个 demo 来试验这个办法：前端代码 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"><title>Title</title><script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script></head><body>name: <input type="text" name="inputTest" value="">password: <input type="password" name="pwd" id="pwd" value=""><button id="but">提交</button></body><script> $("button").click(function () { var names=$("input[name='inputTest']").val(); var pwds=$("input[name='pwd']").val(); var url = 'http://example.com/demo/test.php'; var postData = {'name':names, 'pwd':pwds}; $.ajax({ type: "POST", url: url, data:postData, dataType: 'jsonp', jsonp:'callback', xhrFields: { withCredentials: true }, crossDomain: true, success:function(res){ console.log(res.name) }, error:function(){} })});</script></html> 后端 php 代码：(test.php) <?php//简略测试上述办法header("Access-Control-Allow-Creadentials: true");header("Access-Control-Allow-Origin: http://shili.com");$name = $_REQUEST['name'];$pwd = $_REQUEST['pwd'];session_start();$_SESSION['name'] = $name;$data = ['name' => $_SESSION['name'], 'pwd' => $pwd];$res = json_encode($data);$callback = $_GET['callback'];echo $callback . "($res)";?> ...

关于ajax:移动端ajax响应status为0

在h5挪动端线上调接口申请发现申请一段时间之后接口返回谬误：通过定位发现响应信息为服务器Nginx报504网关谬误，所以进入了ajax的error回调：查看vconsole的响应： ajax status 为 0可能的起因：1.后端服务器超时,须要在服务器上配置更长的超时工夫（很可能）2.跨域（不太可能）3.网络中断，网络环境很差（有可能）4.前端设置了超时（不太可能）5.ajax辨认不了响应体（很可能）尝试解决办法ajax 加xhrFields: { responseType: "text" }

关于ajax:2022AJAX常见面试题分享

1、什么是AJAX，为什么要应用Ajax（请谈一下你对Ajax的意识）什么是ajax： AJAX是“Asynchronous JavaScript and XML”的缩写。他是指一种创立交互式网页利用的网页开发技术。Ajax蕴含下列技术：基于web规范（standards-basedpresentation）XHTML+CSS的示意；应用 DOM（Document ObjectModel）进行动态显示及交互；应用 XML 和 XSLT 进行数据交换及相干操作；应用 XMLHttpRequest 进行异步数据查问、检索；应用 JavaScript 将所有的货色绑定在一起。为什么要用ajax： Ajax应用程序的劣势在于：通过异步模式，晋升了用户体验优化了浏览器和服务器之间的传输，缩小不必要的数据往返，缩小了带宽占用 Ajax引擎在客户端运行，承当了一部分原本由服务器承当的工作，从而缩小了大用户量下的服务器负载。 2、AJAX最大的特点是什么。 Ajax能够实现动静不刷新（部分刷新）就是能在不更新整个页面的前提下保护数据。这使得Web应用程序更为迅捷地回应用户动作，并防止了在网络上发送那些没有扭转过的信息。 3、Ajax的实现流程是怎么的？ (1)创立XMLHttpRequest对象,也就是创立一个异步调用对象.(2)创立一个新的HTTP申请,并指定该HTTP申请的办法、URL及验证信息.(3)设置响应HTTP申请状态变动的函数.(4)发送HTTP申请.(5)获取异步调用返回的数据.(6)应用JavaScript和DOM实现部分刷新. 4、Ajax 解决浏览器缓存问题？ 1、在ajax发送申请前加上 anyAjaxObj.setRequestHeader("If-Modified-Since","0")。2、在ajax发送申请前加上 anyAjaxObj.setRequestHeader("Cache-Control","no-cache")。3、在URL前面加上一个随机数： "fresh=" + Math.random();。4、在URL前面加上工夫戳："nowtime=" + new Date().getTime();。5、如果是应用jQuery，间接这样就能够了 $.ajaxSetup({cache:false})。这样页面的所有ajax都会执行这条语句就是不须要保留缓存记录。 5、请介绍一下XMLhttprequest对象。 Ajax的外围是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种反对异步申请的技术。简而言之，XmlHttpRequest使您能够应用JavaScript向服务器提出申请并解决响应，而不阻塞用户。通过XMLHttpRequest对象，Web开发人员能够在页面加载当前进行页面的部分更新。 6、AJAX技术体系的组成部分有哪些。 HTML，css，dom，xml，xmlHttpRequest，javascript 7、AJAX利用和传统Web利用有什么不同。在传统的Javascript编程中，如果想得到服务器端数据库或文件上的信息，或者发送客户端信息到服务器，须要建设一个HTML form而后GET或者POST数据到服务器端。用户须要点击”Submit”按钮来发送或者承受数据信息，而后期待服务器响应申请，页面从新加载。因为服务器每次都会返回一个新的页面，所以传统的web利用有可能很慢而且用户交互不敌对。应用AJAX技术，就能够使Javascript通过XMLHttpRequest对象间接与服务器进行交互。通过HTTP Request，一个web页面能够发送一个申请到web服务器并且承受web服务器返回的信息(不必从新加载页面)，展现给用户的还是通一个页面，用户感觉页面刷新，也看不到到Javascript后盾进行的发送申请和承受响应。 8、AJAX申请总共有多少种CALLBACK。 Ajax申请总共有八种CallbackonSuccessonFailureonUninitializedonLoadingonLoadedonInteractiveonCompleteonException 9.Ajax和javascript的区别。 javascript是一种在浏览器端执行的脚本语言，Ajax是一种创立交互式网页利用的开发技术，它是利用了一系列相干的技术其中就包含javascript。Javascript是由网景公司开发的一种脚本语言，它和sun公司的java语言是没有任何关系的，它们类似的名称只是一种行销策略。在个别的web开发中，javascript是在浏览器端执行的，咱们能够用javascript管制浏览器的行为和内容。在 Ajax利用中信息是如何在浏览器和服务器之间传递的通过XML数据或者字符串 10、在浏览器端如何失去服务器端响应的XML数据。 XMLHttpRequest对象的responseXMl属性 11、 XMLHttpRequest对象在IE和Firefox中创立形式有没有不同。有，IE中通过new ActiveXObject()失去，Firefox中通过newXMLHttpRequest()失去 12、介绍一下XMLHttpRequest对象的罕用办法和属性。 open(“method”,”URL”) 建设对服务器的调用，第一个参数是HTTP申请形式能够为GET，POST或任何服务器所反对的您想调用的形式。第二个参数是申请页面的URL。 send()办法，发送具体申请 abort()办法，进行以后申请 readyState属性申请的状态有5个可取值0=未初始化，1=正在加载 2=以加载，3=交互中，4=实现 responseText 属性服务器的响应，示意为一个串 reponseXML 属性服务器的响应，示意为XML status 服务器的HTTP状态码，200对应ok 400对应not found ...

关于ajax:AJAX工作原理及其优缺点

AJAX全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML），是一种创立交互式网页利用的网页开发技术。它应用：应用XHTML+CSS来标准化出现；应用XML和XSLT进行数据交换及相干操作；应用XMLHttpRequest对象与Web服务器进行异步数据通信；应用Javascript操作Document Object Model进行动态显示及交互；应用JavaScript绑定和解决所有数据。与传统的web利用比拟传统的Web利用交互由用户触发一个HTTP申请到服务器,服务器对其进行解决后再返回一个新的HTHL页到客户端, 每当服务器解决客户端提交的申请时,客户都只能闲暇期待,并且哪怕只是一次很小的交互、只需从服务器端失去很简略的一个数据,都要返回一个残缺的HTML 页,而用户每次都要浪费时间和带宽去从新读取整个页面。这个做法节约了许多带宽，因为每次利用的交互都须要向服务器发送申请，利用的响应工夫就依赖于服务器的响应工夫。这导致了用户界面的响应比本地利用慢得多。与此不同，AJAX利用能够仅向服务器发送并取回必须的数据，它应用SOAP或其它一些基于XML的Web Service接口，并在客户端采纳JavaScript解决来自服务器的响应。因为在服务器和浏览器之间替换的数据大量缩小，后果咱们就能看到响应更快的利用。前端培训同时很多的解决工作能够在发出请求的客户端机器上实现，所以Web服务器的解决工夫也缩小了。 AJAX的工作原理Ajax的工作原理相当于在用户和服务器之间加了—个中间层(AJAX引擎),使用户操作与服务器响应异步化。并不是所有的用户申请都提交给服务器,像—些数据验证和数据处理等都交给 Ajax引擎本人来做, 只有确定须要从服务器读取新数据时再由Ajax引擎代为向服务器提交申请。 Ajax其外围有 JavaScript、XMLHTTPRequest、DOM对象组成，通过XmlHttpRequest对象来向服务器发异步申请，从服务器取得数据，而后用JavaScript来操作DOM而更新页面。这其中最要害的一步就是从服务器取得申请数据。 AJAX的优缺点(1).AJAX的长处1.无刷新更新数据。AJAX最大长处就是能在不刷新整个页面的前提下与服务器通信保护数据。这使得Web应用程序更为迅捷地响应用户交互，并防止了在网络上发送那些没有扭转的信息，缩小用户等待时间，带来十分好的用户体验。 2.异步与服务器通信。AJAX应用异步形式与服务器通信，不须要打断用户的操作，具备更加迅速的响应能力。优化了Browser和Server之间的沟通，缩小不必要的数据传输、工夫及升高网络上数据流量。 3.前端和后端负载平衡。AJAX能够把以前一些服务器累赘的工作转嫁到客户端，利用客户端闲置的能力来解决，加重服务器和带宽的累赘，节约空间和宽带租用老本。并且加重服务器的累赘，AJAX的准则是“按需取数据”，能够最大水平的缩小冗余申请和响应对服务器造成的累赘，晋升站点性能。 4.基于规范被广泛支持。AJAX 基于标准化的并被广泛支持的技术，不须要下载浏览器插件或者小程序，但须要客户容许JavaScript在浏览器上执行。随着Ajax的成熟，一些简化 Ajax应用办法的程序库也相继问世。同样，也呈现了另一种辅助程序设计的技术，为那些不反对JavaScript的用户提供代替性能。 5.界面与利用拆散。Ajax使WEB中的界面与利用拆散（也能够说是数据与出现拆散），有利于分工合作、缩小非技术人员对页面的批改造成的WEB应用程序谬误、提高效率、也更加实用于当初的公布零碎。 (2).AJAX毛病1.AJAX 干掉了Back和History性能，即对浏览器机制的毁坏：在动静更新页面的状况下，用户无奈回到前一个页面状态，因为浏览器仅能记忆历史记录中的动态页面。一个被残缺读入的页面与一个曾经被动静批改过的页面之间的差异十分奥妙；用户通常会心愿单击后退按钮可能勾销他们的前一次操作，然而在Ajax应用程序中，这将无奈实现的，后退按钮是一个规范的web站点的重要性能，然而它没法和js进行很好的单干。 2.AJAX的平安问题：AJAX技术给用户带来很好的用户体验的同时也对IT企业带来了新的平安威逼，Ajax技术就如同对企业数据建设了一个间接通道。深圳前端培训这使得开发者在不经意间会裸露比以前更多的数据和服务器逻辑。Ajax的逻辑能够对客户端的平安扫描技术暗藏起来，容许黑客从远端服务器上建设新的攻打。还有Ajax也难以避免一些已知的平安弱点，诸如跨站点脚步攻打、SQL注入攻打和基于Credentials的安全漏洞等等 3.对搜索引擎反对较弱：对搜索引擎的反对比拟弱。如果使用不当，AJAX会增大网络数据的流量，从而升高整个零碎的性能。 4.毁坏程序的异样解决机制：至多从目前看来，像Ajax.dll，Ajaxpro.dll这些Ajax框架是会毁坏程序的异样机制的 5.违反URL和资源定位的初衷：我给你一个URL地址，如果采纳了Ajax技术，兴许你在该URL地址上面看到的和我在这个URL地址下看到的内容是不同的。这个和资源定位的初衷是相背离的 6.AJAX不能很好反对挪动设施：一些手持设施（如手机、PDA等）当初还不能很好的反对Ajax 7.客户端过肥，太多客户端代码造成开发上的老本：编写简单、容易出错；冗余代码比拟多（层层蕴含js文件是AJAX的通病，再加上以往的很多服务端代码当初放到了客户端）；毁坏了Web的原有规范。 8.如果用户禁用了JS，网站就取不到数据。 AJAX留神点及实用和不实用场景1.留神点Ajax 开发时，网络提早——即用户发出请求到服务器收回响应之间的距离——须要慎重考虑。不给予用户明确的回应，没有失当的预读数据，或者对 XMLHttpRequest的不失当解决，都会使用户感到提早，这是用户不心愿看到的，也是他们无奈了解的。通常的解决方案是，应用一个可视化的组件来通知用户零碎正在进行后盾操作并且正在读取数据和内容。 2.Ajax实用场景 <1>.表单驱动的交互<2>.深层次的树的导航<3>.疾速的用户与用户间的交换响应<4>.相似投票、yes/no等无关痛痒的场景<5>.对数据进行过滤和操纵相干数据的场景<6>.一般的文本输出提醒和主动实现的场景 3.Ajax不实用场景 <1>.局部简略的表单<2>.搜寻<3>.根本的导航<4>.替换大量的文本<5>.对出现的操纵

关于ajax:爪哇学习笔记AJAXFetch-API

什么是AJAX？AJAX是异步的JavaScript和XML（Asynchronous JavaScript And XML）。简略点说，就是应用 XMLHttpRequest 对象与服务器通信。它能够应用JSON，XML，HTML和text文本等格局发送和接收数据。AJAX最吸引人的就是它的“异步”个性，也就是说它能够在不从新刷新页面的状况下与服务器通信，替换数据，或更新页面。通过交互式网站和古代 Web 规范，AJAX正在逐步被 JavaScript 框架中的函数和官网的 Fetch API 规范取代。 XMLHTTPRequestXMLHttpRequest（XHR）对象用于与服务器交互。通过 XMLHttpRequest 能够在不刷新页面的状况下申请特定 URL，获取数据。这容许网页在不影响用户操作的状况下，更新页面的部分内容。XMLHttpRequest在AJAX编程中被大量应用。let xhr = new XMLHttpRequest();xhr.open('GET', 'http://domain/service');// request state change eventxhr.onreadystatechange = function () { // request completed? if (xhr.readyState !== 4) return; if (xhr.status === 200) { // request successful - show response console.log(xhr.responseText); } else { // request error console.log('HTTP error', xhr.status, xhr.statusText); }};// xhr.timeout = 3000; // 3 seconds// xhr.ontimeout = () => console.log('timeout', xhr.responseURL);// progress事件能够报告长时间运行的文件上传// xhr.upload.onprogress = p => {// console.log(Math.round((p.loaded / p.total) * 100) + '%');// }// start requestxhr.send();全副readyState状态值都在 XMLHTTPRequest.readyState，如下也是： ...

关于ajax:Ajax基础原理及使用教程来自动力节点

首先，咱们来回顾下ajax是什么? Ajax = 异步 JavaScript 和XML。Ajax是一种用于创立疾速动静网页的技术。通过在后盾与服务器进行大量数据交换，Ajax能够使网页实现异步更新。这意味着能够在不从新加载整个网页的状况下，对网页的某局部进行更新。传统的网页(不应用 Ajax)如果须要更新内容，必须重载整个网页面后面谈到ajax是什么，其次要也就是异步提交，大家是否晓得同步和异步提交的区别吗? 同步提交：当用户发送申请时，以后页面不能够应用，服务器响应页面到客户端，响应实现，用户才能够应用页面。异步提交：当用户发送申请时，以后页面还能够持续应用，当异步申请的数据响应给页面，页面把数据显示进去。Ajax工作原理客户端发送申请，申请交给xhr，xhr把申请提交给服务，服务器进行业务解决，服务器响应数据交给xhr对象，xhr对象接收数据，由javascript把数据写到页面上，如下图所示： Ajax申请的五个步骤：//第一步，创立XMLHttpRequest对象var xmlHttp = new XMLHttpRequest();function CommentAll() {//第二步，注册回调函数xmlHttp.onreadystatechange =callback1;//{ // if (xmlHttp.readyState == 4) // if (xmlHttp.status == 200) { // var responseText = xmlHttp.responseText; // } //}//第三步，配置申请信息，open(),get //get申请下参数加在url后，.ashx?methodName = GetAllComment&str1=str1&str2=str2 xmlHttp.open("post", "/ashx/myzhuye/Detail.ashx?methodName=GetAllComment", true); //post申请下须要配置申请头信息 //xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //第四步，发送申请,post申请下，要传递的参数放这 xmlHttp.send("methodName = GetAllComment&str1=str1&str2=str2");//"}//第五步，创立回调函数function callback1() { if (xmlHttp.readyState == 4) if (xmlHttp.status == 200) { //获得返回的数据 var data = xmlHttp.responseText; //json字符串转为json格局 data = eval(data); $.each(data, function(i, v) { alert(v); }); }}//后盾办法 public void GetAllComment(HttpContext context) { //Params能够获得get与post形式传递过去的值。 string methodName = context.Request.Params["methodName"]; //QueryString只能获得get形式传递过去的值。 string str1 = context.Request.Form["str1"]; //获得httpRequest传来的值，包含get与post形式 string str2 = context.Request["str2"]; List comments = new List(); comments.Add(methodName); comments.Add(str1); comments.Add(str2); //ajax承受的是json类型，须要把返回的数据转给json格局 string commentsJson = new JavaScriptSerializer().Serialize(comments); context.Response.Write(commentsJson); }建设xmlHttpRequest对象设置回调函数应用open办法与服务器建设链接向服务器发送数据在回调函数中针对不同的响应状态进行解决AJAX是有很多用途的，接下来给大家介绍AJAX须要把握的几个性能点：1、创立原生Ajax对象 ...

关于ajax:记录Ajax请求报415与404问题

问题形容与剖析明天帮同学旁边共事解决了一个问题，问题是这样的：咱们有一个前后端未分离的我的项目agentBuy（Freemark+JQuery），共事想本地启动agentBuy服务（http:localhost:8001），联调后端共事的本地web-inquiry服务（http://127.168.24.68:9366），间接联调会有跨域问题，于是共事本地启动网关服务（spring cloud gateway）将agentBuy、web-inquiry服务代理到http:webagent.java.com:10000进行联调，然而发现接口报了415。 // agentBuy var params = { "storeId":"HL000001", "quoteType":"AUTO", "enable":"Y"};$.ajax({ url: WEB_ROOT + '/inquiryWeb/supply/quote/enable', // 在本地为http:webagent.java.com:10000/inquiryWeb/supply/quote/enable type: 'post', data : params, dataType: 'json', success: function (response) { // code... }})发现申请的入参会转化成键值对的模式，Request Payload： storeId=HL000001&quoteType=AUTO&enable=Y响应状态码为415（Unsupported Media Type），示意服务器无奈解决申请附带的媒体格式 (不反对的媒体类型) @Log4j2@RestController@RequiredArgsConstructor(onConstructor = @__(@Autowired))public class SupplyQuotationConfigController { private final SupplyQuotationConfigClient supplyQuotationConfigClient; private static final String REQUEST_NOT_VALIDATE = "申请参数校验不通过~"; private static final String INTERNAL_SERVER_ERROR = "网络异样，请稍后重试~"; @PostMapping("/supply/quote/enable") public ResponseEntity<Result<Boolean>> setSupplyQuoteEnable(@RequestBody SupplyQuoteEnableRequest request) { if (null == request || !request.validate()){ return new ResponseEntity<>(new Result<>(HttpStatus.BAD_REQUEST.value(), REQUEST_NOT_VALIDATE, Boolean.FALSE), HttpStatus.OK); } try { supplyQuotationConfigClient.setSupplyQuoteEnable(SupplyQuotationConfigFactory.toSupplyQuotationEnableRequest(request)); return new ResponseEntity<>(new Result<>(HttpStatus.OK.value(), null, Boolean.TRUE), HttpStatus.OK); }catch (HttpMessageException e){ return new ResponseEntity<>(new Result<>(e.getStatusCode(), e.getMessage(), Boolean.FALSE), HttpStatus.OK); }catch (Exception e){ return new ResponseEntity<>(new Result<>(HttpStatus.INTERNAL_SERVER_ERROR.value(), INTERNAL_SERVER_ERROR, Boolean.FALSE), HttpStatus.OK); } }}在排查后端接口发现，申请参数应用了@RequestBody注解，用来接管前端传递给后端的json字符串数据，而当初传的键值对的类型，因为如果没有自行指定request header Content-Type，默认为application/x-www-form-urlencoded，因而前后端定义的参数类型不统一，从而报了415谬误。 ...

关于ajax:Ajax

Ajax的根本执行原理和执行过程通过xmlHttpRequest对象向服务器发送异步申请，获取服务器返回数据后，利用dom操作来更新页面。外围局部是xmlHttpRequest对象，在生命周期的每个阶段xmlHttpRequest对象的不同函数，通过xmlHttpRequest来判断函数执行。 method参数示意申请形式，GET,POST,或者PUT。 URL参数示意门路，也能够绝对路径。 send函数，向服务器发送申请。 setRequestHeader('key','value')函数：设置申请头中属性为key的值为value，在设置申请头之前须要先调用open()函数，设header将随着send()函数一起发送。创立XMLfunction createXMLHttp(){ //code for IE7 Firefox Chrome Opera Safari if(window.XMLHttpRequest){ xmlhttp = new XMLHttpRequest(); } //code for IE6 IE5 if(window.ActiveXObject){ try{ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){ try{ xmlhttp = new ActiveXObject("msxm12.XMLHTTP"); } catch(ex){} } }}建设链接当XMLHttpRequest对象创立结束后，便能够通过open()函数建设链接，它指定了申请的url地址以及通过url传递的参数，默认值为true，示意采纳异步传输的形式。发送申请并传递数据能够应用send()函数发送申请，并传递数据content 解决响应通过HTTP申请status状态码判断，当status值为200时代表申请胜利。 Ajax的长处无需刷新就更新数据异步通信前后端拆散。毛病毁坏浏览器失常后退性能。 Nodejs服务器应用ajax提交form表单form表单自定义的会刷新页面。form提交会传递发送信息。 form表单和Ajax几乎就是绝配。能够间接封装Ajax. 和后面Ajax的提交传递办法一样。步骤创立XMlHttpRequest对象function createXMLHttp(){ //code for IE7 Firefox Chrome Opera Safari var xmlhttp; if(window.XMLHttpRequest){ xmlhttp = new XMLHttpRequest(); } //code for IE6 IE5 if(window.ActiveXObject){ try{ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){ try{ xmlhttp = new ActiveXObject("msxm12.XMLHTTP"); } catch(ex){} } } return xmlhttp;}var xhr = createXMLHttp();建设连贯发送申请用POST办法，能够了解为用户注册办法 xhr.open('post','/saveUser',true);设置申请头发送的是POST申请，须要设置数据传输格局，即设置Content-type属性值，能够通过setRequestHeader()函数对其进行设置，将其值设置为比拟广泛的JSON数据格式。 xhr.setRequestHeader('Content-type','application/json;charset=UTF-8');获取数据通过dom操作获取数据 var username = document.getElementById('username').value;.........发送申请xhr.send(content);解决响应回调函数中判断 ...

关于ajax:讲真的我在b站发布视频你们会看

做短视频的念头之前一段时间我也很想尝试，在抖音快手做短视频，做大做强。前面想想还是算了，七大姑八大姨都在抖音外面，一个算法推送，逢年过节回家必定会问我，‘“为什么不找个班上上，要花工夫做视频”。前面想想还是走b站吧，b站一是我本人一路走来也在下面学习了不少，当然不仅仅是编程方面，这也算是回馈吧，二是b站都受众也比拟能承受一些“新”的货色，也是个展示的平台。会公布的题材像java还是c#也好的相干的编程语言的入门教学题材是十分多的，我再去发这些意义并不是很多，另一个方面是我工夫无限外加能力无限（不肯定能讲的比现有的一些课程好）。所以我公布题材视频全集应该不会连载太多，预计全集外面视频个数不会超过20个。次要是跟大家探讨学习办法（比方踩坑、如何记忆等等之类）,针对编程的通用性公布java相干视频（数据结构与算法、罕用的设计模式等等）、前端须要理解的一些小常识（这块次要是针对后端，前端工程化我也讲不了，毕竟不是业余的前端工程师）、而后就是针对一些话题发表本人的一些认识。目前公布的视频全集这个月（2021-09）,刚出差回来，录制了6段视频，原本认为2小时之内就能搞完了，没想到花了快5个小时，原本想给视频加上字幕（也是为了让大家更分明理解我讲了什么，次要是我地普通话和英文不是很规范，见笑了），而后发现生成后40M的视频奇观的变成了1个G(我惊呆了）前面果决发了没有字幕的（我真是机智的一比）。题外话说了一筐，差点收不住了。本次发的视频是对于activi6.0的应用（与springboot的集成) 视频1：activiti6.0的应用以及与springboot的整合前面发的是对于前端的视频(这块前面会连载): 视频2：一起来前端游玩（html+css+js）其余的视频全集前面会陆续制作。欢送关注我的公众号：程序员ken，程序之路，让咱们一起摸索，共同进步。

关于ajax:fetch是怎么取代ajax的

fetch 简介Fetch API 提供了一个 JavaScript 接口，用于拜访和操纵 HTTP 管道的一些具体局部，例如申请和响应。它还提供了一个全局 fetch() 办法，该办法提供了一种简略，正当的形式来跨网络异步获取资源。这种性能以前是应用 XMLHttpRequest 实现的。Fetch 提供了一个更现实的代替计划，能够很容易地被其余技术应用，例如 Service Workers (en-US)。Fetch 还提供了专门的逻辑空间来定义其余与 HTTP 相干的概念，例如 CORS 和 HTTP 的扩大。fetch 标准与 jQuery.ajax() 次要有三种形式的不同当接管到一个代表谬误的 HTTP 状态码时，从 fetch() 返回的 Promise 不会被标记为 reject，即便响应的 HTTP 状态码是 404 或 500。相同，它会将 Promise 状态标记为 resolve （然而会将 resolve 的返回值的 ok 属性设置为 false ），仅当网络故障时或申请被阻止时，才会标记为 reject。fetch() 能够不会承受跨域 cookies；你也能够不能应用 fetch() 建设起跨域会话。其余网站的 Set-Cookie 头部字段将会被忽视。fetch 不会发送 cookies。除非你应用了credentials 的初始化选项。（自 2017 年 8 月 25 日当前，默认的 credentials 政策变更为 same-origin。Firefox 也在 61.0b13 版本中进行了批改）------------以上不同来自官网 ...

关于ajax:ajax是什么

1、什么是AjaxAjax：即异步 JavaScript 和XML。Ajax是一种用于创立疾速动静网页的技术。通过在后盾与服务器进行大量数据交换，Ajax能够使网页实现异步更新。这意味着能够在不从新加载整个网页的状况下，对网页的某局部进行更新。而传统的网页(不应用 Ajax)如果须要更新内容，必须重载整个网页面。 2、同步与异步的区别同步提交：当用户发送申请时，以后页面不能够应用，服务器响应页面到客户端，响应实现，用户才能够应用页面。网页游戏异步提交：当用户发送申请时，以后页面还能够持续应用，当异步申请的数据响应给页面，页面把数据显示进去。 3、ajax的工作原理客户端发送申请，申请交给xhr，xhr把申请提交给服务，服务器进行业务解决，服务器响应数据交给xhr对象，xhr对象接收数据，由javascript把数据写到页面上

关于ajax:最严谨的ajax请求封装

一、封装ajax封装最谨严的ajax，可间接复制援用ajax.js function sendAjax(obj){ / 先判断url是否传入if(!obj.url){ / 没有传 throw new Error('地址必填') / 抛出自定义谬误}/ 传入了之后须要验证url是否是字符串if(Object.prototype.toString.call(obj.url) !== '[object String]'){ throw new Error('地址必须是字符串')}/ 判断申请形式是否传入if(!obj.method){ obj.method = 'get'}/ 传入了 - 验证是否是get或postif(obj.method.toLowerCase()!=='get' && obj.method.toLowerCase()!=='post'){ throw new Error('申请形式必须是get或post')}/ 判断async是否传入if(obj.async === undefined){ obj.async = true}/ 判断类型if(Object.prototype.toString.call(obj.async) !== '[object Boolean]'){ throw new Error('async必须是布尔值')}/ 判断是否传入successif(!obj.success){ obj.success = function(){}}/ 判断是否是函数if(Object.prototype.toString.call(obj.success) !== '[object Function]'){ throw new Error('success必须是函数')} if(!obj.error){ obj.error = function(){}}if(Object.prototype.toString.call(obj.error) !== '[object Function]'){ throw new Error('error必须是函数')}/ 判断数据是否传入var str = '';if(obj.data){ / 判断类型 if(Object.prototype.toString.call(obj.data) === '[object String]'){ str = obj.data }else if(Object.prototype.toString.call(obj.data) === '[object Object]'){ / 对象要解决成字符串 var f = ''; for(var attr in obj.data){ str += f + attr + '=' + obj.data[attr] f = '&' } }else{ throw new Error('非法数据') } / 如果是get申请，须要将数据拼接在地址后 if(obj.method.toLowerCase() === 'get'){ obj.url += '?' + str }}/ 判断心愿申请回来的数据格式if(!obj.dataType){ obj.dataType = 'json'}/ 如果传了if(obj.dataType.toLowerCase()!=='json' && obj.dataType.toLowerCase()!=='text' && obj.dataType.toLowerCase()!=='xml'){ throw new Error('dataType非法')}/*{ url:'', method:'', data:'', async:'', success:function(){}, error:'', dataType:'text/json/xml'}*/var xhr = new XMLHttpRequest;xhr.onreadystatechange = function(){ if(xhr.readyState === 4){ if(parseInt(xhr.status/100) === 2){ / 确定要不要转对象 switch(obj.dataType.toLowerCase()){ case 'json': var res = xhr.responseText; res = JSON.parse(res) break; case 'xml': var res = xhr.responseXML; break; case 'text': var res = xhr.responseText; break; } obj.success(res) }else{ obj.error() } }}xhr.open(obj.method,obj.url,obj.async)if(obj.method.toLowerCase() === 'post' && obj.data){ / 设置申请头 xhr.setRequestHeader('content-type','application/x-www-form-urlencoded') xhr.send(str) return}xhr.send()} ...

关于ajax:AJAX学习笔记

Ajax概念Ajax是 Asynchronous JavaScript And XML 异步的JavaScript 和 XML。异步和同步：客户端和服务器端互相通信的根底上。客户端必须期待服务器端的响应。在期待的期间客户端不能做其余操作。客户端不须要期待服务器端的响应。在服务器解决申请的过程中，客户端能够进行其余的操作。 Ajax 是一种在无需从新加载整个网页的状况下，可能更新局部网页的技术。通过在后盾与服务器进行大量数据交换，Ajax 能够使网页实现异步更新。这意味着能够在不从新加载整个网页的状况下，对网页的某局部进行更新。传统的网页（不应用 Ajax）如果须要更新内容，必须重载整个网页页面。晋升用户的体验。原生Ajax //1.创立外围对象var xmlhttp;if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest();} else {// code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");} //2. 建设连贯/* 参数： 1. 申请形式：GET、POST * get形式，申请参数在URL后边拼接。send办法为空参 * post形式，申请参数在send办法中定义 2. 申请的URL： 3. 同步或异步申请：true（异步）或 false（同步） */xmlhttp.open("GET", "ajaxServlet?username=tom", true); //3.发送申请xmlhttp.send(); //4.承受并解决来自服务器的响应后果//获取形式：xmlhttp.responseText//什么时候获取？当服务器响应胜利后再获取 //当xmlhttp对象的就绪状态扭转时，触发事件onreadystatechange。xmlhttp.onreadystatechange = function () { //判断readyState就绪状态是否为4，判断status响应状态码是否为200 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { //获取服务器的响应后果 var responseText = xmlhttp.responseText; alert(responseText); }}jQuery实现根本语法如下，有三种形式： ...

关于ajax:Ajax基础-学习记录三

jQuery 中的 Ajax$.ajax()$.ajax()办法概述作用：发送Ajax申请。 $.ajax({ type: 'get', url: 'http://www.example.com', data: { name: 'zhangsan', age: '20' }, //data: 'name=zhangsan&age=20' contentType: 'application/x-www-form-urlencoded', //contentType: 'application/json' beforeSend: function () { return false }, success: function (response) {}, error: function (xhr) {}});beforeSend办法阐明 $.ajax({ // 申请形式 type: 'post', // 申请地址 url: '/user', // 在申请发送之前调用 beforeSend: function () { alert('申请不会被发送') // 申请不会被发送 return false; }, // 申请胜利当前函数被调用 success: function (response) { // response为服务器端返回的数据 // 办法外部会主动将json字符串转换为json对象 console.log(response); }})作用：发送jsonp申请。 ...

关于ajax:Ajax基础-学习记录二

模板引擎模板引擎概述作用：应用模板引擎提供的模板语法，能够将数据和 HTML 拼接起来。官网地址： https://aui.github.io/art-tem... 应用步骤下载 art-template 模板引擎库文件并在 HTML 页面中引入库文件 <script src="./js/template-web.js"></script>筹备 art-template 模板 <script id="tpl" type="text/html"> <div class="box"></div> </script>通知模板引擎将哪一个模板和哪个数据进行拼接 var html = template('tpl', {username: 'zhangsan', age: '20'});将拼接好的html字符串增加到页面中 document.getElementById('container').innerHTML = html;通过模板语法通知模板引擎，数据和html字符串要如何拼接 <script id="tpl" type="text/html"> <div class="box"> {{ username }} </div> </script>FormData模仿HTML表单，相当于将HTML表单映射成表单对象，主动将表单对象中的数据拼接成申请参数的格局。异步上传二进制文件FormData 对象的应用筹备 HTML 表单 <form id="form"> <input type="text" name="username" /> <input type="password" name="password" /> <input type="button"/></form>将 HTML 表单转化为 formData 对象var form = document.getElementById('form'); var formData = new FormData(form);提交表单对象 xhr.send(formData);留神：Formdata 对象不能用于 get 申请，因为对象须要被传递到 send 办法中，而 get 申请形式的申请参数只能放在申请地址的前面。服务器端 bodyParser 模块不能解析 formData 对象表单数据，咱们须要应用 formidable 模块进行解析。 FormData 对象的实例办法获取表单对象中属性的值 formData.get('key');设置表单对象中属性的值 formData.set('key', 'value');删除表单对象中属性的值 formData.delete('key');向表单对象中追加属性值 formData.append('key', 'value');留神：set 办法与 append 办法的区别是，在属性名已存在的状况下，set 会笼罩已有键名的值，append会保留两个值。 ...

关于ajax:Ajax基础-学习记录一

Ajax 根底传统网站中存在的问题网速慢的状况下，页面加载工夫长，用户只能期待表单提交后，如果一项内容不合格，须要从新填写所有表单内容页面跳转，从新加载页面，造成资源节约，减少用户等待时间Ajax 概述Ajax：规范读音 [edæks] ，中文音译：阿贾克斯它是浏览器提供的一套办法，能够实现页面无刷新更新数据，进步用户浏览网站利用的体验。 Ajax 的利用场景页面上拉加载更多数据列表数据无刷新分页表单项来到焦点数据验证搜寻框提醒文字下拉列表Ajax 的运行环境Ajax 技术须要运行在网站环境中能力失效，这里应用Node创立的服务器作为网站服务器。 Ajax 运行原理及实现Ajax 运行原理Ajax 相当于浏览器发送申请与接管响应的代理人，以实现在不影响用户浏览页面的状况下，部分更新页面数据，从而进步用户体验。 Ajax 的实现步骤创立 Ajax 对象 var xhr = new XMLHttpRequest();通知 Ajax 申请地址以及申请形式 xhr.open('get', 'http://www.example.com');发送申请 xhr.send();获取服务器端给与客户端的响应数据 xhr.onload = function () { console.log(xhr.responseText); }服务器端响应的数据格式在实在的我的项目中，服务器端大多数状况下会以 JSON 对象作为响应数据的格局。当客户端拿到响应数据时，要将 JSON 数据和 HTML 字符串进行拼接，而后将拼接的后果展现在页面中。在 http 申请与响应的过程中，无论是申请参数还是响应内容，如果是对象类型，最终都会被转换为对象字符串进行传输。 JSON.parse() // 将 json 字符串转换为json对象申请参数传递传统网站表单提交 <form method="get" action="http://www.example.com"> <input type="text" name="username"/> <input type="password" name="password"> </form> <!– http://www.example.com?username=zhangsan&password=123456 -->Ajax提交GET 申请形式 xhr.open('get', 'http://www.example.com?name=zhangsan&age=20');POST 申请形式 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') xhr.send('name=zhangsan&age=20');申请参数的格局1.application/x-www-form-urlencoded name=zhangsan&age=20&sex=男2.application/json {name: 'zhangsan', age: '20', sex: '男'}在申请头中指定 Content-Type 属性的值是 application/json，通知服务器端以后申请参数的格局是 json。 ...

关于ajax:SpringBootAjax的使用

Ajax概述Ajax 是什么？Ajax (Asynchronous JavaScript and XML) 是一种Web利用客户端技术,能够借助客户端脚本(javascript)与服务端利用进行异步通信(能够有多个线程同时与服务器交互)，并且按需获取服务端数据当前,能够进行部分刷新,进而进步数据的响应和渲染速度。 Ajax 利用场景？Ajax技术最大的劣势就是底层异步,而后部分刷新,进而进步用户体验,这种技术当初在很多我的项目中都有很好的利用,例如: 商品零碎。评估零碎。地图零碎。…..AJAX能够仅向服务器发送并取回必要的数据，并在客户端采纳JavaScript解决来自服务器的响应。这样在服务器和浏览器之间替换的数据大量缩小，服务器响应的速度就更快了。但Ajax技术也有劣势，最大劣势是不能间接进行跨域拜访。 Ajax 申请响应过程剖析传统形式是web申请与响应(客户端要期待响应后果),如图所示: Ajax形式的申请与响应(要害是客户端不阻塞),如图所示: Ajax 编程步骤及模板代码剖析Ajax 编码的根本步骤?(重点是ajax技术的入口-XMLHttpRequest-XHR对象) 第一步:基于dom事件创立XHR对象第二步:在XHR对象上注册状态监听(监听客户端与服务端的通信过程)第三步:与服务端建设连贯(指定申请形式,申请url,同步还是异步)第四步:发送申请(将申请数据传递服务端) Ajax 编码过程的模板代码如下: var xhr=new XMLHttpRequest();xhr.onreadystatechange=function(){ if(xhr.readyState==4&&xhr.status==200){ console.log(xhr.responseText) }}xhr.open("GET",url,true);xhr.send(null);SpringBoot我的项目Ajax的利用第一步：创立我的项目13-springbooit-ajax 第二步:增加Spring web依赖,代码如下: <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId></dependency>第三步:创立AjaxController解决客户端申请,代码如下: package com.cy.pj.ajax.controller;import org.springframework.web.bind.annotation.RequestMapping;import org.springframework.web.bind.annotation.RestController;@RestControllerpublic class AjaxController { @RequestMapping("/doAjaxStart") public String doAjaxStart(){ return "Response Result Of Ajax Get Request 01 "; }}第四步:在我的项目中static目录下,创立一个页面ajax-01.html,代码如下: html元素代码如下: <h1>The Ajax 01 Page</h1><fieldset> <legend>Ajax 异步Get申请</legend> <button onclick="doAjaxStart()">Ajax Get Request</button> <span id="result">Data is Loading ...</span></fieldset>javascript 脚本代码如下: ...

关于ajax:Ajax技术应用

Ajax是什么Ajax是一种web利用技术，能够借助就客户端脚本与服务端利用进行异步通信，，获取服务端数据当前，能够进行部分刷新。进而进步数据的响应和渲染速度。 Ajax入门代码剖析及实现Ajax编码的步骤？重点是Ajax技术的入口-XMLHttpRequest-XHR对象第一步：基于dom事件创立XHR对象第二步：在XHR对象上注册状态监听（监听客户端与服务端的通信过程）第三步：与服务端建设连贯（指定申请形式，申请url,同步还是异步）第四步：发送申请（将申请数据传递服务端）Ajax编码过程疾速入门，代码如下： springboot中的Ajax技术利用及代码实现业务形容在我的项目中static目录下，创立一个页面ajax-01待补充...

关于ajax:WEB前端四Ajax

AjaxAjax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创立交互式、疾速动静网页利用的技术。晚期只有同步的形式，多个申请，只能程序执行，只能期待执行。有了ajax异步技术，能够无需期待上一个申请执行实现，就能够间接发动申请。服务端返回后，ajax通过回调技术告诉客户端程序，把响应的后果传递给用户当时写好的回调函数。通过在后盾与服务器进行大量数据交换，Ajax 能够使网页实现异步更新。这意味着能够在不从新加载整个网页的状况下，对网页进行部分更新，晋升网页的效率，用户无需期待页面的刷新，嗖的一下内容就变动了。扭转原有整个页面刷新，造成页面晃眼的景象。所以这项技术一呈现，就失去业界的推崇。关键字：异步、回调、部分刷新。 XHR对象： XMLHttpRequest对象办法如下： about() 进行以后的申请。 getAllResponseHeaders() 把HTTP申请的所有响应首部作为键/值对返回 getResponseHeader("header") 返回指定首部的串值 open("method","URL",[asyncFlag]) ：建设对服务器的调用。method参数能够是GET、POST。url参数能够是绝对URL或相对URL。这个办法还包含可选的参数，是否异步(true或者false)。 send(content) 向服务器发送申请。send接管一个参数，即作为申请主体发送的数据。如果不须要通过申请主体发送数据，则必须传入null，因为这个参数对有些浏览器来说是必须的。调用send()之后，申请就会分派到服务器。setRequestHeader("header", "value")：把指定首部设置为所提供的值。在设置任何首部之前必须先调用open()。设置header并和申请一起发送 ('post'办法肯定要 ) XMLHttpRequest 对象属性形容： onreadystatechange：状态扭转的事件触发器，每个状态扭转时都会触发这个事件处理器. readyState: 申请的状态。有5个可取值： 0: 未初始化。尚未调用open()办法。1：启动。曾经调用open()办法，但尚未调用send()办法。2：发送。曾经调用send()办法，readyState下面的值就是HEADERS_RECEIVED,曾经发送并且曾经接管到响应头和响应状态了。3：接管。曾经接管到局部相应数据。4：实现。曾经接管到全副相应数据，而且曾经能够在客户端应用了。 responseText：服务器的响应，返回数据的文本。 responseXML：服务器的响应，返回数据的兼容DOM的XML文档对象，这个对象能够解析为一个DOM对象。 status：服务器的HTTP状态码（如：404 = "文件末找到" 、200 ="胜利" ，等等） statusText: 服务器返回的状态文本信息，HTTP状态码的相应文本（OK或Not Found（未找到）等等。 JsonJSON(JavaScript Object Notation, JS 对象简谱) 起名不咋地，十分拗口，咱们就记住它是一种轻量级的数据交换格局即可。它基于 ECMAScript (js标准)的一个子集，采纳齐全独立于编程语言的文本格式来存储和示意数据。简洁和清晰的层次结构使得 JSON 成为现实的数据交换语言。是xml的终结者，成为支流开发方式（ajax异步申请，json返回）。关键字：ES规范、JSON、XML例京东网页获取一个商品信息： [{"cbf":"0","id":"J_100003717483","m":"10000.00","op":"2499.00","p":"2099.00"}]构造特点：数组[]一条记录{}，多条记录用逗号隔开 {},{}，最初一条没有逗号键值对 "p":"2099.00"，kv用双引号括，多个用逗号隔开，最初一个没有逗号网页实现部分刷新技术栈：javascript、jQuery、http协定（申请request、响应response）、Web中间件(tomcat)、mysql数据库，json传输。实现Ajax原生js实现Ajax创立XHR对象设置状态监听建设与服务端的连贯发送申请GET申请： <script> //js当中排错的形式：断点(debugger)，console.log，排除法 function doAjaxGet(){//这个办法运行与浏览器过程外部的主线程（main）中 debugger; //1.创立XHR对象（此对象时ajax技术利用的入口对象，发送异步申请，解决响应后果都是通过此对象实现） var xhr=new XMLHttpRequest(); //2.设置状态监听 xhr.onreadystatechange=function (){//事件监听函数（解决客户端与服务端通过过程产生的数据） if(xhr.readyState==4&&xhr.status==200){ //readyState的值0，1，2，3，4 //0，示意还未执行open办法 //1，示意已执行open办法但还未执行send办法 //2，示意已执行send办法 //3，示意客户端正在接管服务端响应的数据 //4，示意客户端曾经实现响应数据的接管 //xhr.status==200示意服务端处理过程时OK的 var result=xhr.responseText;//获取服务端响应的文本数据 document.getElementById("resultId").innerHTML=result; } }; //3.建设与服务端的连贯 xhr.open("GET","http://127.0.0.1/doAjaxGet",true);//true代表异步申请；false代表同步申请 //127.0.0.1 可能存在跨域问题须要在管制层加注解@CrossOrigin //4.发送申请 xhr.send(null);//将申请交给ajax引擎 console.log("do other ....");//run main thread }</script>POST申请： ...

关于ajax:第三阶段-Day05-完成商品后台管理

1. 实现商品后盾治理1.1 表格数据的展示形式1.1.1 编辑页面`</script>--> <table class="easyui-datagrid" style="width:500px;height:300px" data-options="url:'datagrid_data.json',method:'get',fitColumns:true,singleSelect:true,pagination:true"> <thead> <tr> <th data-options="field:'code',width:100">Code</th> <th data-options="field:'name',width:100">Name</th> <th data-options="field:'price',width:100,align:'right'">Price</th> </tr> </thead> </table>` 1.1.2 返回值类型的阐明属性信息: total/rows/属性元素 `{ "total":2000, "rows":[ {"code":"A","name":"果汁","price":"20"}, {"code":"B","name":"汉堡","price":"30"}, {"code":"C","name":"鸡柳","price":"40"}, {"code":"D","name":"可乐","price":"50"}, {"code":"E","name":"薯条","price":"10"}, {"code":"F","name":"麦旋风","price":"20"}, {"code":"G","name":"套餐","price":"100"} ]}` 1.2 JSON常识回顾1.2.1 JSON介绍JSON(JavaScript Object Notation) 是一种轻量级的数据交换格局。它使得人们很容易的进行浏览和编写。 1.2.2 Object对象类型 1.2.3 Array格局 1.2.4 嵌套格局例子: `{"id":"100","hobbys":["玩游戏","敲代码","看动漫"],"person":{"age":"19","sex":["男","女","其余"]}}` 1.3 编辑EasyUITablle的VO对象`package com.jt.vo;import com.jt.pojo.Item;import lombok.AllArgsConstructor;import lombok.Data;import lombok.NoArgsConstructor;import lombok.experimental.Accessors;import java.util.List;@Data@Accessors(chain = true)@NoArgsConstructor@AllArgsConstructorpublic class EasyUITable { private Long total; private List<Item> rows;}` 1.4 商品列表展示1.4.1 页面剖析业务阐明: 当用户点击列表按钮时.以跳转到item-list.jsp页面中.会解析其中的EasyUI表格数据.发动申请url:’/item/query’要求返回值必须满足特定的JSON构造,所以采纳EasyUITable办法进行数据返回. ...

关于ajax:第三阶段-Day04-创建父级子级项目

1.Ajax增强1.1 Ajax特点应用ajax特点为: 部分刷新,异步响应.同步毛病: 如果进行了同步的申请,那么用户不能够做任何的操作,只能期待工作的实现. 用户的敌对性差. 1.2 对于Ajax调用阐明`<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%><%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><title>您好Springboot</title><script type="text/javascript" src="/js/jquery-3.4.1.min.js"></script><script type="text/javascript"> /** for语法1: for(let i=0;i<xxx.length;i++){ ..... } for语法2: index 代表下标 for(let index in data){ console.log("测试for循环") let user = data[index]; alert(user.name); } for语法3: user以后循环遍历的对象 for(let user of data){ console.log("for循环测试:"+user.name); } **/ $(function(){ $.ajax({ type : "get", url : "/findAjax", //dataType : "text/json/html/xml", //返回值类型 async : false, //敞开异步操作,改为同步的申请 success : function(data){ let trs = ""; for(let user of data){ let id = user.id; let name = user.name; let age = user.age; let sex = user.sex; trs += "<tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+sex+"</td></tr>" } $("#tab1").append(trs); }, error : function(){ alert("申请异样!!!!"); } }) //1. $.get(url,data,回调函数) //findAjax查问后端userList汇合信息. /* $.get("/findAjax",function(data){ $(data).foreach(function(index,user){ console.log(user); }) let trs = ""; for(let user of data){ let id = user.id; let name = user.name; let age = user.age; let sex = user.sex; trs += "<tr align='center'><td>"+id+"</td><td>"+name+"</td><td>"+age+"</td><td>"+sex+"</td></tr>" } $("#tab1").append(trs); }); */ });</script></head><body> <table id="tab1" border="1px" width="65%" align="center"> <tr> <td colspan="6" align="center"><h3>学生信息</h3></td> </tr> <tr> <th>编号</th> <th>姓名</th> <th>年龄</th> <th>性别</th> </tr> </table></body></html>` 京淘我的项目架构设计============ ...

关于ajax:Ajax个人理解

Ajax概述: Ajax (Asynchronous JavaScript and XML) 是一种Web利用技术,能够借助客户端脚本(javascript)与服务端利用进行异步通信，获取服务端数据当前,能够进行部分刷新。进而进步数据的响应和渲染速度.为什么会有Ajax呢？强化了服务器的响应速度，留神:AJax不能进行跨域拜访实现AJax的固定步骤:1.创立XHR（XMLHttpReques）对象var xhr= new XMLHttpRequest();2.创立状态监听呈现谬误时有三种查看办法(consloe日志法，debbger断点调试，排除法)xhr.onreadystatechange=function(){ if(xhr.readState==4){//服务端响应完结，客户端接管实现 if(xhr.status==200){//200示意失常响应完结 console.log(xhr.responseText); } }}3.建设连贯xhr.open("提交形式","(GET提交)提交的门路?提交的参数/(Post)提交的门路",boolean(true示意异步提交，false示意同步提交));4.提交xhr.send("(Post提交)提交的参数/(GET提交)null或者什么也不写")注意事项: 构建参数对象形式一 var params="name"+name;//淘汰形式二只有用到字符串拼接就用这种写法 const只有当前不想他人用就用const来润饰 const params = `name=${an}`;//一种新的写法。这种写法称之为模板字符串，所有字符串形式三 const params= {"name":name};//JavaScript中的对象var let const的区别:var :js中全局变量，被润饰后没有被初始化的化输入的时undefinder let :js中局部变量部分中尽量应用let函数函数外部应用let定义后，对函数内部无影响块级作用域 const: js中常量修饰符必须初始化赋值

关于ajax:什么是ajax

才开始接触Ajax的时候,只是晓得它的作用是客户端与服务端之间在不刷新网页的状况下进行数据交换，但对于他具体是什么，在客户端与服务端怎么进行数据交换的原理是不分明的,当初咱们来理解一下. 一.Ajax是什么 Ajax，全称Asynchronous JavaScript and XML ，也就是异步加载的javascript 和 XML2.Ajax是一种用于创立疾速动静网页的技术。 3.通过在后盾与服务器进行大量数据交换，Ajax能够使网页实现异步更新。这意味着能够在不从新加载整个网页的状况下，对网页的某局部进行更新。二.Ajax的长处 ajax能在页面上宽泛的应用，当然是尤其的益处长处的中央。（1）、不须要刷新失去动态数据（地图,投票网站等）（2）、界面好看，给用户的体验好（3）、对数据库的操作（4）、局部刷新页面（5）、返回类型多：字符串、json、xml、html 三.工作流程 1.发送接口申请 2.解析内容 3.渲染网页失去的后果当初软件开发实现前后端拆散开发,前端写好页面之后,通过Ajax调用后端提供的接口实现前后端的数据交互,个别是通过接口文档或者工具进行接口查看的,我个别应用的是国产的apipost的接口测试工具. 这是测试接口是否失常和查看后端给的响应值通过须要传递的url,参数和申请办法,来获取接口返回的响应值而后咱们在Ajax中依据这些货色来写,就能够实现前后端数据交互了. ApiPost - 可间接生成文档的API调试、管理工具www.apipost.cn

关于ajax:ajax是什么

才开始接触Ajax的时候,只是晓得它的作用是客户端与服务端之间在不刷新网页的状况下进行数据交换，但对于他具体是什么，在客户端与服务端怎么进行数据交换的原理是不分明的,当初咱们来理解一下. 一.Ajax是什么 Ajax，全称Asynchronous JavaScript and XML ，也就是异步加载的javascript 和 XML2.Ajax是一种用于创立疾速动静网页的技术。 3.通过在后盾与服务器进行大量数据交换，Ajax能够使网页实现异步更新。这意味着能够在不从新加载整个网页的状况下，对网页的某局部进行更新。二.Ajax的长处 ajax能在页面上宽泛的应用，当然是尤其的益处长处的中央。（1）、不须要刷新失去动态数据（地图,投票网站等）（2）、界面好看，给用户的体验好（3）、对数据库的操作（4）、局部刷新页面（5）、返回类型多：字符串、json、xml、html 三.工作流程 1.发送接口申请 2.解析内容 3.渲染网页失去的后果当初软件开发实现前后端拆散开发,前端写好页面之后,通过Ajax调用后端提供的接口实现前后端的数据交互,个别是通过接口文档或者工具进行接口查看的,我个别应用的是国产的apipost的接口测试工具.（这个工具官网下载和更新保护都很及时http://www.apipost.cn）这是测试接口是否失常和查看后端给的响应值通过须要传递的url,参数和申请办法,来获取接口返回的响应值而后咱们在Ajax中依据这些货色来写,就能够实现前后端数据交互了.

关于ajax:Ajax在实战中的应用

1.什么是Ajax？Ajax是一种Web技术，利用客户端脚本(javascript)与服务器端进行的异步交互，实现页面的部分刷新。同步交互:客户端与服务端通过HTTP协定，实现Request(申请)与Response(响应)的成对呈现。异步交互:在客户端与服务端两头存在一个ajax引擎，客户端在向服务端发送申请的同时，客户端委托给ajax,能够有多个Ajax申请发向服务端发送申请。 2.Ajax的劣势通过异步交互，实现页面的部分刷新。一面墙上有一个污点，咱们是刷新整面墙效率高还是针对某个地位部分粉刷效率高。可想而知，ajax极大的进步了数据的效应数据。视图页面加载是很快的，然而数据的加载是比较慢的。通过ajax技术，减少ajax申请的个数，这样在服务器和浏览器之间替换的数据大量缩小，服务器响应的速度就更快了。 3.Ajax的用法3.1 原生用法所有的Ajax 申请都会基于DOM(HTML元素)事件，通过XHR（XMLHttpRequest）对象实现与服务端异步通信部分更新第一步：基于dom事件创立XHR对象(XMLHttpRequest对象) 第二步：注册XHR对象状态监听，通过回调函数(callback)解决状态信息。第三步：创立与服务端的连贯第四步：发送异步申请实现与服务端的通信 //Ajax形式的申请 function doAjaxGet(){ //1.创立XHR对象 var xhr=new XMLHttpRequest(); //2.设置状态监听(将服务端响应的后果更新到ajaxResultId地位) xhr.onreadystatechange=function(){ if(xhr.readyState==4&&xhr.status==200){ console.log(xhr.responseText); document.getElementById("ajaxResultId").innerHTML=xhr.responseText; } }; //3.建设连贯 xhr.open("GET","http://localhost/doGet",**true**); //true示意异步(底层会启动线程与服务端通信) //4.发送申请 xhr.send();} 这种原始形式，反复代码过多，极大的升高了咱们的开发效率。接下来咱们应用框架，框架会提取共性而后进行封装，留出个性接口不便咱们应用。 3.2通过jQuery框架应用AjaxjQuery设计的主旨是“write Less，Do More”，即提倡写更少的代码，做更多的事件 get函数利用,代码如下 //向服务端发送Ajax Get 申请 function **doGet**(){ //1.定义申请的url var url="doAjaxGet"; //2.定义申请的参数 var params="msg=hello jquery ajax get"; //3.发送异步Get申请 $.get(url,params,function(result){ //document.getElementById("result").innerHTML=result; $("#result").html(result); },"text");//在这个函数中你看到ajax的代码了吗? }post函数利用,代码如下 //向服务端发送Ajax Post 申请 function doPost(){ //1.定义申请的url var url="doAjaxPost"; //2.定义申请的参数 var params="msg=hello jquery ajax Post"; //3.发送异步POST申请 //这里的$符号为jQuery中的一个对象 //post(url[,params][,callback][,dataType])为jquery中的一个ajax函数 $.post(url,params,function(result){ //post申请个别用于向服务端提交数据 $("#result").html(result); });//在这个函数中你看到ajax的代码了吗? }ajax函数利用 ...

关于ajax:Ajax

1.ajax增强同步申请：分身无术，用户操作某一工作的同时，不能够做任何的操作，只能期待工作实现，用户的敌对性差异步申请：用户把申请交由ajax引擎再交由服务器，必须得有回调函数的反对$.get("/findAjax",function (result) {})遍历后果集：办法2办法3ajax

关于ajax:Ajax-技术应用

1 Ajax 简介1.1 Ajax是什么Ajax (Asynchronous JavaScript and XML) 是一种Web利用技术,能够借助客户端脚本(javascript)与服务端利用进行异步通信，获取服务端数据当前,能够进行部分刷新。进而进步数据的响应和渲染速度。 1.2Ajax技术利用场景1）Ajax技术最大的劣势就是底层异步，而后进行部分刷新，进而进步用户体验，这种技术当初在很多我的项目中都有很好的利用。2）Ajax能够仅向服务器发送并取回必要的数据，并在客户端采纳JavaScript解决来自服务器的响应。这样在服务器和浏览器之间替换的数据大量缩小，服务器响应的速度就能够放慢。劣势是：不能之间进行跨域拜访 2 Ajax 疾速入门2.1申请响应过程剖析所有的Ajax申请都会基于DOM(HTML元素)事件，，通过XHR(XMLHttpRequest)对象实现与服务端异步通信部分刷新。 2.2Ajax利用的编程步骤如下1）基于dom事件创立XHR对象(XMLHttpRequest对象)2）注册XHR对象监听状态，通过回调函数（callback）解决状态信息3）创立于服务端的连贯4）发送异步申请实现与服务端的通信 2.3Ajax入门代码繁难实现业务形容,设计如下页面,在页面上点击Get Request按钮时,向服务端发送异步申请获取服务端数据,而后将响应后果更新到页面上. 2.3.1第一步服务端代码设计**package com.cy.ajax.controller;@Controller@RequestMapping("/")public class AjaxController { @RequestMapping("doAjax01UI") public String doAjax01UI() { return "ajax-01"; } //解决ajax申请的服务端设计 @RequestMapping("doAjaxGet") @ResponseBody //将办法返回值以字符串模式进行输入 public String doAjaxGet() throws Exception{System.out.println("==doGet()=="); //Thread.sleep(3000);//模仿耗时操作 return "Ajax Get request result"; }}2.3.2客户端代码设计客户端页面要害dom元素设计  <fieldset>  <legend>异步申请</legend> <button onclick="doAjaxGet()">Get Request</button> <span id="ajaxResultId">loading data ....</span> </fieldset>客户端页面中要害Ajax代码设计与实现 //Ajax形式的申请 function doAjaxGet(){//谬误调试:debugger,console.log(),排除法 //1.创立XHR对象 var xhr=new XMLHttpRequest(); //2.设置状态监听(将服务端响应的后果更新到ajaxResultId地位)xhr.onreadystatechange=function(){ //console.log(xhr.readState); if(xhr.readyState==4&&xhr.status==200){ console.log(xhr.responseText);document.getElementById("ajaxResultId").innerHTML=xhr.responseText; } }; //3.建设连贯xhr.open("GET","http://localhost/doGet",true);//true示意异步(底层会启动线程与服务端通信) //4.发送申请 xhr.send();}3 Ajax技术进阶实现3.1Ajax要害代码的封装在理论编程过程中咱们通常会封装代码共性。提取代码个性，而后来进步代码的可重用性。例如：第一步：封装Ajax Get申请，要害代码剖析如下： ...

关于ajax:1活动html

html页面~~~~ <!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet"><link href="/datepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet"></head><body>  <div class="container"> <h1>The hello</h1>   <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#myModal">点击增加</button>  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <h4 class="modal-title" id="myModalLabel">都是中国人玩什么洋文</h4> </div>  <div class="modal-body">  <form action="doinsertObject" method="post"> <div class="form-group"> <label for="1exampleInputEmail1">滚滚滚</label> <input type="text" class="form-control" name="title" id="1exampleInputEmail1" placeholder="Email"> </div> <div class="form-group"> <label for="exampleInputEmail1">滚滚驴</label> <select class="form-control" name="category" id="categoryId"> <option value="training">教育机构</option> <option value="Playing">轻易</option> </select> </div> <div class="form-group"> <label for="2exampleInputEmail1">滚滚狗</label> <input type="text" autocomplete="off" class="form-control form_datetime" name="startTime" id="2exampleInputEmail1" placeholder="Email"> </div>  <div class="form-group"> <label for="3exampleInputEmail1">滚滚熊</label> <input type="text" autocomplete="off" class="form-control form_datetime" name="endTime" id="3exampleInputEmail1" placeholder="Email"> </div> <div class="form-group"> <lable for="remarkId">备注</lable> <textarea class="form-control" name="remark" id="remarkId"></textarea> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">勾销</button> <button type="button" class="btn btn-primary" onclick="doinsertObject()">确定</button> </div> </div> </div> </div> <table class="table table-bordered"> <thead> <tr> <th>id</th> <th>title</th> <th>category</th> <th>startTime</th> <th>endTime</th> <th>remark</th> <th>state</th> <th>createdTime</th> <th>createdUser</th> </tr> </thead> <tbody id="tbodyId">  <tr> <td>数据正在踊跃的加载中</td> </tr> </tbody> </table>  </div> <script type="text/javascript" src="/jquery.min.js"></script>  <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>  <script src="/datepicker/js/bootstrap-datetimepicker.min.js"></script>  <script src="/datepicker/js/locales/bootstrap-datetimepicker.zh-CN.js"></script> <script type="text/javascript"> //在指定地位初始化datepicker对像 $(".form_datetime").datetimepicker({//通过类选择器获取的值想让哪个工夫变在哪个name的class指定。form_datetime language:"zh-CN",//定义格局 format:"yyyy/mm/dd hh:ii", autoclose:true }) //基于此形式提交表单,表单中的元素肯定要渔鸥name属性 //并且name属性名的设计肯定要与服务端承受参数时的设计相匹配 function doinsertObject(){ //$("form").submit();//提交数据 //1.定义url反正就是应用异步加载最好是 let url="doinsertObject"; //2.定义情趣参数异步传参数办法 var params={ title:$("#1exampleInputEmail1").val(),//为jaqurey中或制订表单元素的value值 category:$("#categoryId").val(), startTime:$("#2exampleInputEmail1").val(), endTime:$("#3exampleInputEmail1").val(), remark:$("#remarkId").val(), } //serialize()为jquery中间接获取表单数据办法 //var params=$(#form这个是表单的名字)serialize(); //console.log("params",params);输入一下语句//验证参数的值是否存在 //这个是异步加载最好不要同步加载 //3.发送异步申请 $.ajax({ type:"post", url:url, data:params, success:function(result){ alert(result)//提示框 //暗藏模态框 $("#myModal").modal("hide"); //重行执行查问在调用一次查询方法 a(); } }); } //向服务端发送异步申请获取流动信息并更新到页面上 function a(){//如果须要第二次调用就不要应用自调用函数了 let url="doFindActivitys"; let params={};//name=空值 //借助jquery中的ajax函数，向服务器发送异步申请获取流动信息 $.ajax({ url:url, data:params, dataType:"json", success:function(result){ doHandleQueryResult(result);//定义一个办法让上面的定义也能够间接写在这外面 } }); }//这个括号代表函数调用 a(); //解决服务端返回的流动信息//1迭代result,并将result内容填充tbody地位 function doHandleQueryResult(result){ //1获取tbody对象，并清空原有内容 var tBody=$("#tbodyId")//原生写法document。querySelector("#tbodyId"); tBody.empty();//清空原有的内容 //2迭代result，将流动信息追加到tbody中 result.forEach((item)=>{//这里的item为一个变量，代表数组中的冒个元素 tBody.append(//被替换替换后的数据 append增加新的数据； `<tr> <td>${item.id}</td> <td>${item.title}</td> <td>${item.category}</td> <td>${item.startTime}</td> <td>${item.endTime}</td> <td>${item.remark}</td> <td>${item.state==1?"无效":"有效"}</td> <td>${item.createdTime}</td> <td>${item.createdUser}</td> </tr>` ); }); } </script></body></html>

关于ajax:Ajax获取node服务器数据

1.筹备因为是要将服务器获取的数据放在网页中所以说对页面的渲染是必要的这里我筹备的是 art-template模板 2.服务器的筹备服务器要筹备好渲染到页面的数据 3.页面的操作这里我做的的是一个搜寻框提醒性能解说都在代码正文中服务器代码如下 // 输入框文字提醒app.get("/searchAutoPrompt", (req, res) => { // 搜寻关键字 const key = req.query.key; // 提醒文字列表 const list = ["百度", "百度官网", "百度游戏", "百度网盘"]; // 搜寻后果 filter是一个遍历的函数 includes（key）是但凡字符串含有key都返回 let result = list.filter((item) => item.includes(key)); // 将查问后果返回给客户端 res.send(result);});页面代码：上面的代码我用了一个封装好的Ajax函数代码如下 function ajax (options) { // 默认值 var defaults = { type: 'get', url: '', async: true, data: {}, header: { 'Content-Type': 'application/x-www-form-urlencoded' }, success: function () {}, error: function () {} } // 应用用户传递的参数替换默认值参数 Object.assign(defaults, options); // 创立ajax对象 var xhr = new XMLHttpRequest(); // 参数拼接变量 var params = ''; // 循环参数 for (var attr in defaults.data) { // 参数拼接 params += attr + '=' + defaults.data[attr] + '&'; // 去掉参数中最初一个& params = params.substr(0, params.length-1) } // 如果申请形式为get if (defaults.type == 'get') { // 将参数拼接在url地址的前面 defaults.url += '?' + params; } // 配置ajax申请 xhr.open(defaults.type, defaults.url, defaults.async); // 如果申请形式为post if (defaults.type == 'post') { // 设置申请头 xhr.setRequestHeader('Content-Type', defaults.header['Content-Type']); // 如果想服务器端传递的参数类型为json if (defaults.header['Content-Type'] == 'application/json') { // 将json对象转换为json字符串 xhr.send(JSON.stringify(defaults.data)) }else { // 发送申请 xhr.send(params); } } else { xhr.send(); } // 申请加载实现 xhr.onload = function () { // 获取服务器端返回数据的类型 var contentType = xhr.getResponseHeader('content-type'); // 获取服务器端返回的响应数据 var responseText = xhr.responseText; // 如果服务器端返回的数据是json数据类型 if (contentType.includes('application/json')) { // 将json字符串转换为json对象 responseText = JSON.parse(responseText); } // 如果申请胜利 if (xhr.status == 200) { // 调用胜利回调函数, 并且将服务器端返回的后果传递给胜利回调函数 defaults.success(responseText, xhr); } else { // 调用失败回调函数并且将xhr对象传递给回调函数 defaults.error(responseText, xhr); } } // 当网络中断时 xhr.onerror = function () { // 调用失败回调函数并且将xhr对象传递给回调函数 defaults.error(xhr); }}<script src="/js/ajax.js"></script><script src="/js/template-web.js"></script><script type="text/html" id="tpl"> {{each result}} <li class="list-group-item">{{$value}}</li> {{/each}}</script><script> // 获取搜寻框 var searchInp = document.getElementById('search'); // 获取提醒文字的寄存容器 var listBox = document.getElementById('list-box'); //这里用定时器是为了优化定时向服务器发送申请优化了对服务器的压力 // 存储定时器的变量 var timer = null; // 当用户在文本框中输出的时候触发 searchInp.oninput = function () { // 革除上一次开启的定时器 clearTimeout(timer); // 获取用户输出的内容 var key = this.value; // 如果用户没有在搜寻框中输出内容 if (key.trim().length == 0) { // 将提醒下拉框暗藏掉 listBox.style.display = 'none'; // 阻止程序向下执行 return; } // 开启定时器让申请提早发送 timer = setTimeout(function () { // 向服务器端发送申请 // 向服务器端索取和用户输出关键字相干的内容 ajax({ type: 'get', url: 'http://localhost:3000/searchAutoPrompt', data: { key: key }, success: function (result) { // 应用模板引擎拼接字符串 var html = template('tpl', {result: result}); // 将拼接好的字符串显示在页面中 listBox.innerHTML = html; // 显示ul容器 listBox.style.display = 'block'; } }) }, 800) }</script>

关于ajax:ajax的核心APIXMLHttpRequest

繁难的ajaxget申请 //get申请const xhr = new XMLHttpRequest()xhr.open("GET","/api",false)//false示意申请形式为异步xhr.onreadystatechange = function () { if(xhr.readyState === 4){ if(xhr.status === 200){ console.log(JSON.parse(xhr.responseText))//转化成json格局 } }}xhr.send(null)post申请 const xhr = new XMLHttpRequest()xhr.open("POST","/login",false)xhr.onreadystatechange = function () { if(xhr.readyState === 4){ if(xhr.status === 200){ console.log(JSON.parse(xhr.responseText)) } }}const postData = { username:'张三', password:'123456'}xhr.send(JSON.stringify(postData))//发送字符串xhr.readyState状态0-（未初始化）还没有调用send()办法1-（载入）已调用send()办法，正在发送申请2-（载入实现）send()办法执行实现，曾经接管到全副响应内容3-（交互）正在解析响应内容4-（实现）响应内容解析实现，能够在客户端调用xhr.status2xx-示意胜利解决申请，如2003xx-重定向，浏览器间接跳转，如301（永恒重定向），302（长期重定向），304（资源未扭转）4xx-客户端申请谬误，如404（申请地址有谬误），403（客户端没有权限）5xx-服务器端谬误

关于ajax:ajax的常用函数

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body> <h1>The Jquery ajax</h1><fieldset> <legend>jquery</legend> <button onclick="doGet()">$get(...)</button> <form> 输出:<input type="text" name="name"> <input type="button" onclick="doPost()" value="提交 "> </form> <span id="resultId"></span></fieldset><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript"> 1.这个是get提交函数； function doGet() { //申请url var url = "/jquery/doAjaxGet"; //申请参数 var params = "msg=hello jquery ahax get method";//将代码转为大写的字母 //发送异步申请 $.get(url, params, function(result) { //document.querySelector("#resultId").innerHTML =result; $("#resultId").html(result);// }) } 2.post提交函数 function doPost() { //申请url var url = "/jquery/doAjaxPost"; //申请参数 var name = document.forms[0].name.value;//获取name的值； var params = "name=" + name;//将代码转为大写的字母 //发送异步申请 $.post(url, params, function(result) { //document.querySelector("#resultId").innerHTML =result; $("#resultId").html(result);// }) } 3.这个是ajax提交函数 function doAjax() { //1.定义申请的url var url = "doAjaxGet"; //2.定义申请的参数 var params = "msg=hello jquery ajax request"; //3.发送异步Get申请 //这里的$符号为jQuery中的一个对象 $.ajax({ //右边的货色是零碎定义的不能轻易乱改； type : "GET",//能够省略默认为get申请 url : url, data : params,//无需向服务端传参时能够不写 async : true,//能够补写（由ajax函数neibu基于返回值进行匹配解决） success : function(result) { //解决服务端返回的失常信息 $("#result").html(result); }, error : function(xhr) {//解决服务端返回的异样信息 console.log(xhr.statusText); $("#result").html(xhr.statusText); } }) } 4.这个是load提交函数 function doLoad() { //1.定义申请的url var url = "doAjaxGet"; //2.定义申请的参数 var params = "msg=hello jquery ajax request"; //3.发送异步Get申请 //通过load函数向服务端发送异步申请，将服务端响应的后果异步更新到 //resultId对应的地位 $("#result").load(url);// } </script></body></html> ...

关于ajax:ajax回掉函数封装共性的详解

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body> <h1>The Ajax 01</h1><fieldset> <legend>ajax表单申请</legend> <form> <input type="text" name="name" onblur="doCheck()" onfocus="doClear()"> <input type="button" onclick="doSave()" value="Save"> </form> <span id="resultId"></span> </fieldset><script type="text/javascript"> //点击框分明残留数据 function doClear() { document.forms[0].name.value = "";//框中数据清空 document.getElementById("resultId").innerHTML = "";//上面提醒数据清空 } //封装共性； function doCheck() { //申请url var url = "doCheck"; //定义申请参数 var name = document.forms[0].name.value;//获取name的值 var params = "name=" + name;//传参数给服务端 //发送异步申请get doAjaxGet(url, params, function(result) {//rsult轻易起的名字这个参数对应上面的callback document.getElementById("resultId").innerHTML = result;//获取下面哪个span元素的参数 }) } //检测名字是否已存在 function doAjaxGet(url, params, callback) { let xhr = new XMLHttpRequest(); //2.定义HR对象的监听 xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { callback(xhr.responseText);// //缓存数据 } } //建设连贯 // 返回的是doCheck然而拼接了name这个值？ xhr.open("GET", url + "?" + params, true); //发送申请 xhr.send(null); } //点击事件封装共性； function doSave() {//另外申明了一个函数 //这个是url的参数 var url = "doSave";//把值传给了url的服务端 //这个是name的参数 let name = document.forms[0].name.value;//获取name的数值 var params = "name=" + name; doAjaxPost(url, params, function(a) { document.getElementById("resultId").innerHTML = a;//获取下面哪个span元素的参数 }) } //点击事件 function doAjaxPost(url, params, callback) {//这里有url的值和name的数值和新定义的一个参数 //1/创立XHR对象 let xhr = new XMLHttpRequest(); //2.定义XHR对象的监听 xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { callback(xhr.responseText);//调用函数 //缓存数据 document.getElementById("resultId").innerHTML = xhr.responseText; } } //3.建设连贯(post须要设置申请头信息) xhr.open("POST", url, true)//异步申请 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//这个是设置申请头 //4.发送申请 let name = document.forms[0].name.value;//获取name的值 //构建参数对象三种形式 //var p="name="+name;淘汰 //let p = `name=${name}`;//模板字符串 //var p={"name":name};js对象原生的ajax是不能这样用的 xhr.send(params);//post的申请参数须要写到此地位 //承受name的数值 }</script></body></html> ...

关于ajax:Ajax技术在Jquery中的应用

jQuery中的罕用的ajax函数ajax(...)get(...)post(...)getJSON(...) jQuery中罕用的Ajax函数利用案例首先在客户端，新构建一个页面，在<body>中引入jquery-min.js文件 <fieldset> <legend>Jquery Ajax function</legend> <button onclick="doGet()">$.get(..)</button> <button onclick="doPost()">$.post(..)</button> <button onclick="doAjax()">$.ajax(..)</button> <button onclick="doLoad()">$.load(..)</button> <span id="resultId"></span> </fieldset> <script type="text/javascript" src="/js/jquery.min.js"></script> 1.get函数利用客户端 function doGet(){ 1.申请url let url ="/jquery/doAjaxGet"; 2.申请参数 let params="msg= hello everyone jiayouya" 3发送异步申请 $.get(url,params,(rusult)=>{ $("#resultId").html(result); });}服务端 @Controller@RequestMapping("/jquery")public class JQueryController { @RequestMapping("/doAjaxGet") @ResponseBody public String doAjaxGet(String msg) { //将客户端传到服务端的字符串转换为大写，而后以字符串的模式响应给客户端 return "Jquery get request result" + msg.toUpperCase(); } }2.post函数利用客户端 function doPost(){ 1.申请url let url ="/jquery/doAjaxPost"; 2.申请参数 let params="title=AAA&&id=10" 3发送异步申请 $.post(url,params,(rusult)=>{ $("#resultId").html(result); });}服务端 @RequestMapping("/doAjaxPost") @ResponseBody public String doAjaxGet(String title,Integer id) { return "Jquery get request result" +title+"/"+id ; }3.ajax函数利用客户端 ...

关于ajax:Ajax进阶通过构造函数提取共性三元运算符

(()=>{//1.定义一个构造函数var ajax=function(){}//函数表达式（能够将其了解为构造函数）//2.在构造函数外部的原型对象（Prorotype）上增加ajax函数ajax.prototype={ doAjax:function(obj){//obj={type:"GET","url":url,"data":params,async:true,"ContentType":ContentType,"success":success,"error":error} //1.创立xhr对象 const xhr=new XMLHttpRequest(); //2.设置状态监听 xhr.onreadystatechange=function(){ if(xhr.readyState==4){//服务端响应完结，客户端接管胜利 if(xhr.status==200){//200示意失常响应完结 obj.success(xhr.responseText);//回调函数 }else{//示意呈现了异样 obj.error(xhr.status); } }} //3.建设连贯 let type=obj.type?obj.type:"GET"; xhr.open(obj.type,obj.type=="GET"?`${obj.url}?${obj.data}`:obj.url,obj.async?true:obj.async); //4.发送申请 if(type!="GET"){ xhr.setRequestHeader("Content-Type",obj.ContentType?obj.ContentType:"application/x-www-form-urlencoded"); } xhr.send(obj.type=="GET"?null:obj.data); }, doAjaxGet:function(url,params,callback){ this.doAjax({"type":"GET","url":url,"data":params,"success":callback,"error":callback});}, doAjaxPost:function(url,params,callback){ this.doAjax({"type":"POST","url":url,"data":params,"success":callback,"error":callback,"ContentType":"application/x-www-form-urlencoded"}); }} //3.基于ajax构造函数构建ajax对象，并将对象赋值给全局变量window.$$=new ajax();})()html文件中： <!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><h1>The Ajax 05 Page</h1><fieldset><legend>Ajax 表单申请</legend><form> <input type="text" id="nameId" name="name" onblur="doCheck()"> <input type="button" onclick="doSave()" value="Save"></form><span id="resultId"></span></fieldset><script type="text/javascript" src="/js/ajaxfk2.js"></script><script type="text/javascript"> //检测名字是否已存在 function doCheck(){ //1.定义申请的url var url="http://localhost/doCheck"; //2.定义申请参数 var name=document.forms[0].name.value; var params=`name=${name}`; //3.发送ajax get申请 $$.doAjaxGet(url,params,(result)=>{ document.getElementById("resultId").innerHTML= `<font color=red>${result}</font>`; }); } //保留表单中名字的值 function doSave(){//debugger,log,排除法 //1.申请url const url="http://localhost/doSave"; //2.申请参数 let name=document.forms[0].name.value; let params=`name=${name}`; //3.发送ajax post申请 $$.doAjaxPost(url,params,(result)=>{ alert(result); }) }</script></body></html>

关于ajax:Ajax编程框架基本实现

咱们在理论编程中常常会以面向对象的形式进行实现。新建static-->js-->ajaxfk.js,在该js文件中增加如下代码： (()=>{//1.定义一个构造函数var ajax=function(){}//函数表达式（能够将其了解为构造函数）//2.在构造函数外部的原型对象（Prorotype）上增加ajax函数ajax.prototype={doAjaxGet:function(url,params,callback){//1.创立xhr对象const xhr=new XMLHttpRequest();//2.设置状态监听xhr.onreadystatechange=function(){ if(xhr.readyState==4){//服务端响应完结，客户端接管胜利 if(xhr.status==200){//200示意失常响应完结 callback(xhr.responseText);//回调函数 }else{//示意呈现了异样 callback(xhr.status); } }}//3.建设连贯xhr.open("GET",`${url}?${params}`,true);//4.发送申请xhr.send(null);},doAjaxPost:function(url,params,callback){//1.创立xhr对象const xhr=new XMLHttpRequest();//2.设置状态监听xhr.onreadystatechange=function(){ if(xhr.readyState==4){//服务端响应完结，客户端接管胜利 if(xhr.status==200){//200示意失常响应完结 callback(xhr.responseText);//回调函数 }else{//示意呈现了异样 callback(xhr.status); } }}//3.建设连贯xhr.open("POST",url,true);xhr.setRequestHeader("Content-Type","application/x-www.urlencoded");//4.发送申请xhr.send(params); }}//3.基于ajax构造函数构建ajax对象，并将对象赋值给全局变量window.$$=new ajax();})()//箭头函数批改html代码： <!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><h1>The Ajax 04 Page</h1><fieldset><legend>Ajax 表单申请</legend><form> <input type="text" id="nameId" name="name" onblur="doCheck()"> <input type="button" onclick="doSave()" value="Save"></form><span id="resultId"></span></fieldset><script type="text/javascript" src="/js/ajaxfk.js"></script><script type="text/javascript"> //检测名字是否已存在 function doCheck(){ //1.定义申请的url var url="http://localhost/doCheck"; //2.定义申请参数 var name=document.forms[0].name.value; var params=`name=${name}`; //3.发送ajax get申请 $$.doAjaxGet(url,params,(result)=>{ document.getElementById("resultId").innerHTML= `<font color=red>${result}</font>`; }); } //保留表单中名字的值 function doSave(){//debugger,log,排除法 //1.申请url const url="http://localhost/doSave"; //2.申请参数 let name=document.forms[0].name.value; let params=`name=${name}`; //3.发送ajax post申请 $$.doAjaxPost(url,params,(result)=>{ alert(result); }) }</script></body></html>

关于ajax:Ajax技术进阶封装共性提取特性GetPost采用js文件引入共性

1.在static目录下新建一个js目录，在js目录中增加一个名为ajax.js的文件。将get办法和post办法的ajax共性提取到ajax.js文件，具体代码如下： //封装共性,提取个性//Get办法的共性如下：function doAjaxGet(url,params,callback){//1.基于dom事件创立XHR对象const xhr=new XMLHttpRequest();//2.设置XHR对象监听状态xhr.onreadystatechange=function(){//onreadystatechange存储函数，每当readyState属性扭转时，就会调用该函数 if(xhr.readyState==4&&xhr.status==200){ callback(xhr.responseText); }}//3.创立与服务端的连贯xhr.open("GET",`${url}?${params}`,true);//4.发送异步申请实现与服务端的通信xhr.send(null);//get申请send办法传值} //Post办法的共性如下：function doAjaxPost(url,params,callback){ const xhr=new XMLHttpRequest(); xhr.onreadystatechange=function(){ if(xhr.readyState==4&&xhr.status==200){ callback(xhr.responseText); } } xhr.open("POST",url,true); //应用post申请要设置申请头（规定） xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //4.发送异步申请实现与服务端的通信 xhr.send(params);//Post申请send办法传值}2.在html中引入改js文件,通过增加<script></script>标签引入js文件,具体代码如下： <script type="text/javascript" src="/js/ajax.js"></script>客户端代码： <!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><h1>The Ajax 03 Page</h1><fieldset>  <legend>Ajax 表单申请</legend> <form> <input type="text" name="name" id="nameId" onblur="doCheck()" onfocus="doClear()"> <input type="button" onclick="doSave()" value="save"> </form> <span id="result"></span></fieldset><script type="text/javascript" src="/js/ajax.js"></script><script type="text/javascript">//检测名字是否曾经存在 function doClear(){ //示意能向id为result的对象插入“”内容 document.getElementById("result").innerHTML="";} //Get办法的个性function doCheck(){ //1.定义申请的url const url="/doCheck"; //2.定义申请参数 let name=document.forms[0].name.value; let params=`name=${name}`; //3.发送ajax-get申请 doAjaxGet(url,params,function(result1){ document.getElementById("result").innerHTML=`${result1}`; });}//保留表单中名字的值function doSave(){ //1.定义申请的url const url="/doSave"; //2.定义申请参数 let name=document.forms[0].name.value; let params=`name=${name}`; //3.发送ajax-get申请 doAjaxPost(url,params,function(result1){ alert(result1);//响应后果不同的解决形式 });} </script></body></html>服务端代码： ...

关于ajax:Ajax技术进阶提取共性封装特性Get

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> </head> <body>  <h1>The Ajax 03 Page</h1>  <fieldset>  <legend>Ajax 表单申请</legend> <form> <input type="text" name="name" id="nameId" onblur="doCheck()" onfocus="doClear()"> <input type="button" onclick="doSave()" value="save"> </form> <span id="result"></span> </fieldset>   <script type="text/javascript"> function doClear(){ document.getElementById("result").innerHTML=""; } //检测名字是否曾经存在 //Get办法的个性 function doCheck(){ var url="/doCheck"; var name=document.forms[0].name.value; var params="name="+name; doAjaxGet(url.params,function(result){ document.getEmlementById("result").innerHTML=result; }) } //在业务办法中利用封装好的代码,保留业务的要害客户端代码剖析及实现 function doSave(){ var url="/doSave"; var params="name="+document.forms[0].name.value; //发送申请 doAjaxGet(url,params,function(result){ document.getElementById("result").innerHTML=result; }) } //封装共性,提取个性 //提取get办法的共性进行封装： function doAjaxGet(url,params,callback){ const xhr=new XMLHttpRequest(); xhr.onreadstatechange=function(){ if(xhr.onreadyState==4&&xhr.status==200){ callback(xhr.responseText); } } xhr.open("GET",url+"?"+params,true); xhr.send(null); } </script> </body> </html>服务端代码实现： ...

关于ajax:Ajax的入门

Ajax是什么？ Ajax是一种web利用技术，能够借助客户端脚本（JavaScript）与服务端利用进行异步通信，获取服务端数据当前，能够进行部分刷新，进而进步数据的响应和渲染速度。Ajax劣势和劣势？劣势：底层同步，而后部分刷新，进而进步用户体验。Ajax能够仅向服务器发送并取回必要的数据，并在客户端采纳JS解决来自服务器的响应，这样在服务器和浏览器之间的替换数据会大量缩小，服务器响应的数据就会更快了。劣势：不能间接进行跨域拜访。传统web利用中的同步申请利用时序模型剖析：客户端向服务器端发送申请须要期待服务器的响应后果，服务器返回数据当前，客户端能够持续发送申请。如上图：客户端发送申请1给服务端，服务端接管到当前返回响应后果2给客户端，客户端在发送申请当前到服务端响应的过程就是一个等待时间。基于Ajax技术的web异步申请响应利用时序模型剖析客户端能够向服务器发送异步申请，客户端无需期待服务端的响应后果，能够一直的发送申请。如上图：客户端能够发送1和2两个申请到服务端，无需期待服务端一个一个的响应后再发送，即为异步。Ajax申请响应过程剖析所有的Ajax申请都会基于DOM事件，通过XHR(XMLHttpRequest)对象实现与服务端异步通信部分更新。基于上图的剖析，编程步骤如下：第一步：基于dom事件创立XHR对象；第二步：注册XHR对象状态监听，通过回调函数（rollback）解决状态信息;第三步：创立与服务端的连贯；第四步：发送异步申请实现与服务端的通信。

关于ajax:Ajax-小结02

Ajax 申请响应过程剖析*所有的Ajax 申请都会基于DOM(HTML元素)事件，通过XHR（XMLHttpRequest）对象实现与服务端异步通信部分更新*Ajax利用的编程步骤:第一步：基于dom事件创立XHR对象(XMLHttpRequest对象) var xhr=new XMLHttpRequest();第二步：注册XHR对象状态监听，通过回调函数(callback)解决状态信息。 xhr.onreadystatechange=function(){ if(xhr.readyState==4&&xhr.status==200){ document.getElementById("resultId"). innerHTML= xhr.responseText; } }*readyState==4示意服务端的响应后果在客户端曾经接管完了*status==200示意服务解决申请的过程中没有呈现任何异样(响应的都是失常数据) 第三步：创立与服务端的连贯 xhr.open("GET",`doCheck?name=${name}`,true)*doCheck?name=${name}--是所要连贯服务端的网址第四步：发送异步申请实现与服务端的通信 xhr.send(null);*构建参数对象形式1： var params="name="+name;//淘汰形式2： const params=`name=${name}`;//一种新的写法,这种写法称之为模板字符串,所有字符串拼接都能够以这种形式进行实现形式3： var params={"name":name};//JavaScript中的对象(原生ajax形式不能够间接传递这样的对象) *JavaScript中的对象个性封装个性： JS中的对象用于封装属性和办法继承个性： JS中为了实现属性或办法的可重用性,提供须要借助Prototype对象去实现的形式（继承机制）多态个性基于构造函数创建对象构造雷同(属性名、办法名雷同,属性值不同)的多个对象在定义时，能够将构造封装到构造方法构造函数尽量不要定义函数--因为构建对象时，构造函数外部的函数还要开拓新的空间

关于ajax:Ajax初探

所有的Ajax 申请都会基于DOM(HTML元素)事件，通过XHR（XMLHttpRequest）对象实现与服务端异步通信部分更新特点：异步申请，Ajax技术最大的劣势就是基于多线程实现的底层异步，实现部分刷新，其能够在不烦扰主线程过程的前提下处理事务，并在页面部分刷新进去，在页面上的成果相似于实时更新，在线程足够短缺的现实状态下客户端能够一值一直的向服务端发送申请而不用期待服务端的响应持续运行

关于ajax:浅谈AJAX入门技术

1 Ajax是什么？Ajax (Asynchronous JavaScript and XML) 是一种Web利用技术,能够借助客户端脚本(javascript)与服务端利用进行异步通信，获取服务端数据当前,能够进行部分刷新。进而进步数据的响应和渲染速度。（异步申请，部分刷新） 2 Ajax技术的利用场景Ajax技术最大的劣势就是底层异步,而后部分刷新,进而进步用户体验,这种技术当初在很多我的项目中都有很好的利用：例如：商品零碎，评估零碎，地图零碎.... 3 Ajax技术时序模型剖析客户端能够向服务器端发送异步申请，客户端无需期待服务端的响应后果，能够一直向服务器端发送申请。 4 Ajax申请响应过程剖析4.1 服务端代码设计 @Controller@RequestMapping("/")public class AjaxController { @RequestMapping("doAjaxGet") @ResponseBody //通知spring mvc 此办法的返回值不是viewname,能够将其看成是一般串 public String doAjaxGet() throws Exception { return "Ajax Get Request Result "; }}4.2 客户端代码设计第一步：基于dom事件创立XHR对象(XMLHttpRequest对象) var xhr = new XMLHttpRequest();第二步：注册XHR对象状态监听，通过回调函数解决状态信息 xhr.onreadystatechange=function(){ if(xhr.readyState==4&&xhr.status==200){ console.log(xhr.responseText); document.getElementById("resultId").innerHTML=xhr.responseText; }};第三步：创立与服务端的连贯 xhr.open("GET","http://localhost/doAjaxGet",true);第四步：发送申请 xhr.send();

关于ajax:ajax

var xhr=new XMLHttpRequest();1.创立ajax入口对象 xhr.onreadystatechange=function(result){ if(xhr.readyState==4&&xhr.status==200){ console.log(xhr.responseText); }}2.注册事件监听(监听客户端与服务端通信过程) 1open之前2open之后send之前3正在解析响应内容~~~~4表数据响应到客户端xhr.open("get","https://www.baidu.com/","true");3.建设与指定url对应的服务端的连贯这里的true示意异步 xhr.send(null);4.发送申请

关于ajax:Ajax入门

一、什么是ajaxAjax (Asynchronous JavaScript and XML) 是一种 Web 利用技术,能够借助客户端脚本(javascript)与服务端利用进行异步通信，获取服务端数据当前,能够进行部分刷新。进而进步数据的响应和渲染速度。二、Ajax利用场景1.2Ajax的利用场景：1.2.1 查看用户名是否已被注册：很多站点的注册页面都具被自动检测用户名是否存在的敌对提醒，该性能整体页面并没有刷新，但依然能够异步与服务器进行数据交换，查问用户输出的用户名是否存在数据库。 1.2.2 省市级联下拉框联动：很多站点都存在输出用户地址的操作，在实现地址输出时，用户所在的省份是下拉框，当抉择不同的省份时会呈现不同市区的抉择，这就是最常见的省市联动成果。 1.2.3 内容主动补全：不论时专一于搜寻的百度，还是站点内商品搜寻的淘宝，都有搜寻的性能，在i搜寻框输出查问关键字时，整个页面没有刷新，但会依据关键字显示相干查问字条，这个过程是异步的。百度的搜寻补全性能：淘宝的搜寻补全性能： 1.3 同步形式与异步形式的区别：同步形式发送申请：发送一个申请，须要期待响应返回，而后才可能发送下一个申请，如果该申请没有响应，不能发送下一个申请，客户端会始终处于期待过程中。异步形式发送申请：发送一个申请，不须要期待响应返回，随时能够再发送下一个申请，即不须要期待。async:true; //异步async:false; //同步1.4 Ajax的原理剖析：Ajax 相当于浏览器发送申请与接管响应的代理人，以实现在不影响用户浏览页面的状况下，部分更新页面数据，从而进步用户体验。三、Ajax的外围机制：XMLHttpRequest是ajax的外围机制次要属性和办法：1.readyState属性状态：0 未初始化1 筹备发送2 已发送但还未收到响应3 正在承受4 承受实现2.responseText属性服务器响应的文本内容联合readyState属性来看: readyState = 4 时，responseText才蕴含残缺的响应信息 readyState = 3 时，responseText蕴含不残缺的响应信息 readyState < 3 时，responseText为空字符串3.responseXML属性服务器响应的XML内容对应的DOM对象4.status属性（服务器返回的http的状态码）及statusText属性（状态码的文本信息） status = 200 胜利 status = 404 未找到 status = 500 服务器外部谬误5.onreadystatechange事件 ...

关于ajax:Ajax基础

Ajax 概述它是浏览器提供的一套办法，能够实现页面无刷新更新数据，进步用户浏览网站利用的体验。 Ajax 的利用场景页面上拉加载更多数据列表数据无刷新分页表单项来到焦点数据验证搜寻框提醒文字下拉列表Ajax 运行原理及实现Ajax 运行原理 Ajax 相当于浏览器发送申请与接管响应的代理人，以实现在不影响用户浏览页面的状况下，部分更新页面数据，从而进步用户体验。 Ajax 的实现步骤创立 Ajax 对象 var xhr = new XMLHttpRequest();通知 Ajax 申请地址以及申请形式xhr.open('get', 'http://www.example.com');发送申请 xhr.send();获取服务器端给与客户端的响应数据xhr.onload = function () { console.log(xhr.responseText); }服务器端响应的数据格式在实在的我的项目中，服务器端大多数状况下会以 JSON 对象作为响应数据的格局。当客户端拿到响应数据时，要将 JSON 数据和 HTML 字符串进行拼接，而后将拼接的后果展现在页面中。在 http 申请与响应的过程中，无论是申请参数还是响应内容，如果是对象类型，最终都会被转换为对象字符串进行传输。 JSON.parse() // 将 json 字符串转换为json对象申请参数传递传统网站表单提交 <form method="get" action="http://www.example.com"> <input type="text" name="username"/> <input type="password" name="password"> </form> <!– http://www.example.com?username=zhangsan&password=123456 -->GET 申请形式 xhr.open('get', 'http://www.example.com?name=zhangsan&age=20');POST 申请形式 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') xhr.send('name=zhangsan&age=20');申请报文在 HTTP 申请和响应的过程中传递的数据块就叫报文，包含要传送的数据和一些附加信息，这些数据和信息要恪守规定好的格局。申请参数的格局 ...

关于ajax:ajax提交参数

进行Ajax申请时,须要传递URL地址/参数/回调函数这三个次要内容,以及其余的一些内容. 其中ajax提交参数有以下两种办法: $.post("url",{k:v,k:v...},回调函数)$.post("url",k=v&k=v...,回调函数)然而如果表单中提供了大量的要传递的参数时,用这种一个一个拼接去写的形式就很不不便, jQuery中提供了 serialize() 函数,能够将整个表单封装为k=v&k=v...的格局.

关于ajax:初识Ajax

Ajax (Asynchronous JavaScript and XML) 是一种Web利用技术,能够借助客户端脚本(javascript)与服务端利用进行异步通信，获取服务端数据当前,能够进行部分刷新。进而进步数据的响应和渲染速度。 Ajax技术最大的劣势就是底层异步,而后部分刷新,进而进步用户体验。 Ajax编程的根本步骤分4步 <script type="text/javascript"> function doAjaxGet() { //1.创立XHR对象 var xhr = new XMLHttpRequest(); //2.设置状态监听 xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { console.log(xhr.responseText); } } //3.建设连贯 xhr.open("GET", "/doAjaxGet", true); //true示意异步(底层会启动线程与服务端通信) //4.发送申请 xhr.send(); }</script>以下为图解

关于ajax:ajax

ajax 的根本步骤1.注册 var xhr = new XMLHttpRequest();2.设置监听 xhr.onreadystatechange=function(){ if(xhr.readyState==4&&xhr.status==200){ console.log(xhr.responseText); }}3.连贯 xhr.open("GET","https:www.baidu.com",true);//true示意异步4.发送 xhr.send();post 申请须要申请头//post申请要设置申请头xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");xhr.send("name="+name);post申请和get申请不同之处在一个是在url传值一个是在send()中传值，post申请须要设置申请头为了减少代码的可重用性所以须要把xhr共性进行封装应用传值的模式来应用ajaxfunction submit(url,parmeter,callback){ var xxhyp = new XMLHttpRequest(); xxhyp.onreadystatechange=function(){ if(xxhyp.readyState==4&&xxhyp.status==200){ callback(xxhyp.responseText); } }xxhyp.open("POST",url,true);//post申请要设置申请头xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");xxhyp.send(parmeter);}//须要应用时代码示例function chaer(){var url = "dopost";var parmeter = "msg";submit(url,parmeter,function(result){ document.ElementById("loadid").innerHTNL=result; }); }//callback和function(result)造成了函数的回调~~~~//get申请相似Jquery-ajax先得引入jquery的包哦1.应用jquery-ajax的get申请 function doget(){var url = "dopost";var parmeter = "msg"; $.get(url,parmeter,function(result){ $("#loadid").html(result); }); }//get(url,params[,dataType])为jquery种的一个ajax函数,dataType--冀望然会的类型2.应用jquery-ajax的post申请 function dopost(){var url = "dopost";var parmeter = "msg"; $.get(url,parmeter,function(result){ $("#loadid").html(result);~~~~ }); }3.应用jquer原生的ajax function doajax(){ var url = "doget"; var parmeter = "msg"; $.ajax({ url:url, //url type:"GET", //指定提交办法 async:true, //指定异步还是同步 data:parmeter, //指定参数 success:function(result){ $("#loadid").html(result);~~~~ } });}4.应用load形式 ...

关于ajax:ajax

关于ajax:AJAX总结一

AJAX总结电脑系统 windows10 专业版在开发的过程中,咱们依据需要可能会应用到 ajax,上面是我对ajax的一些总结,心愿对大家有所帮忙!作用：部分异步刷新网页异步申请：申请数据的时候不会影响页面的其余操作申请分两种异步同步前后端交互的形式1、form（表单提交）： 2、标签拜访（src href） 3、AJAX AJAX的同步申请步骤 1、创立申请对象 var xhr; if(window.XMLHttpRequst){ xhr=new XMLHttpRequst(); }else{ //IE 5 6 7兼容 xhr=new ActiveXObject('Microsoft.XMLHTTP'); } 2、启动申请 open(参数一，参数二，参数三)：用于设置申请形式和地址参数一：申请形式参数二：申请的url 参数三：是否异地发送，默认为true(异地)，false为同步留神：open()的办法只是设置相干的申请信息，并不会真正发动申请 //同步申请 xhr.open('get',"http://localhost/self/AJAX-1/server.php?un=" + $("#user")\[0\].value + "&ps=" + $("#pass")[0].value",false); //异步申请 xhr.open('post',"",true) 3、发送申请 send() 发送申请参数要传输给后盾的数据，如果是get申请参数为null(不倡议省略该参数，低版本火狐浏览器会报错) xhr.send(null); 4、申请胜利之后 status：http申请状态码 1XX：信息类状态，收到申请，正在解决 2XX：胜利类状态，胜利解决实现 3XX：重定向类状态，求情地址发生变化(304代表读缓存文件) 4XX：客户端谬误， 5XX：服务器端谬误，服务器辨认不出信息，不能对申请作出解决 //同步申请 if(xhr.status >= 200 && xhr.status < 300 || 304 == xhr.status){ responseText//作为响应主体反映(后盾返给咱们的数据) responseXML//如果响应的数据类型为text/xml或者application/xml，此属性中保留 //后盾传输进来的数据 } 异步申请 ...

关于ajax:Contenttype的几种常见类型

1、application/x-www-form-urlencoded 1）浏览器的原生 form 表单 2）提交的数据依照 key1=val1&key2=val2 的形式进行编码，key 和 val 都进行了 URL 转码 3）数据被编码为名称/值对。这是规范的编码格 2、multipart/form-data 须要在表单中进行文件上传时，就须要应用该格局。常见的媒体格式是上传文件之时应用的 3、application/json 音讯主体是序列化后的 JSON 字符串 4、text/xml 是一种应用 HTTP 作为传输协定，XML 作为编码方式的近程调用标准 5、text/plain 数据以纯文本模式(text/json/xml/html)进行编码，其中不含任何控件或格局字符 #application/json 和 application/x-www-form-urlencoded 的区别application/json: 作用：通知服务器申请的主题内容是 json 格局的字符串，服务器端会对 json 字符串进行解析，益处：前端人员不须要关怀数据结构的复杂度，只有是规范的 json 格局就能提交胜利。 application/x-www-form-urlencoded: 是 Jquery 的 Ajax 申请默认形式作用：在申请发送过程中会对数据进行序列化解决，以键值对模式？key1=value1&key2=value2 的形式发送到服务器益处：所有浏览器都反对

关于ajax:ajax防抖节流

什么是防抖防抖策略 (debounce)当事件被触发时，提早N秒才执行,如果在这N秒内再次被触发将从新计时益处：可能保障用户在频繁触发某些事件的时候，不会频繁的执行回调，只会被执行一次防抖的利用场景用户在输入框中间断输出一串字符时，能够通过防抖策略，只在输出完后，才执行查问的申请，这样能够无效缩小申请次数，节约申请资源；什么是节流节流策略（throttle），顾名思义，能够缩小一段时间内事件的触发频率。节流的利用场景① 鼠标连续不断地触发某事件（如点击），只在单位工夫内只触发一次；② 懒加载时要监听计算滚动条的地位，但不用每次滑动都触发，能够升高计算的频率，而不用去节约 CPU 资源；节流阀的概念高铁卫生间是否被占用，由红绿灯管制，红灯示意被占用，绿灯示意可应用。假如每个人上卫生间都须要破费5分钟，则五分钟之内，被占用的卫生间无奈被其他人应用。上一个人应用结束后，须要将红灯重置为绿灯，示意下一个人能够应用卫生间。下一个人在上卫生间之前，须要先判断管制灯是否为绿色，来通晓是否上卫生间。节流阀为空，示意能够执行下次操作；不为空，示意不能执行下次操作。以后操作执行完，必须将节流阀重置为空，示意能够执行下次操作了。每次执行操作前，必须先判断节流阀是否为空。总结防抖和节流的区别防抖：如果事件被频繁触发，防抖能保障只有最有一次触发失效！后面 N 屡次的触发都会被疏忽！节流：如果事件被频繁触发，节流可能缩小事件触发的频率，因而，节流是有选择性地执行一部分事件！

关于ajax:ajax防抖节流

关于ajax:ajax请求本地json文件总是走error的原因

$.ajax({ url: "data.json",//json文件地位，文件名 type: "GET",//申请形式为get dataType: "json", //返回数据格式为json success: function(data) {//申请胜利实现后要执行的办法 console.log(data,'胜利') }, error: function(data){ console.log(data,'谬误') }})首先ajax这样的申请设置没有问题的状况下，要查看：①json文件外面不能有任何的正文②json文件有中文，而且不是utf8格局，能够用文本关上当前在设置一下utf8格局即可然而json文件的中文乱码临时还未解决，如果有人领导，请帮忙留言领导

Ajax提交表单的方式

和提交一般表单一样发送数据浏览器端代码$("#ajaxform").click(function () { //在咱们像提交表单一样发送数据时，不必把JSON对象转换为JSON字符串 var requestBody = { "empId":999, "empName":"harry", "empSalary":128.56 }; $.ajax({ "url":"ajax/send/form/data.action", // 申请的指标地址 "type":"post", // 申请形式 "data":requestBody, // 申请体数据 "contentType":"application/x-www-form-urlencoded", //默认值，能够省略该项 "dataType":"json", // 服务器端返回数据的解析形式 "success":function(response) { // 服务器解决申请胜利，执行这个函数，响应体从参数这里传入 // response曾经解析为JSON对象，能够间接应用“.属性名”形式拜访具体属性 var result = response.result; // 如果返回后果胜利，显示胜利（逻辑胜利） if("SUCCESS" == result) { alert("SUCCESS"); } // 如果返回后果失败，显示音讯（逻辑失败） if("FAILED" == result) { var message = response.message; alert(message); } }, "error":function(response){ // 解决申请失败，例如：404、500、400等等 alert(response); } }); }); 应用开发者工具查看申请体 ...

Ajax配合后端实现Excel的导出

一、需求在我们的日常开发中，可能经常需要遇到excel的导出，以往excel的导出服务器端都是使用的 GET 方法，但是某些情况下，服务器端只能使用 POST 方法，那么我们有没有好的方法实现excel的导出呢，并且页面最好不要刷新。二、实现思路1、方案一：我们可以使用ajax拿到服务器端返回的数据下载流,然后借助 Blob 对象，在动态的创建一个 a 链接，那么也可以实现。2、方案二：动态创建一个 iframe 标签下载，这种方案可以POST请求可能就无法下载了。 3、方案三：页面上动态的创建一个form然后提交这个form。此处我们使用方案一即使用 ajax 来实现。三、实现步骤1、ajax请求的发送我们使用axios库来完成，axios的responseType需要设置成Blob,默认是json。 2、创建 Blob对象 3、创建a标签 4、触发下载动作四、前端代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>ajax 文件导出</title> <script src="https://unpkg.com/axios/dist/axios.min.js"></script></head><body><button type="button" onclick="exportExcel()">导出</button><script type="text/javascript"> function exportExcel() { axios({ method: 'POST', url: "http://localhost:8080/export", timeout: 5000, responseType: 'blob' }).then(function (res) { var data = res.data; var blob = new Blob([data], {type: 'application/octet-stream'}); var url = URL.createObjectURL(blob); var exportLink = document.createElement('a'); exportLink.setAttribute("download","ajax文件下载.xlsx"); exportLink.href = url; document.body.appendChild(exportLink); exportLink.click(); }) }</script></body></html>实现效果 ...

layui的坑之form表单提交

先说一下作者遇到的问题，本地开发测试都可以完美运行，一到线上就开始ajax请求浏览器给cancel，虽然这个请求cancel了，但是controller里的代码执行了控制器代码： public function edit_index_article(){ $old_id = $_POST['old_id']; //加上新的 $id = intval($_POST['new_id']); $sort = intval($_POST['sort']); //验证问题ID $q = DB::table('article') ->select('id') ->where(['id'=>$id]) ->first(); if(!$q){ die(json_encode(['code'=>400,'msg'=>''])); } $this->redis->zRem($this->home_community_key,$old_id); //添加问题 $a = $this->redis->zAdd($this->home_community_key,$sort,$id.'-a'); die(json_encode(['code'=>200,'msg'=>''])); }表单代码： <form class="layui-form"> <div class="layui-form-item"> <div class="layui-input-block"> <input type="radio" name="status" value="2" title="问题" lay-filter="count-type" <?php if($status == 2){ ?> checked="checked" <?php } ?> > <input type="radio" name="status" value="1" title="文章" lay-filter="count-type"<?php if($status == 1){ ?> checked="checked" <?php } ?> > </div> </div> <div class="layui-inline"> <label class="layui-form-label">ID</label> <div class="layui-input-inline"> <input type="" name="add_article_id" value="{{intval($id)}}" id="add_article_id" lay-verify="" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-inline"> <label class="layui-form-label">排序</label> <div class="layui-input-inline"> <input type="" name="sort" id="sort" lay-verify="" autocomplete="off" class="layui-input"> </div> </div> <center> <button class="layui-btn layui-btn-primary" onclick="add_comm('{{$id}}')" >确定</button></center> </form> <script> layui.use(['form'], function(){ var $ = layui.jquery var form = layui.form; $.ajaxSetup({ headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } }); }); function add_comm(id) { var status = $("input[name='status']:checked").val() var add_article_id = $('#add_article_id').val(); var sort = $('#sort').val(); var reg=/^[1-9]\d*$/; if(reg.test(sort)!==true){ alert("请输入非零的正整数"); return false; } if(status ==1){ $.ajax({ type: "post", url: "/Course/edit_index_article", data: { 'old_id':id, 'new_id':add_article_id, 'sort':sort }, dataType: 'json', success: function (result) { if(result['code'] == 400){ alert('没有该帖子'); return false; } if(result['code'] == 200){ layer.msg('添加成功,马上刷新页面'); parent.layer.closeAll() window.parent.location.href = '/community/index?page_type=5'; } } } ); return false; } if(status == 2){ $.ajax({ type: "post", url: "/Course/edit_index_question", async: false, data: { 'old_question_id':id, 'new_question_id':add_article_id, 'sort':sort }, dataType: 'json', success: function (result) { if(result['code'] == 400){ alert('没有该帖子'); return false; } if(result['code'] == 200){ layer.msg('修改成功,马上刷新页面'); parent.layer.closeAll() window.parent.location.href = '/community/index?page_type=5'; } } } ); return false; } } </script>开始debug，由于数据更新成功，怀疑代码执行到ajaxreturn返回状态码挂了，修改返回格式，失败。然后怀疑是浏览器插件自动取消请求，缓存问题，都不是。产生问题的原因：在本地运行上边的代码的时候，控制台会有报错，并且会有两个请求如下图：这里有两个请求一个成功了，一个取消了，并且是我们需要的那个请求成功了，经过排查，第二个请求是layui框架使用form表单后，框架本身会自动给提交表单的数据。我们并不需要这个请求，一到线上，这个请求失败导致ajax的请求也失败。解决办法：<form class="layui-form" onsubmit="return false">给form表单添加阻止表单提交的属性。 ...

ajax与Promise的那些事儿

/** * 简单的异步操作 */ function callback() { console.log(`我是一个回调函数`); } console.log(`异步之前`); setTimeout(callback, 1000); console.log(`异步之后`); /** * ajax就是典型的异步操作 */ // 发起ajax的过程 const XHR = new XMLHttpRequest(); console.log(XHR); XHR.onreadystatechange = function() { if (XHR.readyState === 4) { if (XHR.status === 200) { console.log(XHR.responseText); } else { console.log(XHR.status); } } }; XHR.open('GET', `https://jsonplaceholder.typicode.com/users`, true); XHR.send(); /** * jQuery请求 */ $.ajax({ type: 'get', url: `https://jsonplaceholder.typicode.com/users`, dataType: 'json', success: function(res) { console.log(res); }, error: function(err) { console.log(err); } }); /** * 用Promise简单的封装一个AJAX函数 */ function myAjax(method, url, params) { return new Promise((resolve, reject) => { const XHR = new XMLHttpRequest(); XHR.onreadystatechange = function() { if (XHR.readyState === 4) { if (XHR.status === 200) { console.log(XHR.responseText); } else { console.log(XHR.status); } } }; // get if (method === 'get' || method === 'GET') { if (typeof params === 'object') { // params拆解成字符串 params = Object.keys(params) .map(function(key) { return ( encodeURIComponent(key) + '=' + encodeURIComponent(params[key]) ); }) .join('&'); } url = params ? url + '?' + params : url; XHR.open(method, url, true); XHR.send(); } //post if (method === 'post' || method === 'POST') { XHR.open(method, url, true); XHR.setRequestHeader( 'Content-type', 'application/json; charset=utf-8' ); XHR.send(JSON.stringify(params)); } }); } /** * 使用定时器来模拟异步操作 * */ let p = new Promise(function(resolve, reject) { console.log(resolve); // 成功之后的回调 console.log(reject); // 失败时候的回调 setTimeout(() => { resolve(100); }, 1000); }); p.then(function(data) { console.log(data); });

Ajax基础入门

一、ajax是什么？ 1、ajax 的全称是Asynchronous JavaScript and XML，其中，Asynchronous 是异步的意思。 2、是7种技术的综合，它包含了：JavaScript、xml、xstl、xhtml、dom、 xmlhttprequest、css 3、ajax是一个与服务器端语言无关技术4、ajax返回的数据格式（文本格式、xml、json）5、作用： 1、页面五刷新的动态数据交互 2、局部刷新页面 3、界面的美观 4、对数据库的操作 5、可以返回简单的文本格式，也可以返回xml文件格式、json数据格式 6、原理数据库 ↑ ↓ ↑ ↓ 服务器 ↑ ↓http请求 ↑ ↓ http响应（文本/json/xml） ↑ ↓ 创建ajax引擎对象（浏览器）相当于是一个代理 (XmlHttpRequest) ↑ ↓ ↑ ↓ 页面二、传统三种方式浏览器向服务器发送请求 1、url 回车刷新2、特定元素href或者src3、表单三、发送Ajax // 涉及到AJax 操作的页面“不能” 使用文件协议访问// AJAX 是一套API 核心的提供的类型：xmlHttpRequest// 1.安装浏览器（用户代理）// xhr 就类似于安装浏览器作用（发送请求接受响应）var xhr = new XMLHttpRequest()// 2.打开浏览器输入网址xhr.open('GET', 'Http://day-11/time.php') // 3. 敲回车开始请求xhr.send()// 4. 等待响应// 5. 看结果

前端文件下载-ajax下载完毕回调

前端文件下载 ajax下载完毕回调公司项目，文件导出，导出的时间段内，希望可以弹出加载中，一直到后台返回文件。代码及兼容性都比较粗糙，主要是提供个思路。常规做法1 a链接的方式把下载地址给到a标签的href上2 window.location.href目标做法思路通过下载文件流，前端生成文件。实现参考 /** * ajax方式下载文件 * @param {*} url 必填 * @param {*} fileName 必填如 "学生学籍卡.rar" * @param {*} showLoading 非必填 * @param {*} callBack 非必填 */function getFile({ url, fileName, showLoading, callBack }) { if (!url) return if (!window.XMLHttpRequest || !window.Blob) { // 不兼容处理（ie7以下） window.location.href = url return } const loadingEle = document.getElementById("mainLoading"); if (showLoading && loadingEle) { // 展示加载中... } const xhr = new XMLHttpRequest(); xhr.open("GET", url, true); xhr.responseType = "blob"; xhr.onload = function () { if (showLoading && loadingEle) { // 隐藏加载中.. } if (callBack) callBack() var a = document.createElement("a"); a.download = fileName ; // 文件名含文件格式 a.href = window.URL.createObjectURL(new Blob([xhr.response]));; document.body.appendChild(a); a.click(); a.remove() }; xhr.send(); }优缺点优点：下载可控，可以随时停止下载，修改文件名，显示下载进度，提示等待以及回调等等缺点：性能影响（待定，大文件应该能体现）;格式，后端返回的格式假如不固定该如何处理还没想好；自己封装的问题很多会考虑不周，比如登录超时提示等等；兼容性问题 XMLHttpRequest 以及 Blob这些方法的支持问题。如果你有一套完善的轮子请贴上地址或代码借鉴借鉴！ ...

全栈之路JAVA基础课程七AJAX原理剖析20190617v10

欢迎进入JAVA基础课程博客地址：https://blog.csdn.net/houjiyu...本系列文章将主要针对JAVA一些基础知识点进行讲解，为平时归纳所总结，不管是刚接触JAVA开发菜鸟还是业界资深人士，都希望对广大同行带来一些帮助。若有问题请及时留言或加QQ：243042162。寄语："不深思而得者，其得易失"，这句话告诫我们在学习原理的同时，要在深入思考上下功夫，要在融会贯通上下功夫，要做到既知其言又知其义、既知其然有知其所以然，要在知行合一上下功夫，要做到学以致用、用有所成。概述本文借鉴网络上各技术博客，抽取出一些非常实用的解析图，便于读者融会贯通。借鉴图片仅用于学习分享，请尊重原创作者，勿用于商用。什么是AJAXAsynchronous JavaScript and XML（异步的 JavaScript 和 XML）Ajax是一种用于创建快速动态网页的技术与服务器进行少量数据交换，实现网页异步和局部刷新原理剖析Ajax 的原理简单来说通过 XmlHttpRequest 对象来向服务器发异步请求，从服务器获得数据，然后用 javascript 来操作 DOM 而更新页面。这其中最关键的一步就是从服务器获得请求数据。基本步骤： (1) 创建XMLHttpRequest对象,也就是创建一个异步调用对象。 (2) 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息。 (3) 设置响应HTTP请求状态变化的函数。 (4) 发送HTTP请求。 (5) 获取异步调用返回的数据。 (6) 使用JavaScript和DOM实现局部刷新。原理图 Ajax核心:XMLHttpRequest对象属性readyState：请求状态，开始请求时值为0直到请求完成这个值增长到4responseText：目前为止接收到的响应体,readyState<3此属性为空字符串，=3为当前响应体，=4则为完整响应体responseXML：服务器端相应，解析为xml并作为Document对象返回status：服务器端返回的状态码，=200成功，=404表示“Not Found”statusText：用名称表示的服务器端返回状态，对于“OK”为200，“Not Found”为400 方法 setRequestHeader()：向一个打开但是未发生的请求设置头信息open()：初始化请求参数但是不发送send()：发送Http请求abort()：取消当前相应getAllResponseHeaders()：把http相应头作为未解析的字符串返回getResponseHeader()：返回http相应头的值事件句柄onreadystatechange：每次readyState改变时调用该事件句柄，但是当readyState=3有可能调用多次状态图状态码 1. readyState0：初始化，XMLHttpRequest对象还没有完成初始化1：载入，XMLHttpRequest对象开始发送请求2：载入完成，XMLHttpRequest对象的请求发送完成3：解析，XMLHttpRequest对象开始读取服务器的响应4：完成，XMLHttpRequest对象读取服务器响应结束2. status1xx：信息响应类，表示接收到请求并且继续处理2xx：处理成功响应类，表示动作被成功接收、理解和接受3xx：重定向响应类，为了完成指定的动作，必须接受进一步处理4xx：客户端错误，客户请求包含语法错误或者是不能正确执行5xx：服务端错误，服务器不能正确执行一个正确的请求100——客户必须继续发出请求101——客户要求服务器根据请求转换HTTP协议版本200——交易成功201——提示知道新文件的URL202——接受和处理、但处理未完成203——返回信息不确定或不完整204——请求收到，但返回信息为空205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件206——服务器已经完成了部分用户的GET请求300——请求的资源可在多处得到301——删除请求数据302——在其他地址发现了请求数据303——建议客户访问其他URL或访问方式304——客户端已经执行了GET，但文件未变化305——请求的资源必须从服务器指定的地址得到306——前一版本HTTP中使用的代码，现行版本中不再使用307——申明请求的资源临时性删除400——错误请求，如语法错误401——请求授权失败402——保留有效ChargeTo头响应403——请求不允许404——没有发现文件、查询或URl405——用户在Request-Line字段定义的方法不允许406——根据用户发送的Accept拖，请求资源不可访问407——类似401，用户必须首先在代理服务器上得到授权408——客户端没有在用户指定的饿时间内完成请求409——对当前资源状态，请求不能完成410——服务器上不再有此资源且无进一步的参考地址411——服务器拒绝用户定义的Content-Length属性请求412——一个或多个请求头字段在当前请求中错误413——请求的资源大于服务器允许的大小414——请求的资源URL长于服务器允许的长度415——请求资源不支持请求项目格式416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求500——服务器产生内部错误501——服务器不支持请求的函数502——服务器暂时不可用，有时是为了防止发生系统过载503——服务器过载或暂停维修504——关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长505——服务器不支持或拒绝支请求头中指定的HTTP版本代码实现前台代码 var xmlHttp = new XMLHttpRequest();xmlHttp.open("post","/loginTest",true);xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;");xmlHttp.send("username=rain&password=123456");xmlHttp.onreadystatechange = function (){ var state = xmlHttp.readyState; var status = xmlHttp.status; if(state == 4 && status == 200){ var data=xmlHttp.responseText; console.log("1."+data); }}xmlHttp.onload=function () { console.log("2."+xmlHttp.responseText);}后台代码 ...

XMLHttpRequest

前端培训初级阶段场景实战20190606ContentType对照表及日常使用

前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，打牢基础知识的中心思想，我们开课啦（每周四）。 axios 日常使用上，感觉不如 $.ajax 但是我之前使用的时候不是改入参就是改方法反正是都解决了。我也知道问题出在 content-type 上。就是记不住，这不前几天后台项目起了个新的服务。之前用的构建开发工具用的是 proxy 代理，不知道有老哥用过没，好几年前初次开发的时候就不更新了，还有 bug。索性换 axios 代理一下吧，然后报错了。好吧，我的锅，我认真总结，保证我不忘了。今天讲什么？content-type 是什么MIME 对照表axios 为什么感觉不如 $.ajax带你领略 axios 正确打开方式content-type 是什么Content-Type 实体头部用于指示资源的 MIME类型 media type 。在响应中，用来描述服务端实际发送给客户端的数据的类型。在请求中，比如 POST请求，是指客户端给服务器实际发送的数据的类型。双方根据这个值，来选择适合的方式解析数据。 MIME 类型组成方式type/subtype，如application/json、text/html、text/plain对大小写不敏感，但是习惯写小写。 content-type 组成方式Content-Type:media-type; charset，如Content-Type: text/html; charset=utf-8 表单中的应用<form action="/" method="post" enctype="multipart/form-data"> 想上传文件的时候<form action="/" method="post" enctype="application/x-www-form-urlencoded"> 默认为什么想上传文件不能用第二个呢？带着你的问题往后看吧 MIME 对照表Media Types -全量的对照表 MIME 分类type关键词描述示例text文本。复制粘贴的里面常见。text/html html页面, text/css css文件,text/plain 通用文字（默认格式）image图片。input.files[0].type 返回的时候用于判断类型。input accept="image/*" 允许选择所有图片文件image/png png图片, image/jpeg jpg图片audio音频。同上audio/wav,audio/mpeg mp3文件video视频。同上video/mp4 MP4文件application二进制数据application/octet-stream 通用类型（默认格式），application/pdfmultipart复合类型multipart/form-data常见 MIMEkey描述application/octet-stream默认值，或者可以理解为未知的应用程序文件。浏览器会像对待设置了 HTTP 头 Content-Disposition 值为 attachment 的文件一样来对待这类文件。（微信下载文件）text/html可以理解为 html、xml 文件。text/plain默认值，也可以理解为未知格式的文本文件。文本文件嘛，没格式就只看字也不是啥大问题image/png常见图片类型，一般上传图片的时候判断image/jpeg常见图片类型，一般上传图片的时候判断image/gif常见图片类型，一般上传图片的时候判断multipart/byteranges用于把部分的响应报文发送回浏览器。常见于请求视频资源返回206状态码application/jsonJSON 格式multipart/form-data用于带文件上传的表单提交。作为多部分文档格式，由边界线（一个由'--'开始的字符串）划分出的不同部分组成。每一部分有自己的实体，以及自己的 HTTP 请求头，Content-Disposition 和 Content-Type。application/x-www-form-urlencoded普通的 get&post 请求。数据被编码为键/值对。(a=1&b=2)这是标准的编码格式。axios 为什么感觉不如 $.ajax（同样代码 jquery 好使，axios 不好使，axios 有 bug 吧）-这个应该是我听到最多的吐槽了。测试地址 ...

快速掌握ajax

ajax是什么？ajax——asynchronous JavaScript and xml：异步的js和xml它能使用js访问服务器，而且是异步访问服务器给客户端的响应一般是整个页面，一个html完整页面！但在ajax中因为是局部刷新，那么服务器就不用响应整个页面，而只是数据。异步交互和同步交互同步：发送一个请求，要等待服务器的响应结束，才能发送第二个请求。中间这段时间就是咱们常说的“卡”。刷新的是整个页面。异步：发送一个请求，无需等待服务器的响应，然后就可以发第二个请求。可以使用js接收服务器的响应，然后使用js来局部刷新。 Ajax优点：1.用户体验增加：Ajax最大的优点就是能在不刷新整个页面的情况下维持与服务器通信2.异步与服务器通信：使用异步的方式与服务器通信，不打断用户的操作3.前端与后端负载均衡：将一些后端的工作移到前端，减少服务器与带宽的负担4.基于规范被广泛支持：不需要下载浏览器插件或者小程序，但需要客户允许JavaScript在浏览器上执行。5.界面与应用分离：Ajax使得界面与应用分离，也就是数据与呈现分离 Ajax缺点：1.Ajax干掉了Back与History功能，即对浏览器机制的破坏2.安全问题：AJAX技术给用户带来很好的用户体验的同时也对IT企业带来了新的安全威胁，Ajax技术就如同对企业数据建立了一个直接通道。这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。3.对搜索引擎支持较弱4.破坏程序的异常处理机制5.违背URL与资源定位的初衷6.不能很好地支持移动设备 Ajax免费课程：阿里云大学——开发者课堂

快速掌握ajax

ajax封装

ajax是什么ajax是在不用刷新页面的情况下，通过js中的XMLHttpRequest对象，从服务器获取数据，对网页内容进行更新的技术。封装方法function ajax(params){ 申明一些必要的参数，比如成功后的回调函数、错误处理、url、data、type(http method)，并且作兜底处理 const{ success = () => {}, error = () => {}, type = 'get', data = {}, url = '/'} = params;过程创建异步请求对象 const xhr = new XMLHttpRequest()注册xhr发送接收请求时的回调，并且在服务器返回结果后，调用success或者error函数 xhr.onreadystatechange=function(){ if(xhr.readyState===4){ if(xhr.state===200){ success(JSON.parse(xhr.responseText)) }else{ error(xhr.state,xhr.responseText) } } }let sendParams = '';Object.keys(data).map((key) => {//Object.keys(对象)，得到一个由对象里的属性名组成的数组 sendParams += `${key}=${data[key]}&`});判断type 如果是get，参数就挂在url上，(url?sendParams),send空如果是其他type，参数就放在send中传递，send(sendParams)，但需要在open和send之间先设置请求头信息 if(type==='get'){ xhr.open(type,`${url}?${sendParams}`,true) xhr.send() }else{ xhr.open(type,url,true) xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); xhr.send(sendParams); }} 调用实例 ajax({ url: '/code/1', type: 'POST', data: { id: 'id', name: 'name' }, success(result) { // do something }, error(error1, error2) { // do something } })

typehead-ajax-format-relay

异步搜索提示的实现 /** * 异步搜索 * @type {Bloodhound} */var bestPictures = new Bloodhound({ datumTokenizer: Bloodhound.tokenizers.obj.whitespace('data'), queryTokenizer: Bloodhound.tokenizers.whitespace, remote: { url: GUI.data.API.searchUser, rateLimitWait: 700, prepare: function(query, settings) { console.log(query); settings.type = "POST"; settings.contentType = "application/x-www-form-urlencoded; charset=UTF-8"; settings.data = { keyName: query }; return settings; }, transform: function(response){ console.log(response); return response.data } }});$('#the-basics .typeahead').typeahead(null, { name: 'best-pictures', limit: '11', display: 'data', source: bestPictures, templates: { empty: [ '<div class="empty-message">', '没有查询到相关的记录', '</div>' ].join('\n'), suggestion: Handlebars.compile('<div class="result-item">{{name}} <span class="small">{{deptName}}</span></div>') }});

ajax跨域问题（一）

如果你在前台调用后台服务接口的时候，如果这个接口不是同一个域的就会产生跨域问题。发生ajax跨域的原因？1.浏览器的限制发生跨域问题的原因不是服务器不允许前台调用，而是浏览器限制了跨域请求。出于安全的考虑，当浏览器发现你的请求是跨域的请求时，它会做一些校验，如果校验不通过，它就会报错。 2.跨域你所发出去的请求不是你本域的。我们的请求里面，协议，域名，端口任何一个不一样浏览器就会认为是跨域。 3.XHR(XMLHttpRequest)请求只要不是发送xhr请求，浏览器一般都不会限制这个请求。解决思路：1.针对浏览器限制导致的跨域可以通过制定参数让浏览器不做校验浏览器就不会限制了。但是这个改动价值不大，因为你得需要每个人都要做这个改动，而且是客户端的改动。2.针对XHR既然发送xhr会被报错，那只要不是xhr请求即使是跨域浏览器也不会报错。基于这种思路，解决方案是jsonp.他的原理是通过动态的创建script标签，在script里面发送跨域请求。但是jsonp的解决方案有很多弊端，无法满足开发要求。3.针对跨域（两种思路）1.让被调用方去修改代码。比如说要从A域名调用B域名的时候，在B域名返回的信息里面加入一些字段，告诉浏览器我允许A域名调用，那么浏览器只要通过校验他就不会报跨域安全问题。这种是支持跨域的思路。2.当被调用方不是我们自己公司的，我们无法修改，就得采取第二种思路：调用方修改。这个思路是隐藏跨域。原理是通过一个代理，从浏览器里面发送的都是A域名的请求，在代理里面把指定的url转到B域名里面。这个转发机制在浏览器认为就是同一个域名了，这样就不存在跨域的问题了。

HTTP和AJAX重点知识

成为栈开发工程师需要掌握的技术栈如何成为一名初级全栈开发工程师什么是全栈开发工程师？全栈（全站）开发工程师(FULL-STACK)：前后端都可以自己独立完成开发[前端]HTML（5）+ CSS（3）JAVASCRIPT（JQ，VUE，REACT）[后端]Java (JSP)PythonNodePHPC#（.net->dot net） (ASP.NET)C…[数据库]mysqlsql serveroraclemongodb （和node结合紧密的）…[自动化]git / svnwebpack(基于NODE运行的)服务器部署工具（iis/Apache/nginx…）linux操作系统https://insights.stackoverflow.com/survey/2018真实项目的部署流程(以及一点职业发展建议)前端和后端是如何通信的？前端：客户端后端：服务器端所谓的全栈，其实就是自己可以实现客户端和服务端程序的编写，而且还可以实现两端之间的通信职业规划建议：培养自己的人脉圈，建立自己的影响力壮大自己的综合能力经常参加一些活动开放分享（做讲师分享自己的智慧，写自己的个人博客做技术分享）自己做一个技术博客本地开发（当前项目可以在本地预览）部署到服务器上，让别人可以通过域名或者外网访问购买一台服务器（阿里云独立主机，虚拟服务器等）https://wanwang.aliyun.com购买域名把自己做的项目传到服务器上让域名和服务器关联(DNS解析：域名解析)在服务器上发布或部署我们的项目（iis，nginx，apache…）做一些推广（SEO推广，友情链接交换，技术文章持续更新）使用FileZilla进行FTP上传客户端和服务器端是如何通信的？经典面试题：当我们在浏览器地址中输入一个URL地址，到最后看到页面，中间都经历了哪些事情？[Request 请求阶段]首先根据客户端输入的域名，到DNS服务器上进行反解析（通过服务器找到对应外网IP）通过找到的外网IP，找到对应的服务器通过在地址栏中输入的端口号（没输入是因为不同协议有自己的默认端口号），找到服务器上发布的对应的项目[Response 响应阶段]服务器获取到请求资源文件的地址，例如：/books/index.html,把资源文件中的源代码找到服务器端会把找到的源代码返回给客户端（通过HTTP等传输协议反回的）[浏览器自主渲染]客户端接收到源代码后，会交给浏览器的内核（渲染引擎）进行渲染，最后有浏览器绘制出对应的页面客户端和服务器端交互(通信)模型HTTP等传输协议讲解URL，URI，URNURI：统一资源标识符URL：统一资源定位 URN：统一资源名称URI = URL + URN一个完整的URL包含很多部分：例如：https://www.haiyang.com/stu/index.html?name=hy&age=6#good第一部分：传输协议传输协议是用来完成客户端和服务端数据（内容）传输的，类似于快递小哥，负责把客户和商家的物品来回传递客户端不仅可以向服务器发送请求，而且还可以把一些参数传递给服务器服务器端也可以把内容返回给客户端客户端和服务器端传输的内容总称为HTTP报文，这些报文信息都是基于传输协议完成传输的，客户端传递给服务器叫做请求（Request），服务器端返回给客户端叫做响应（Response），request+response两个阶段统称为一个HTTP事务（事务：一件完整的事情）HTTP事务：当客户端向服务器端发送请求。此时客户端和服务器端会建立一个传输通道（链接通道），传输协议就是基于这个通道把信息进行传输的当服务器端接收到请求信息，把内容返回给客户端后，传输通道会自动关闭传输协议分类： http:超文本传输协议（客户端和服务器端传输的内容除了文本以外，还可以传输图片，音频，视频等文件流【二进制编码/BASE64码】，以及传输XML格式的数据等），是目前市场上应用最广泛的传输协议 https: http ssl，他比http更加安全，因为数据内容的传输通道是经过ssl加密的（他需要在服务器端进行特殊的处理），所以涉及资金类的网站一般都是https协议的 ftp:资源文件传输协议，一般用于客户端把资源文件（不是代码）上传到服务器端，或者从服务器端下载一些资源文件（一般ftp传输的内容会比http这类协议传输的内容多）HTTP报文的一些核心知识HTTP报文起始行请求起始行响应起始行首部（头）请求头：内置请求头，自定义请求头响应头：内置响应头，自定义响应头通用头：请求和响应都有的主体请求主体响应主体请求xxx都是客户端设置的信息，服务端获取这些信息响应xxx都是服务器端设置的信息，客户端用来接收这些信息在谷歌浏览器控制台Network选项中，我们可以看见当前客户端和服务器端交互的全部信息总结：客户端传递给服务器端数据URL问号传递参数设置请求头设置请求主体服务器端返回给客户端内容设置响应头（例如服务器时间）设置响应主体第二部分：域名设置域名其实就是给不好记忆的服务器外网ip设置了一个好记的名字一级域名（顶级域名）：qq.com二级域名：www.qq.com，sports.qq.com，。。。三级域名：kkk.sports.qq.com第三部分：端口号在服务器发布项目的时候，我们可以通过端口号区分当前服务器上的不同项目一台服务器的端口号取值范围：0-65535之间，如果电脑上安装了许多程序，有一些端口号就是被占用了一个IP地址的端口可以有65536（2^16）个，端口号只有整数，范围是从0 到65535（2^16-1）。端口有三个类型：1. 公认端口（Well Known Ports）是众所周知的端口号，范围从0到1023。2. 动态端口（Dynamic Ports）范围是从49152到65535。之所以称为动态端口，是因为它一般不固定分配某种服务，而是动态分配。3. 注册端口（RegisteredPorts）范围是从1024到49151，分配给用户进程或应用程序。这些进程主要是用户选择安装的一些应用程序，而不是已经分配好了公认端口的常用程序。这些端口在没有被服务器资源占用的时候，可以用用户端动态选用为源端口。HTTP: 默认端口号80HTTPS：默认端口号443FTP：默认端口号21对于上述三个端口号其实是很重要的，如果被其他程序占用，我们就不能使用了，所以在服务器上一般是禁止安装其他程序的第四部分：请求资源的文件路径名称/boos/index.html在服务器中发布项目的时候，我们一般都会配置一些默认文档，用户即使不输入请求文件的名称，服务器也会找到默认文档（一般默认文档都是 index/default …）我们通常为了做SEO优化，会把一些动态页面的地址（xxx.py，xxx.jsp，xxx.php …）进行伪URL重写（需要服务器处理的）例如：https://item.jd.com/342535.html不可能有一个商品就写一个详情页，肯定是同一个详情页做不同的处理第一种方案：由后台语言根据详情页模板动态生成具体的详情页面第二种方案：当前页面就是一个页面，例如：detail.html/detail.php，我们做详情页面的时候，开发是按照detail.html?id=787878来开发的。但是这种页面不方便做SEO优化，此时我们把真实的地址进行重写，重写为我们看到的787878.html第五部分：问号传参?name=hy&age=6把一些值通过xxx=xxx的方式，放在一个URL的末尾，通过？传递参数【作用】在AJAX请求中，我们可以通过问号传递参数的方式，客户端把一些信息传递给服务器，服务器根据传递信息的不一样，返回不同的数据// $.ajax(url,{});// $.get(url,function(){});对于AJAX请求的特殊写法，原理还是基于AJAX方法实现的 $.post / $.script$.ajax({ url: ‘getPersonInfo?id=11’ …});// 当前案例，我们传递给服务器的编号是多少，服务器就会把对应编号的人员返回消除AJAX请求中GET方式缓存$.ajax({ url: ‘xxx?_=0.3434’, method: ‘get’});// 我们会在请求URL末尾追加一个随机数 _=随机数，保证每一次请求的URL地址都是不一样的，以此来消除GET请求遗留的缓存问题通过URL传递参数的方式，可以实现页面之间信息的通信，例如：我们有两个页面A/B，A是列表页面，B是详情页面，点击A中的某一条信息，进入到唯一的详情页B，如何展示不同的信息，这种操作就可以基于URL问号传递参数来实现例如：http://sports.qq.com/kbsweb/g…:123http://sports.qq.com/kbsweb/g…:125在进入到game.html页面的时候，我们可以获取URL传递的参数值，根据传递参数值的不一样，从服务器端获取不同的数据展示在列表页面进行页面跳转的时候，我们需要记住的是跳转的同时传递不同的参数值<a href=‘game.html?mid=xxx’第六部分：HASH值/#xxxURL末尾传递的#号就是HASH值（）哈希值【作用】页面中锚点定位前端路由（SPA 单页面开发）

AJAX基础知识及核心原理详解。前后端分离和不分离的优势与弊端

AJAX基础知识及核心原理解读AJAX基础知识什么是AJAX？async javascript and xml 异步的JS和XMLXML：可扩展的标记语言作用：是用来存储数据的（通过自己扩展的标记名称清晰地展示出数据结构）ajax之所以称为异步的js和xml，主要原因是：以前最开始使用ajax实现客户端和服务端数据通信的时候，传输数据的格式一般都是xml格式的数据，我们把他称之为异步的js和xml（现在一般都是基于JSON格式来进行数据传输的）<?xml version=“1.0” encoding=“UTF-8”?><root> <student> <name>海洋</name> <age>10</age> <score> <deutsch>100</deutsch> <IT>100</IT> <english>100</english> </score> </student></root>异步的JS这里的异步不是说ajax只能基于异步进行请求（虽然建议都是使用异步编程），这里的异步特指的是局部刷新局部刷新 VS 全局刷新全局刷新：在非完全前后端分离的项目中，前端开发只需要完成页面的制作，并且把一些基础的人机交互效果使用js完成即可，页面中需要动态呈现内容的部分，都是交给后台开发工程师做数据绑定和基于服务器进行渲染的（服务器端渲染）【优势】动态展示的数据在页面的源代码中可以看见，有利于SEO优化推广（有利于搜索引擎的收录和抓取）从服务器端获取的结果已经是解析渲染完成的了，不需要客户端再去解析渲染了，所以页面加载速度快（前提是服务器端处理的速度够快，能够处理过来），所以类似于京东，淘宝这些网站，首屏数据一般都是由服务器端渲染的【弊端】如果页面中存在实时更新的数据，每一次想要展示最新的数据，页面都要重新刷新一次，这样肯定不行，非常耗性能都交给服务器端做数据渲染，服务器端的压力太大，如果服务器处理不过来，页面呈现的速度更慢（所以像京东和淘宝这类的网站，除了首屏是服务器端渲染的，其他屏一般都是客户端做数据渲染绑定的）这种模式不利于开发，（开发效率低）局部刷新目前市场上大部分项目都是前后端完全分离的项目（也有非完全前后端分离的占少数）前后端完全分离的项目，页面中需要动态绑定的数据是交给客户端完成渲染的向服务器端发送AJAX请求把从服务器端获取的数据解析处理，拼接成我们需要展示的HTML字符串把拼接好的字符串替换页面中的某一部分内容（局部刷新），页面不需要整体重新加载，局部渲染即可【优势】我们可以根据需求，任意修改页面中的某一部分内容（例如实时刷新），整体页面不刷新，性能好，体验好（所有表单验证，需要实时刷新的等需求都要基于AJAX实现）有利于开发，提高开发效率1）前后端的完全分离，后台不需要考虑前端如何实现，前端也不需要考虑后台用什么技术，真正意义上实现了技术的划分2）可以同时进行开发：项目开发开始，首先制定前后端数据交互的接口文档（文档中包含了，调取哪个接口或者哪些数据等协议规范），后台把接口先写好（目前很多公司也需要前端自己拿NODE来模拟这些接口），客户端按照接口调取即可，后台再去实现接口功能即可【弊端】不利于SEO优化：第一次从服务器端获取的内容不包含需要动态绑定的数据，所以页面的源代码中没有这些内容，不利于SEO收录，后期通过JS添加到页面中的内容，并不会写在页面的源代码中（是源代码不是页面结构）交由客户端渲染，首先需要把页面呈现，然后在通过JS的异步AJAX请求获取数据，在进行数据绑定，浏览器再把动态增加的部分重新渲染，无形中浪费了一些时间，没有服务器端渲染页面呈现速度快基于原生JS实现AJAX// 创建一个AJAX对象let xhr = new XMLHttpRequest(); // 不兼容IE6及更低版本浏览器（IE6：ActiveXObject）// 打开请求地址(可以理解为一些基础配置，但是并没有发送请求呢)xhr.open([method],[url],[async],[userName],[passWord]);// 监听AJAX状态改变，获取响应信息（获取响应头信息，获取响应主体信息）xhr.onreadystatechange = ()=>{ if(xhr.readyState === 4 && xhr.status === 200){ let result = xhr.responseText; // 获取响应主体中的内容 }};// 发送AJAX请求(括号中传递的内容就是请求主体的内容)xhr.send(null);分析第二步中的细节点xhr.open([method],[url],[async],[userName],[passWord])[AJAX请求方式]GET请求系列（获取）getdelete：从服务器上删除某些资源文件head：只想获取服务器返回的响应头信息（响应主体不需要获取）POST请求系列（推送）postput：向服务器中增加指定的资源文件不管哪一种请求方式，客户端都可以把信息传递给服务器端，服务器端也可以把信息返回给客户端，只是GET系列一般以获取为主（给的少，拿回来的多），而POST系列一般以推送为主（给的多，拿回来的少）1）我们想要获取一些动态展示的信息，一般使用GET请求，因为只需要向服务器端发送请求，告诉服务器端我们想要什么，服务器端就会把需要的数据返回2）在实现注册功能的时候，我们需要把客户输入的信息发送给服务器进行存储，服务器一般返回成功或失败等状态，此时我们一般都是基于POST请求完成的GET系列请求和POST系列请求，在项目实战中存在很多的区别GET请求传递给服务器的内容一般没有POST请求传递给服务器的内容多原因：GET请求传递给服务器内容一般都是基于 URL地址问号传递参数来实现的，而POST请求一般都是基于设置请求主体来实现的，各个浏览器都有URL最大长度的限制（谷歌：8kb，火狐：7kb，IE：2kb），超出长度部分，浏览器会自动截取掉，导致传递给服务器的数据缺失理论上POST请求通过请求主体传递是没有大小限制的，真实项目中为了保证传输的速率，我们也会限制大小（例如：上传的资料或者图片我们会做大小的限制）GET请求很容易出现缓存（这个缓存不可控，一般我们都不需要），而POST不会出现缓存（除非自己做特殊处理）原因：GET是通过URL问号传参传递给服务器信息，会出现缓存；而POST是设置请求主体，不会出现缓存。// 每隔一分钟重新请求服务器端最新的数据，然后展示在页面中（页面中某些数据实时刷新）setTimeout(()=>{ $.ajax({ url: ‘getList?lx = news’, … success: result=>{ // 第一次请求数据回来，间隔一分钟后，浏览器又发送一次请求，但是新发送的请求不论是地址还是传递的参数都和第一次一模一样，浏览器很有可能会把上一次的数据获取，而不是获取最新的数据 } })},600)// 解决方案：在每一次重新请求的时候，在URL的末尾追加一个随机数，保证每一次请求的地址不完全一致，就可以避免是从缓存中读取的数据setTimeout(()=>{ $.ajax({ url: ‘getList?lx = news&=’ + Math.random(), … success: result=>{ } })},600)GET请求没有POST请求安全（POST也并不是十分安全，只是相对安全）原因：还是因为GET是URL传参给服务器有一种比较简单的黑客技术：URL劫持，也就是可以把客户端传递给服务器的数据劫持到，导致信息泄露URL:请求数据的地址（API地址），在真实项目中，后台开发工程师会编写一个API文档，在API文档中汇总了获取哪些数据需要使用哪些地址，我们按照文档操作即可ASYNC：异步（SYNC 同步），设置当前AJAX请求是异步的还是同步的，不写默认是异步（TRUE），如果设置为FALSE，则代表当前请求是同步的用户名和密码：这两个参数一般不用，如果你请求的URL地址所在的服务器设定了访问权限，则需要我们提供可通行的用户名和密码才可以（一般服务器都是可以匿名访问的）分析第三步中的细节点AJAX状态码：描述当前AJAX操作状态的：xhr.readyState0：UNSENT未发送，只要创建一个AJAX对象，默认值就是零1：OPENED 我们已经执行了xhr.open这个操作2：HEADERS_RECEIVED 当前AJAX的请求已经发送，并且已经接收到服务器端返回的响应头信息了3：LOADING 响应主体的内容正在返回的路上4：DONE 响应主体内容已经返回到客户端HTTP网络状态码：记录了当前服务器返回信息的状态：xhr.status200：成功，一个完整的HTTP事务完成（以2开头的状态码一般都是成功）以3开头一般也是成功，只不过服务器端做了很多处理301：Moved Permanently 永久转移（永久重定向），一般应用于域名迁移302：Move temporarily 临时转移（临时重定向，新的HTTP版本中任务307是临时重定向），一般用于服务器的负载均衡：当前服务器处理不过来，把当前请求临时交给其他的服务器处理（一般图片请求经常出现302，很多公司都有单独的图片服务器）304：Not Modified 从浏览器缓存中获取数据。把一些不经常更新的文件或者内容缓存到浏览器中，下一次从缓存中获取，减轻服务器压力，也提高页面加载速度以4开头的，一般都是失败，而且客户端的问题偏大400：请求参数错误401：无权限访问404：访问地址不存在以5开头的，一般都是失败，而且服务器端的问题偏大500：Internal Server Error 未知的服务器错误503：Service Unavailable 服务器超负载AJAX中其他常用的属性和方法面试题：AJAX中总共支持几个方法？let xhr = new XMLHttpRequest();console.dir(xhr);//【属性】// 1.readyState：存储的是当前AJAX的状态码// response/responseText/responseXML:都是用来接收服务器返回的响应主体中的内容，只是根据服务器返回内容格式的不一样，我们使用不同的属性接收即可// responseText是最常用的，接收的结果是字符串格式的（一般服务器返回的数据都是JSON格式字符串）// responseXML偶尔会用到，如果服务器返回的是XML文档数据，我们需要使用这个属性接收// status：记录了服务器端返回的HTTP状态码// statusText：对返回的状态码的描述// timeout：设置当前AJAX请求的超时时间，假设我们设置时间为3000ms，从AJAX 请求发送开始，3秒后响应主体内容还没有返回，浏览器会把当前AJAX请求任务强制断开// 【方法】// abort()：强制中断AJAX请求// getAllResponseHeaders():获取全部的响应头信息（获取的结果是一堆字符串文本）// getResponseHeader(key):获取指定属性名的响应头信息，例如：xhr.getResponseHeader(‘date’)获取响应头中存储的服务器的时间// open():打开一个URL地址// overrideMimeType():重写数据的MIME类型// send():发送AJAX请求（括号中写的是客户端基于请求主体把信息传递给服务器）// setRequestHeader(key,value):设置请求头信息（可以是设置自定义请求头信息）// [事件]// onabort：当AJAX被中断请求时触发这个事件// onreadystatechange：AJAX状态发生改变会触发这个事件// ontimeout:当AJAX请求超时，会触发这个事件例子：let xhr = new XMLHttpRequest();xhr.open(‘get’,’temp.json?=’ + Math.random(), true);xhr.setRequestHeader(‘aaa’, ‘123’); // 注意：请求头部的内容不得出现中文汉字。设置请求头信息必须在OPEN之后和SEND之前// 设置超时xhr.timeout = 10;xhr.ontimeout = ()=>{ console.log(‘当前请求已经超时’)； xhr.abort();};xhr.onreadystatechange = ()=>{ let {readyState:state, status} = xhr; if(!/^(2|3)\d{2}$/.test(status)) return; // 在状态为2的时候就可以获取响应头信息 if (state === 2){ let headerAll = xhr.getAllResponseHeaders(), serverDate = xhr.getResponseHeader(‘date’); // 获取的服务器时间是格林尼治时间（相比北京时间差了8小时）,通过new Date 可以把这个时间转换为北京时间 console.log(headerAll, new Date(serverDate); return; } // 在状态为4的时候响应主体内容就已经回来了 if (state === 4){ let valueText = xhr.responseText, // 获取到的结果一般都是JSON字符串（可以使用JSON.PARSE把其转换为JSON对象） valueXML = xhr.responseXML; // 获取到的结果是XML格式的数据（可以通过XML的一些常规操作获取存储的指定信息） // 如果服务器返回的是XML文档，用responseText获取的结果是字符串，而用responseXML获取的是标准XML文档 console.log(valueText, valueXML); }};xhr.send(’name=hy&age=6&sex=man’);JS中常用的编码和解码方法正常的编码解码（非加密）escape / unescape: 主要就是把中文汉字进行编码和解码（一般只有JS语言支持：也经常应用于前端页面通信时候的中文汉字编码）str = ‘你好海洋哈哈’“你好海洋哈哈"escape(str)"%u4F60%u597D%u6D77%u6D0B%20%u54C8%u54C8"unescape("%u4F60%u597D%u6D77%u6D0B%20%u54C8%u54C8”)“你好海洋哈哈"encodeURI / decodeURI : 基本上所有的编程语言都支持str = ‘你好海洋哈哈’“你好海洋哈哈"encodeURI(str)"%E4%BD%A0%E5%A5%BD%E6%B5%B7%E6%B4%8B%20%E5%93%88%E5%93%88"decodeURI("%E4%BD%A0%E5%A5%BD%E6%B5%B7%E6%B4%8B%20%E5%93%88%E5%93%88”)“你好海洋哈哈"encodeURIComponent / decodeURIComponent 和第二种方式非常类似，区别在于：当我们通过URL问号传参的时候，我们传递的参数值还是一个URL或者包含很多的特殊字符，此时为了不影响主要的URL，我们需要把传递的参数值进行编码，使用encodeURI不能编码一些特殊字符，所以只能使用恩codeURLComponent处理str = ‘你好海洋哈哈’“你好海洋哈哈"encodeURIComponent(str)"%E4%BD%A0%E5%A5%BD%E6%B5%B7%E6%B4%8B%20%E5%93%88%E5%93%88"decodeURIComponent("%E4%BD%A0%E5%A5%BD%E6%B5%B7%E6%B4%8B%20%E5%93%88%E5%93%88”)“你好海洋哈哈"let str = ‘http://wudiufo.github.io/?', obj = { name:‘haiyang’, age:‘8’; url:‘http://www.haiyang.com/?lx=1' };// 需求：把obj中的每一项属性名和属性值拼接到URL末尾，通过问号传参的方式for(let key in obj){ str+=${key}=${encodeURIComponent(obj[key])}&; // 不能使用encodeURI，必须使用encodeURIComponent，原因是encodeURI不能编码特殊的字符}console.log(str.replace(/&$/g), ‘’);// 后期获取URL问号参数的时候，我们把获取的值在依次的解码即可String.prototype.myQueryUrlParameter=function myQueryUrlParameter(){ let reg=/?&(?:=([^?&=]*))?/g, obj={}; this.replace(reg,(…arg)=>{ let [,key,value]=arg; obj[key]=decodeURIComponent(value); //此处获取的时候可以进行解码 })； return obj；}也可以通过加密的方法进行编码解码可逆转加密（一般都是团队自己用的规则）不可逆转加密（一般都是基于MD5完成的，可能会把MD5加密后的结果二次加密）AJAX中的同步和异步编程AJAX这个任务：发送请求接收到响应主体内容（完成一个完整的HTTP事务）xhr.send() : 任务开始xhr.readState===4 : 任务结束let xhr = new XMLHttpRequest();xhr.open(‘get’, ’temp.json’, false);xhr.onreadystatechange = () =>{ console.log(xhr.readyState);};xhr.send();// 只输出一次结果是4let xhr = new XMLHttpRequest();xhr.open(‘get’, ’temp.json’, false);xhr.send(); // [同步]开始发送AJAX请求，开启AJAX任务，在任务没有完成之前，什么事情都做不了（下面绑定事件也做不了）=》loading =》当readyState===4的时候AJAX任务完成，开始执行下面的操作// readyState===4xhr.onreadystatechange = () =>{ console.log(xhr.readyState);};// 绑定方法之前状态已经为4了，此时AJAX的状态不会再改变成其他的值了，所以事件永远都不会被触发，一次都没执行方法（使用AJAX同步编程，不要把send放在事件监听前，这样我们无法再绑定的方法中获取到响应主体的内容）let xhr = new XMLHttpRequest();xhr.open(‘get’, ’temp.json’);xhr.onreadystatechange = () =>{ console.log(xhr.readyState);};xhr.send();// 输出3次，结果分别是2，3 ,4let xhr = new XMLHttpRequest();xhr.open(‘get’, ’temp.json’);xhr.send();// xhr.readyState===1xhr.onreadystatechange = () =>{ console.log(xhr.readyState);};// 2,3,4let xhr = new XMLHttpRequest();xhr.onreadystatechange = () =>{ console.log(xhr.readyState);};xhr.open(‘get’, ’temp.json’);xhr.send();// 1,2,3,4let xhr = new XMLHttpRequest();// xhr.readyState===0xhr.onreadystatechange = () =>{ console.log(xhr.readyState);};xhr.open(‘get’, ’temp.json’,false);// xhr.readyState===1,AJAX特殊处理了一件事，执行OPEN状态变为1，会主动把之前监听的方法执行一次，然后再去执行SENDxhr.send();// xhr.readyState===4 AJAX任务结束，住任务队列完成// 1,4实战案例：倒计时抢购1，结构：<!DOCTYPE html><html lang=“en”><head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width, initial-scale=1.0”> <meta http-equiv=“X-UA-Compatible” content=“ie=edge”> <title>Document</title></head><body> <div id=“box”></div> <script src=”./1.js”></script></body></html>2, 交互：~ function() { let box = document.getElementById(‘box’); let serverTime = null; let fn = () => { // 1，计算当前时间和目标时间的差值 // new Date（）：获取的是客户端本机时间（会受到客户端自己调整时间的影响），重要的时间参考不能基于这个完成，不论哪一个客户端都要基于相同的服务器时间计算 // 每间隔一秒钟，我们需要把第一次获取的服务器时间进行累加 serverTime = serverTime + 1000; let tarTime = new Date(‘2018/12/22 12:00:00’).getTime(), spanTime = tarTime - serverTime; // 2,计算差值中包含多少时分秒 if (spanTime < 0) { // 已经错过了抢购时间（已经开抢了） box.innerHTML = ‘开枪’; clearInterval(autoTimer); return; } let hours = Math.floor(spanTime / (1000 * 60 * 60)); spanTime -= hours * 3600000; let minus = Math.floor(spanTime / (1000 * 60)); spanTime -= minus * 60000; let seconds = Math.floor(spanTime / 1000); hours < 10 ? hours = ‘0’ + hours : null; minus < 10 ? minus = ‘0’ + minus : null; seconds < 10 ? seconds = ‘0’ + seconds : null; box.innerHTML = 距离开枪还剩下 ${hours}:${minus}:${seconds}; }; let autoTimer = setInterval(fn, 1000); // 从服务器端获取服务器时间 let getServerTime = () => { let xhr = new XMLHttpRequest(); xhr.onreadystatechange = () => { // console.log(xhr.readyState); // HEAD请求方式，状态码中没有3（不需要等待响应主体内容） if (!/^(2|3)\d{2}$/.test(xhr.status)) return; if (xhr.readyState === 2) { serverTime = new Date(xhr.getResponseHeader(‘date’)).getTime(); fn(); } }; xhr.open(‘head’, ’temp.xml’, true); xhr.send(null); // 1,服务器返回的时间在响应头就有，我们只需要获取响应头信息即可，没必要获取响应主体内容，所以请求方式使用HEAD即可 // 2，必须使用异步编程：同步编程我们无法再状态为2或3的时候做一些处理，而我们获取响应头信息，在状态为2的时候就可以获取了，所以需要使用异步 // 3,在状态为2的时候就把服务器时间获取到 // 获取服务器时间总会出现时间差的问题，服务器端把时间记录好，到客户端获取到时间有延迟差（例如：服务器返回的时候记录的是10:00，到客户端获取的时候已经是10:01，但是客户端获取的结果依然是10:00，这样就有了1秒钟的时间差）【尽可能的减少时间差，是我们优化的全部目的】 }; getServerTime();}();AJAX类库的封装JQ中AJAX操作详解$.ajax({ url:‘xxx.txt’, //请求API地址 method:‘get’, //请求方式GET/POST…，在老版本JQ中使用的是type，使用type和method实现的是相同的效果 dataType:‘json’, //dataType只是我们预设获取结果的类型，不会影响服务器的返回，（服务器端一般给我们返回的都是JSON格式的字符串），如果我们预设的是JSON，那么类库中将把服务器返回的字符串转换为JSON对象，如果我们预设的是text（默认值），我们把服务器获取的结果直接拿过来操作即可，我们预设的值还可以是xml等 cache：false, // 设置是否清除缓存，只对GET系列请求有作用，默认是true，有缓存，手动设置为false，无缓存，JQ类库会在请求URL的末尾追加一个随机数来清除缓存 data:null, //我们通过data可以把一些信息传递给服务器；GET系列请求会把data中的内容拼接在URL的末尾通过问号传参的方式传递给服务器，POST系列请求会把内容放在请求主体中传递给服务器。data的值可以设置为两种格式：字符串，对象，如果是字符串，设置的值是什么传递给服务器的就是什么，如果设置的是对象，JQ会把对象变为 xxx=xxx&xxx=xxx 这样的字符串传递给服务器 async：true，//设置同步或者异步，默认是true代表异步，false是同步 success:function(result){ // 当AJAX请求成功（readyState===4 & status是以2或者4开头的） // 请求成功后JQ会把传递的回调函数执行，并且把获取的结果当做实参传递给回调函数（result就是我们从服务器获取的结果） }, error:function(msg){}, // 请求错误触发回调函数 complete：function(){}, // 不论请求是错误的还是正确的都会触发回调函数（他是完成的意思）})封装属于自己的AJAX类库【支持的参数】urlmethod/typedatadataTypeasynccachesuccess~ function() { class ajaxClass { // SEND AJAX init() { // THIS:EXAMPLE let xhr = new XMLsHttpRequest(); xhr.onreadystatechange = () => { if (!/[23]\d{2}$/.test(xhr.status)) return; if (xhr.readyState === 4) { let result = xhr.responseText; // DATA-TYPE switch (this.dataType.toUpperCase()) { case ‘TEXT’: case ‘HTML’: break; case ‘JSON’: result = JSON.parse(result); break; case ‘XML’: result = xhr.responseXML; } this.success(result); }; }; // DATA if (this.data != null) { this.formatData(); if (this.isGET) { this.url += this.querySymbol() + this.data; this.data = null; } } // CACHE this.isGET ? this.cacheFn() : null; xhr.open(this.method, this.url, this.async); xhr.send(this.data); } // 把传递的对象格式data转换为字符串格式的data formatData() { // THIS:EXAMPLE if (Object.prototype.toString.call(this.data) === ‘[object Object]’) { let obj = this.data, str = ; for (let key in obj) { if (obj.hasOwnProperty(key)) { str += `${key}=${obj[key]}&`; } } str = str.replace(/&$/g, ''); this.data = str; } } cacheFn() { // THIS:EXAMPLE !this.cache ? this.url += `${this.querySymbol()}_=${Math.random()}` : null; } querySymbol() { // THIS:EXAMPLE return this.querySymbol.indexof('?') > -1 ? '&' : '?'; } } // init parameters window.ajax = function({ url = null, method = 'GET', type = 'null', data = null, dataType = 'JSON', cache = true, async = true, success = null } = {}) { let example = new ajaxClass(); example.url = url; example.method = type === null ? method : type; example.data = data; example.dataType = dataType; example.cache = cache; example.async = async; example.success = typeof success === 'function' ? success : new Function(); example.isGET = /^(GET|DELETE|HEAD)$/i.test(example.method); example.init(); return example; };}();ajax({});优化代码：~ function() { class ajaxClass { // SEND AJAX init() { // THIS:EXAMPLE let xhr = new XMLHttpRequest(); xhr.onreadystatechange = () => { if (!/[23]\d{2}$/.test(xhr.status)) return; if (xhr.readyState === 4) { let result = xhr.responseText; // DATA-TYPE try { switch (this.dataType.toUpperCase()) { case 'TEXT': case 'HTML': break; case 'JSON': result = JSON.parse(result); break; case 'XML': result = xhr.responseXML; } } catch (e) { } this.success(result); }; }; // DATA if (this.data != null) { this.formatData(); if (this.isGET) { this.url += this.querySymbol() + this.data; this.data = null; } } // CACHE this.isGET ? this.cacheFn() : null; xhr.open(this.method, this.url, this.async); xhr.send(this.data); } // 把传递的对象格式data转换为字符串格式的data formatData() { // THIS:EXAMPLE if (Object.prototype.toString.call(this.data) === '[object Object]') { let obj = this.data, str = ; for (let key in obj) { if (obj.hasOwnProperty(key)) { str += ${key}=${obj[key]}&; } } str = str.replace(/&$/g, ‘’); this.data = str; } } cacheFn() { // THIS:EXAMPLE !this.cache ? this.url += ${this.querySymbol()}_=${Math.random()} : null; } querySymbol() { // THIS:EXAMPLE return this.querySymbol.indexof(’?’) > -1 ? ‘&’ : ‘?’; } } // init parameters window.ajax = function({ url = null, method = ‘GET’, type = ’null’, data = null, dataType = ‘JSON’, cache = true, async = true, success = null } = {}) { let _this = new ajaxClass(); [‘url’, ‘method’, ‘data’, ‘dataType’, ‘cache’, ‘async’, ‘success’].forEach((item) => { if (item === ‘method’) { _this.method = type === null ? method : type; return; } if (item === ‘success’) { _this.success = typeof success === ‘function’ ? success : new Function(); return; } _this[item] = eval(item); }); _this.isGET = /^(GET|DELETE|HEAD)$/i.test(_this.method); _this.init(); return _this; };}();ajax({}); ...

全面分析前端的网络请求方式

一、前端进行网络请求的关注点大多数情况下，在前端发起一个网络请求我们只需关注下面几点：传入基本参数（url，请求方式）请求参数、请求参数类型设置请求头获取响应的方式获取响应头、响应状态、响应结果异常处理携带cookie设置跨域请求二、前端进行网络请求的方式form表单、ifream、刷新页面Ajax - 异步网络请求的开山鼻祖jQuery - 一个时代fetch - Ajax的替代者axios、request等众多开源库三、关于网络请求的疑问Ajax的出现解决了什么问题原生Ajax如何使用jQuery的网络请求方式fetch的用法以及坑点如何正确的使用fetch如何选择合适的跨域方式带着以上这些问题、关注点我们对几种网络请求进行一次全面的分析。四、Ajax的出现解决了什么问题在Ajax出现之前，web程序是这样工作的：这种交互的的缺陷是显而易见的，任何和服务器的交互都需要刷新页面，用户体验非常差，Ajax的出现解决了这个问题。Ajax全称Asynchronous JavaScript + XML（异步JavaScript和XML）使用Ajax，网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面。Ajax本身不是一种新技术，而是用来描述一种使用现有技术集合实现的一个技术方案，浏览器的XMLHttpRequest是实现Ajax最重要的对象（IE6以下使用ActiveXObject）。尽管X在Ajax中代表XML, 但由于JSON的许多优势，比如更加轻量以及作为Javascript的一部分，目前JSON的使用比XML更加普遍。五、原生Ajax的用法这里主要分析XMLHttpRequest对象，下面是它的一段基础使用： var xhr = new XMLHttpRequest(); xhr.open(‘post’,‘www.xxx.com’,true) // 接收返回值 xhr.onreadystatechange = function(){ if(xhr.readyState === 4 ){ if(xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){ console.log(xhr.responseText); } } } // 处理请求参数 postData = {“name1”:“value1”,“name2”:“value2”}; postData = (function(value){ var dataString = “”; for(var key in value){ dataString += key+"="+value[key]+"&"; }; return dataString; }(postData)); // 设置请求头 xhr.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”); // 异常处理 xhr.onerror = function() { console.log(‘Network request failed’) } // 跨域携带cookie xhr.withCredentials = true; // 发出请求 xhr.send(postData);下面分别对XMLHttpRequest对象常用的的函数、属性、事件进行分析。函数open用于初始化一个请求，用法：xhr.open(method, url, async);method：请求方式，如get、posturl：请求的urlasync：是否为异步请求send用于发送 HTTP 请求，即调用该方法后HTTP请求才会被真正发出，用法：xhr.send(param)param：http请求的参数，可以为string、Blob等类型。abort用于终止一个ajax请求，调用此方法后readyState将被设置为0，用法：xhr.abort()setRequestHeader用于设置HTTP请求头，此方法必须在 open() 方法和 send() 之间调用，用法：xhr.setRequestHeader(header, value);getResponseHeader用于获取http返回头，如果在返回头中有多个一样的名称，那么返回的值就会是用逗号和空格将值分隔的字符串，用法：var header = xhr.getResponseHeader(name);属性readyState用来标识当前XMLHttpRequest对象所处的状态，XMLHttpRequest对象总是位于下列状态中的一个：值状态描述0UNSENT代理被创建，但尚未调用 open() 方法。1OPENEDopen() 方法已经被调用。2HEADERS_RECEIVEDsend() 方法已经被调用，并且头部和状态已经可获得。3LOADING下载中； responseText 属性已经包含部分数据。4DONE下载操作已完成。status表示http请求的状态, 初始值为0。如果服务器没有显式地指定状态码, 那么status将被设置为默认值, 即200。responseType表示响应的数据类型，并允许我们手动设置，如果为空，默认为text类型，可以有下面的取值：值描述"“将 responseType 设为空字符串与设置为"text"相同，是默认类型（实际上是 DOMString）。“arraybuffer"response 是一个包含二进制数据的 JavaScript ArrayBuffer 。“blob” response 是一个包含二进制数据的 Blob 对象。“document"response 是一个 HTML Document 或 XML XMLDocument ，这取决于接收到的数据的 MIME 类型。“json” response 是一个 JavaScript 对象。这个对象是通过将接收到的数据类型视为 JSON 解析得到的。“text” response 是包含在 DOMString 对象中的文本。response返回响应的正文，返回的类型由上面的responseType决定。withCredentialsajax请求默认会携带同源请求的cookie，而跨域请求则不会携带cookie，设置xhr的withCredentials的属性为true将允许携带跨域cookie。事件回调onreadystatechange xhr.onreadystatechange = callback;当readyState 属性发生变化时，callback会被触发。onloadstart xhr.onloadstart = callback;在ajax请求发送之前（readyState==1后, readyState==2前），callback会被触发。onprogressxhr.onprogress = function(event){ console.log(event.loaded / event.total);}回调函数可以获取资源总大小total，已经加载的资源大小loaded，用这两个值可以计算加载进度。onload xhr.onload = callback;当一个资源及其依赖资源已完成加载时，将触发callback，通常我们会在onload事件中处理返回值。异常处理onerror xhr.onerror = callback;当ajax资源加载失败时会触发callback。ontimeout xhr.ontimeout = callback;当进度由于预定时间到期而终止时，会触发callback，超时时间可使用timeout属性进行设置。六、jQuery对Ajax的封装在很长一段时间里，人们使用jQuery提供的ajax封装进行网络请求，包括$.ajax、$.get、$.post等，这几个方法放到现在，我依然觉得很实用。$.ajax({ dataType: ‘json’, // 设置返回值类型 contentType: ‘application/json’, // 设置参数类型 headers: {‘Content-Type’,‘application/json’},// 设置请求头 xhrFields: { withCredentials: true }, // 跨域携带cookie data: JSON.stringify({a: [{b:1, a:1}]}), // 传递参数 error:function(xhr,status){ // 错误处理 console.log(xhr,status); }, success: function (data,status) { // 获取结果 console.log(data,status); }})$.ajax只接收一个参数，这个参数接收一系列配置，其自己封装了一个jqXHR对象，有兴趣可以阅读一下jQuary-ajax 源码常用配置：url 当前页地址。发送请求的地址。type 类型：String 请求方式 (“POST” 或 “GET”)，默认为 “GET”。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。timeout 类型：Number 设置请求超时时间（毫秒）。此设置将覆盖全局设置。success 类型：Function 请求成功后的回调函数。jsonp在一个jsonp请求中重写回调函数的名字。这个值用来替代在"callback=?“这种GET或POST请求中URL参数里的"callback"部分。error 类型：Function 。请求失败时调用此函数。注意：源码里对错误的判定：isSuccess = status >= 200 && status < 300 || status === 304;返回值除了这几个状态码都会进error回调。dataType"xml”: 返回 XML 文档，可用 jQuery 处理。“html”: 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。“script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 “cache” 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）“json”: 返回 JSON 数据。“jsonp”: JSONP 格式。使用 JSONP 形式调用函数时，如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。“text”: 返回纯文本字符串data 类型：String 使用JSON.stringify转码complete类型：Function 请求完成后回调函数 (请求成功或失败之后均调用)。async 类型：Boolean 默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。contentType 类型：String 默认值: “application/x-www-form-urlencoded”。发送信息至服务器时内容编码类型。键值对这样组织在一般的情况下是没有什么问题的，这里说的一般是，不带嵌套类型JSON，也就是简单的JSON，形如这样：{ a: 1, b: 2, c: 3}但是在一些复杂的情况下就有问题了。例如在 Ajax 中你要传一个复杂的 json 对像，也就说是对象嵌数组，数组中包括对象，你这样传： application/x-www-form-urlencoded 这种形式是没有办法将复杂的 JSON 组织成键值对形式。{ data: { a: [{ x: 2 }] }}可以用如下方式传递复杂的json对象$.ajax({ dataType: ‘json’, contentType: ‘application/json’, data: JSON.stringify({a: [{b:1, a:1}]})})七、jQuery的替代者近年来前端MV的发展壮大，人们越来越少的使用jQuery，我们不可能单独为了使用jQuery的Ajax api来单独引入他，无可避免的，我们需要寻找新的技术方案。尤雨溪在他的文档中推荐大家用axios进行网络请求。axios基于Promise对原生的XHR进行了非常全面的封装，使用方式也非常的优雅。另外，axios同样提供了在node环境下的支持，可谓是网络请求的首选方案。未来必定还会出现更优秀的封装，他们有非常周全的考虑以及详细的文档，这里我们不多做考究，我们把关注的重点放在更底层的APIfetch。Fetch API 是一个用用于访问和操纵HTTP管道的强大的原生 API。这种功能以前是使用 XMLHttpRequest实现的。Fetch提供了一个更好的替代方法，可以很容易地被其他技术使用，例如 Service Workers。Fetch还提供了单个逻辑位置来定义其他HTTP相关概念，例如CORS和HTTP的扩展。可见fetch是作为XMLHttpRequest的替代品出现的。使用fetch，你不需要再额外加载一个外部资源。但它还没有被浏览器完全支持，所以你仍然需要一个 polyfill。八、fetch的使用一个基本的 fetch请求：const options = { method: “POST”, // 请求参数 headers: { “Content-Type”: “application/json”}, // 设置请求头 body: JSON.stringify({name:‘123’}), // 请求参数 credentials: “same-origin”, // cookie设置 mode: “cors”, // 跨域}fetch(‘http://www.xxx.com’) .then(function(response) { return response.json(); }) .then(function(myJson) { console.log(myJson); // 响应数据 }) .catch(function(err){ console.log(err); // 异常处理 })Fetch API提供了一个全局的fetch()方法，以及几个辅助对象来发起一个网络请求。fetch()fetch()方法用于发起获取资源的请求。它返回一个 promise，这个 promise 会在请求响应后被 resolve，并传回 Response 对象。Headers可以通过 Headers() 构造函数来创建一个你自己的 headers 对象，相当于 response/request 的头信息，可以使你查询到这些头信息，或者针对不同的结果做不同的操作。var myHeaders = new Headers();myHeaders.append(“Content-Type”, “text/plain”);Request通过 Request() 构造函数可以创建一个Request 对象，这个对象可以作为fetch函数的第二个参数。Response在fetch()处理完promises之后返回一个Response 实例，也可以手动创建一个Response实例。九、fetch polyfill源码分析由于fetch是一个非常底层的API，所以我们无法进一步的探究它的底层，但是我们可以借助它的polyfill探究它的基本原理，并找出其中的坑点。代码结构由代码可见，polyfill主要对Fetch API提供的四大对象进行了封装：fetch 封装代码非常清晰：构造一个Promise对象并返回创建一个Request对象创建一个XMLHttpRequest对象取出Request对象中的请求url，请求方发，open一个xhr请求，并将Request对象中存储的headers取出赋给xhrxhr onload后取出response的status、headers、body封装Response对象，调用resolve。异常处理可以发现，调用reject有三种可能：1.请求超时2.请求失败注意：当和服务器建立简介，并收到服务器的异常状态码如404、500等并不能触发onerror。当网络故障时或请求被阻止时，才会标记为 reject，如跨域、url不存在，网络异常等会触发onerror。所以使用fetch当接收到异常状态码都是会进入then而不是catch。这些错误请求往往要手动处理。3.手动终止可以在request参数中传入signal对象，并对signal对象添加abort事件监听，当xhr.readyState变为4（响应内容解析完成）后将signal对象的abort事件监听移除掉。这表示，在一个fetch请求结束之前可以调用signal.abort将其终止。在浏览器中可以使用AbortController()构造函数创建一个控制器，然后使用AbortController.signal属性这是一个实验中的功能，此功能某些浏览器尚在开发中Headers封装在header对象中维护了一个map对象，构造函数中可以传入Header对象、数组、普通对象类型的header，并将所有的值维护到map中。之前在fetch函数中看到调用了header的forEach方法，下面是它的实现：可见header的遍历即其内部map的遍历。另外Header还提供了append、delete、get、set等方法，都是对其内部的map对象进行操作。Request对象Request对象接收的两个参数即fetch函数接收的两个参数，第一个参数可以直接传递url，也可以传递一个构造好的request对象。第二个参数即控制不同配置的option对象。可以传入credentials、headers、method、mode、signal、referrer等属性。这里注意：传入的headers被当作Headers构造函数的参数来构造header对象。cookie处理fetch函数中还有如下的代码： if (request.credentials === ‘include’) { xhr.withCredentials = true } else if (request.credentials === ‘omit’) { xhr.withCredentials = false }默认的credentials类型为same-origin,即可携带同源请求的coodkie。然后我发现这里polyfill的实现和MDN-使用Fetch以及很多资料是不一致的：mdn: 默认情况下，fetch 不会从服务端发送或接收任何 cookies于是我分别实验了下使用polyfill和使用原生fetch携带cookie的情况，发现在不设置credentials的情况下居然都是默认携带同源cookie的，这和文档的说明说不一致的，查阅了许多资料后都是说fetch默认不会携带cookie，下面是使用原生fetch在浏览器进行请求的情况：然后我发现在MDN-Fetch-Request已经指出新版浏览器credentials默认值已更改为same-origin，旧版依然是omit。确实MDN-使用Fetch这里的文档更新的有些不及时，误人子弟了…Response对象Response对象是fetch调用成功后的返回值：回顾下fetch中对Response的操作： xhr.onload = function () { var options = { status: xhr.status, statusText: xhr.statusText, headers: parseHeaders(xhr.getAllResponseHeaders() || '') } options.url = 'responseURL' in xhr ? xhr.responseURL : options.headers.get('X-Request-URL') var body = 'response' in xhr ? xhr.response : xhr.responseText resolve(new Response(body, options)) }Response构造函数：可见在构造函数中主要对options中的status、statusText、headers、url等分别做了处理并挂载到Response对象上。构造函数里面并没有对responseText的明确处理，最后交给了_initBody函数处理，而Response并没有主动声明_initBody属性，代码最后使用Response调用了Body函数，实际上_initBody函数是通过Body函数挂载到Response身上的，先来看看_initBody函数：可见，_initBody函数根据xhr.response的类型（Blob、FormData、String...），为不同的参数进行赋值，这些参数在Body方法中得到不同的应用，下面具体看看Body函数还做了哪些其他的操作：Body函数中还为Response对象挂载了四个函数，text、json、blob、formData，这些函数中的操作就是将_initBody中得到的不同类型的返回值返回。这也说明了，在fetch执行完毕后，不能直接在response中获取到返回值而必须调用text()、json()等函数才能获取到返回值。这里还有一点需要说明：几个函数中都有类似下面的逻辑： var rejected = consumed(this) if (rejected) { return rejected }consumed函数：function consumed(body) { if (body.bodyUsed) { return Promise.reject(new TypeError('Already read')) } body.bodyUsed = true}每次调用text()、json()等函数后会将bodyUsed变量变为true，用来标识返回值已经读取过了，下一次再读取直接抛出TypeError('Already read')。这也遵循了原生fetch的原则：因为Responses对象被设置为了 stream 的方式，所以它们只能被读取一次十、fetch的坑点VUE的文档中对fetch有下面的描述：使用fetch还有很多别的注意事项，这也是为什么大家现阶段还是更喜欢 axios 多一些。当然这个事情在未来可能会发生改变。由于fetch是一个非常底层的API，它并没有被进行很多封装，还有许多问题需要处理：不能直接传递JavaScript对象作为参数需要自己判断返回值类型，并执行响应获取返回值的方法获取返回值方法只能调用一次，不能多次调用无法正常的捕获异常老版浏览器不会默认携带cookie不支持jsonp十一、对fetch的封装请求参数处理支持传入不同的参数类型：function stringify(url, data) { var dataString = url.indexOf('?') == -1 ? '?' : '&'; for (var key in data) { dataString += key + '=' + data[key] + '&'; }; return dataString;}if (request.formData) { request.body = request.data;} else if (/^get$/i.test(request.method)) { request.url = ${request.url}${stringify(request.url, request.data)};} else if (request.form) { request.headers.set('Content-Type', 'application/x-www-form-urlencoded;charset=UTF-8'); request.body = stringify(request.data);} else { request.headers.set('Content-Type', 'application/json;charset=UTF-8'); request.body = JSON.stringify(request.data);}cookie携带fetch在新版浏览器已经开始默认携带同源cookie，但在老版浏览器中不会默认携带，我们需要对他进行统一设置： request.credentials = 'same-origin'; // 同源携带 request.credentials = 'include'; // 可跨域携带异常处理当接收到一个代表错误的 HTTP 状态码时，从 fetch()返回的 Promise 不会被标记为 reject，即使该 HTTP 响应的状态码是 404 或 500。相反，它会将 Promise 状态标记为 resolve （但是会将 resolve 的返回值的 ok 属性设置为 false ），仅当网络故障时或请求被阻止时，才会标记为 reject。因此我们要对fetch的异常进行统一处理.then(response => { if (response.ok) { return Promise.resolve(response); }else{ const error = new Error(请求失败! 状态码: ${response.status}, 失败信息: ${response.statusText}`); error.response = response; return Promise.reject(error); }});返回值处理对不同的返回值类型调用不同的函数接收，这里必须提前判断好类型，不能多次调用获取返回值的方法：.then(response => { let contentType = response.headers.get(‘content-type’); if (contentType.includes(‘application/json’)) { return response.json(); } else { return response.text(); }});jsonpfetch本身没有提供对jsonp的支持，jsonp本身也不属于一种非常好的解决跨域的方式，推荐使用cors或者nginx解决跨域，具体请看下面的章节。fetch封装好了，可以愉快的使用了。嗯，axios真好用…十二、跨域总结谈到网络请求，就不得不提跨域。浏览器的同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。通常不允许不同源间的读操作。跨域条件：协议，域名，端口，有一个不同就算跨域。下面是解决跨域的几种方式：nginx使用nginx反向代理实现跨域，参考我这篇文章：前端开发者必备的nginx知识corsCORS是一个W3C标准，全称是"跨域资源共享”（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求。服务端设置 Access-Control-Allow-Origin 就可以开启 CORS。该属性表示哪些域名可以访问资源，如果设置通配符则表示所有网站都可以访问资源。app.all(’’, function (req, res, next) { res.header(“Access-Control-Allow-Origin”, “*”); res.header(“Access-Control-Allow-Headers”, “X-Requested-With”); res.header(“Access-Control-Allow-Methods”, “PUT,POST,GET,DELETE,OPTIONS”); next();});jsonpscript标签的src属性中的链接可以访问跨域的js脚本，利用这个特性，服务端不再返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。jquery对jsonp的支持： $.ajax({ type : “get”, url : “http://xxxx” dataType: “jsonp”, jsonp:“callback”, jsonpCallback: “doo”, success : function(data) { console.log(data); } });fetch、axios等并没有直接提供对jsonp的支持，如果需要使用这种方式，我们可以尝试进行手动封装：(function (window,document) { “use strict”; var jsonp = function (url,data,callback) { // 1.将传入的data数据转化为url字符串形式 // {id:1,name:‘jack’} => id=1&name=jack var dataString = url.indexof(’?’) == -1? ‘?’: ‘&’; for(var key in data){ dataString += key + ‘=’ + data[key] + ‘&’; }; // 2 处理url中的回调函数 // cbFuncName回调函数的名字：my_json_cb_名字的前缀 + 随机数（把小数点去掉） var cbFuncName = ‘my_json_cb_’ + Math.random().toString().replace(’.’,’’); dataString += ‘callback=’ + cbFuncName; // 3.创建一个script标签并插入到页面中 var scriptEle = document.createElement(‘script’); scriptEle.src = url + dataString; // 4.挂载回调函数 window[cbFuncName] = function (data) { callback(data); // 处理完回调函数的数据之后，删除jsonp的script标签 document.body.removeChild(scriptEle); } document.body.appendChild(scriptEle); } window.$jsonp = jsonp;})(window,document)postMessage跨域postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。//捕获iframevar domain = ‘http://scriptandstyle.com’;var iframe = document.getElementById(‘myIFrame’).contentWindow;//发送消息setInterval(function(){ var message = ‘Hello! The time is: ’ + (new Date().getTime()); console.log(‘blog.local: sending message: ’ + message); //send the message and target URI iframe.postMessage(message,domain); },6000);//响应事件window.addEventListener(‘message’,function(event) { if(event.origin !== ‘http://davidwalsh.name’) return; console.log(‘message received: ’ + event.data,event); event.source.postMessage(‘holla back youngin!’,event.origin);},false);postMessage跨域适用于以下场景：同浏览器多窗口间跨域通信、iframe间跨域通信。WebSocketWebSocket 是一种双向通信协议，在建立连接之后，WebSocket 的 server 与 client 都能主动向对方发送或接收数据而不受同源策略的限制。 function WebSocketTest(){ if (“WebSocket” in window){ alert(“您的浏览器支持 WebSocket!”); // 打开一个 web socket var ws = new WebSocket(“ws://localhost:3000/abcd”); ws.onopen = function(){ // Web Socket 已连接上，使用 send() 方法发送数据 ws.send(“发送数据”); alert(“数据发送中…”); }; ws.onmessage = function (evt) { var received_msg = evt.data; alert(“数据已接收…”); }; ws.onclose = function(){ // 关闭 websocket alert(“连接已关闭…”); }; } else{ // 浏览器不支持 WebSocket alert(“您的浏览器不支持 WebSocket!”); } }文中如有错误，欢迎在评论区指正，谢谢阅读。 ...

原生js 完整封装ajax

最近开始看了看跟Node相关的内容，联想到了前后台的交互，于是记录一下自己封装的ajax，初学者，写的糙，望见谅~~function ajax(json){ if(window.XMLHttpRequest){ var ajax = new XMLHttpRequest(); } else{ var ajax = new ActiveXObject( “Microsoft.XMLHTTP” ); } if(json.type==‘get’){ ajax.open(‘get’,json.url+’?’+JsonToString(json.data),true); ajax.send(); } else if(json.type==‘post’){ ajax.open(‘post’,json.url,true); ajax.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”); ajax.send(JsonToString(json.data)); } ajax.onreadystatechange = function(){ if(ajax.readyState == 4){ if(ajax.status>=200 && ajax.status<300 || ajax.status == 304){ json.success(ajax.responseText); } else{ json.error && json.error(); } }; }; function JsonToString(json){ var arr = []; for(var i in json){ arr.push(i+’=’+json[i]); }; return arr.join(’&’); }}验证btn.onclick = function(){ ajax({ ‘url’:‘http://localhost:9102’, ’type’:‘get’, ‘data’:{ user:user.value, pass:pass.value }, success:function(data){ console.log(data) } })}btn.onclick = function(){ ajax({ ‘url’:‘http://localhost:9102’, ’type’:‘post’, ‘data’:{ user:user.value, pass:pass.value }, success:function(data){ console.log(data) } })}后台内容var http = require(‘http’);urlLib = require(‘url’),var querystring = require(‘querystring’);http.createServer(function(req,res){ res.setHeader(‘Access-Control-Allow-Origin’,’*’);//允许跨域 //get var json = urlLib.parse(req.url,true).query; //post var str = ‘’; req.on(‘data’,function(data){ str += data; }); req.on(’end’,function(){ var json = querystring.parse(str); res.end(); });}).listen(9102); ...

从0到1学AJAX，这篇就够了！（进阶三）

什么是ajax？AJAX 就是浏览器提供的一套 API，可以通过 JavaScript 调用，从而实现通过代码控制请求与响应。实现网络编程1、使用 AJAX 的过程可以类比平常我们访问网页过程// 1. 创建一个 XMLHttpRequest 类型的对象 —— 相当于打开了一个浏览器var xhr = new XMLHttpRequest()// 2. 打开与一个网址之间的连接 —— 相当于在地址栏输入访问地址xhr.open(‘GET’, ‘./time.php’)// 3. 通过连接发送一次请求 —— 相当于回车或者点击访问发送请求xhr.send(null)// 4. 指定 xhr 状态变化事件处理函数 —— 相当于处理网页呈现后的操作xhr.onreadystatechange = function () {// 通过 xhr 的 readyState 判断此次请求的响应是否接收完成if (this.readyState === 4) {// 通过 xhr 的 responseText 获取到响应的响应体console.log(this)}}2、readyState由于 readystatechange 事件是在 xhr 对象状态变化时触发（不单是在得到响应时），也就意味着这个事件会被触发多次，所以我们有必要了解每一个状态值代表的含义：时间轴：var xhr = new XMLHttpRequest()console.log(xhr.readyState)// => 0// 初始化请求代理对象xhr.open(‘GET’, ’time.php’)console.log(xhr.readyState)// => 1// open 方法已经调用，建立一个与服务端特定端口的连接xhr.send()xhr.addEventListener(‘readystatechange’, function () {switch (this.readyState) {case 2:// => 2// 已经接受到了响应报文的响应头// 可以拿到头// console.log(this.getAllResponseHeaders())console.log(this.getResponseHeader(‘server’))// 但是还没有拿到体console.log(this.responseText)breakcase 3:// => 3// 正在下载响应报文的响应体，有可能响应体为空，也有可能不完整// 在这里处理响应体不保险（不可靠）console.log(this.responseText)breakcase 4:// => 4// 一切 OK （整个响应报文已经完整下载下来了）// 这里处理响应体console.log(this.responseText)break}})通过理解每一个状态值的含义得出一个结论：一般我们都是在 readyState 值为 4 时，执行响应的后续逻辑。xhr.onreadystatechange = function () {if (this.readyState === 4) {// 后续逻辑……}}3、遵循 HTTP本质上 XMLHttpRequest 就是 JavaScript 在 Web 平台中发送 HTTP 请求的手段，所以我们发送出去的请求任然是HTTP 请求，同样符合 HTTP 约定的格式：// 设置请求报文的请求行xhr.open(‘GET’, ‘./time.php’)// 设置请求头xhr.setRequestHeader(‘Accept’, ’text/plain’)// 设置请求体xhr.send(null)xhr.onreadystatechange = function () {if (this.readyState === 4) {// 获取响应状态码console.log(this.status)// 获取响应状态描述console.log(this.statusText)// 获取响应头信息console.log(this.getResponseHeader(‘Content‐Type’)) // 指定响应头console.log(this.getAllResponseHeader()) // 全部响应头// 获取响应体console.log(this.responseText) // 文本形式console.log(this.responseXML) // XML 形式，了解即可不用了}}4、GET 请求通常在一次 GET 请求过程中，参数传递都是通过 URL 地址中的 ? 参数传递。var xhr = new XMLHttpRequest()// GET 请求传递参数通常使用的是问号传参// 这里可以在请求地址后面加上参数，从而传递数据到服务端xhr.open(‘GET’, ‘./delete.php?id=1’)// 一般在 GET 请求时无需设置响应体，可以传 null 或者干脆不传xhr.send(null)xhr.onreadystatechange = function () {if (this.readyState === 4) {console.log(this.responseText)}}// 一般情况下 URL 传递的都是参数性质的数据，而 POST 一般都是业务数据5、POST 请求POST 请求过程中，都是采用请求体承载需要提交的数据。var xhr = new XMLHttpRequest()// open 方法的第一个参数的作用就是设置请求的 methodxhr.open(‘POST’, ‘./add.php’)// 设置请求头中的 Content‐Type 为 application/x‐www‐form‐urlencoded// 标识此次请求的请求体格式为 urlencoded 以便于服务端接收数据xhr.setRequestHeader(‘Content‐Type’, ‘application/x‐www‐form‐urlencoded’)// 需要提交到服务端的数据可以通过 send 方法的参数传递// 格式：key1=value1&key2=value2xhr.send(‘key1=value1&key2=value2’)xhr.onreadystatechange = function () {if (this.readyState === 4) {console.log(this.responseText)}}6、同步与异步同步：一个人在同一个时刻只能做一件事情，在执行一些耗时的操作（不需要看管）不去做别的事，只是等待异步：在执行一些耗时的操作（不需要看管）去做别的事，而不是等待xhr.open() 方法第三个参数要求传入的是一个 bool 值，其作用就是设置此次请求是否采用异步方式执行，默认为 true ，如果需要同步执行可以通过传递 false 实现：console.log(‘before ajax’)var xhr = new XMLHttpRequest()// 默认第三个参数为 true 意味着采用异步方式执行xhr.open(‘GET’, ‘./time.php’, true)xhr.send(null)xhr.onreadystatechange = function () {if (this.readyState === 4) {// 这里的代码最后执行console.log(‘request done’)}}console.log(‘after ajax’)如果采用同步方式执行，则代码会卡死在 xhr.send() 这一步：console.log(‘before ajax’)var xhr = new XMLHttpRequest()// 同步方式xhr.open(‘GET’, ‘./time.php’, false)// 同步方式执行需要先注册事件再调用 send，否则 readystatechange 无法触发xhr.onreadystatechange = function () {if (this.readyState === 4) {// 这里的代码最后执行console.log(‘request done’)}}xhr.send(null)console.log(‘after ajax’)演示同步异步差异。一定在发送请求 send() 之前注册 readystatechange （不管同步或者异步）为了让这个事件可以更加可靠（一定触发），一定是先注册了解同步模式即可，切记不要使用同步模式。至此，我们已经大致了解了 AJAX 的基本 API 。7、响应数据格式提问：如果希望服务端返回一个复杂数据，该如何处理？关心的问题就是服务端发出何种格式的数据，这种格式如何在客户端用 JavaScript 解析。XML一种数据描述手段，基本现在的项目不用了，淘汰的原因：数据冗余太多。JSON也是一种数据描述手段，类似于 JavaScript 字面量方式服务端采用 JSON 格式返回数据，客户端按照 JSON 格式解析数据。不管是 JSON 也好，还是 XML，只是在 AJAX 请求过程中用到，并不代表它们之间有必然的联系，它们只是数据协议罢了兼容方案XMLHttpRequest 在老版本浏览器（IE5/6）中有兼容问题，可以通过另外一种方式代替var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject(‘Microsoft.XMLHTTP’)8、封装AJAX 请求封装函数就可以理解为一个想要做的事情，函数体中约定了这件事情做的过程，直到调用时才开始工作。将函数作为参数传递就像是将一个事情交给别人，这就是委托的概念/*** 发送一个 AJAX 请求* @param {String} method 请求方法* @param {String} url 请求地址* @param {Object} params 请求参数* @param {Function} done 请求完成过后需要做的事情（委托/回调）*/function ajax (method, url, params, done) {// 统一转换为大写便于后续判断method = method.toUpperCase()// 对象形式的参数转换为 urlencoded 格式var pairs = []for (var key in params) {pairs.push(key + ‘=’ + params[key])}var querystring = pairs.join(’&’)var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : newActiveXObject(‘Microsoft.XMLHTTP’)xhr.addEventListener(‘readystatechange’, function () {if (this.readyState !== 4) return// 尝试通过 JSON 格式解析响应体try {done(JSON.parse(this.responseText))} catch (e) {done(this.responseText)}})// 如果是 GET 请求就设置 URL 地址问号参数if (method === ‘GET’) {url += ‘?’ + querystring}xhr.open(method, url)// 如果是 POST 请求就设置请求体var data = nullif (method === ‘POST’) {xhr.setRequestHeader(‘Content‐Type’, ‘application/x‐www‐form‐urlencoded’)data = querystring}xhr.send(data)}ajax(‘get’, ‘./get.php’, { id: 123 }, function (data) {console.log(data)})ajax(‘post’, ‘./post.php’, { foo: ‘posted data’ }, function (data) {console.log(data)})9、jQuery 中的 AJAX$.ajax$.ajax({url: ‘./get.php’,type: ‘get’,dataType: ‘json’,data: { id: 1 },beforeSend: function (xhr) {console.log(‘before send’)},success: function (data) {console.log(data)},error: function (err) {console.log(err)},complete: function () {console.log(‘request completed’)}})常用选项参数介绍：url：请求地址type：请求方法，默认为 getdataType：服务端响应数据类型ajax(‘get’, ‘./get.php’, { id: 123 }, function (data) {console.log(data)})ajax(‘post’, ‘./post.php’, { foo: ‘posted data’ }, function (data) {console.log(data)})$.ajax({url: ‘./get.php’,type: ‘get’,dataType: ‘json’,data: { id: 1 },beforeSend: function (xhr) {console.log(‘before send’)},success: function (data) {console.log(data)},error: function (err) {console.log(err)},complete: function () {console.log(‘request completed’)}})常用选项参数介绍：url：请求地址type：请求方法，默认为 getdataType：服务端响应数据类型contentType：请求体内容类型，默认 application/x-www-form-urlencodeddata：需要传递到服务端的数据，如果 GET 则通过 URL 传递，如果 POST 则通过请求体传递timeout：请求超时时间beforeSend：请求发起之前触发success：请求成功之后触发（响应状态码 200）error：请求失败触发complete：请求完成触发（不管成功与否）10、跨域相关概念同源策略是浏览器的一种安全策略，所谓同源是指域名，协议，端口完全相同，只有同源的地址才可以相互通过AJAX 的方式请求。同源或者不同源说的是两个地址之间的关系，不同源地址之间请求我们称之为跨域请求什么是同源？例如：http://www.example.com/detail… 与一下地址对比JSONPJSON with Padding，是一种借助于 script 标签发送跨域请求的技巧。其原理就是在客户端借助 script 标签请求服务端的一个动态网页（php 文件），服务端的这个动态网页返回一段带有函数调用的 JavaScript 全局函数调用的脚本，将原本需要返回给客户端的数据传递进去。以后绝大多数情况都是采用 JSONP 的手段完成不同源地址之间的跨域请求<script src=“http://api.zce.me/users.php?callback=foo"></script>foo(['我’, ‘是’, ‘你’, ‘原’, ‘本’, ‘需’, ‘要’, ‘的’, ‘数’, ‘据’])总结一下：由于 XMLHttpRequest 无法发送不同源地址之间的跨域请求，所以我们必须要另寻他法，script 这种方案就是我们最终选择的方式，我们把这种方式称之为 JSONP，如果你不了解原理，先记住怎么用，多用一段时间再来看原理。 ...

sendBeacon 刷新/关闭页面之前发送请求

背景：有一个任务非常耗时会消耗后台大量算力，所以在退出页面的时候，要求前端这边发送一个请求来杀死任务。一开始以为这个需求非常简单，就是在进入其他路由前，发送一下请求，杀死一下任务就好了。然而现实狠狠的打了我的脸，因为退出页面的场景不止切换路由退出页面场景：还在本网站，跳到其他路由刷新页面/关闭页面也需要发送请求来杀死任务还在本网站，跳到其他路由这个比较简单，在Vue中可以通过路由离开的钩子beforeRouteLeave来实现： beforeRouteLeave(to, from, next) { if (任务运行中) { // 发送请求 }else{ next(true) // 用户离开 } }刷新页面/关闭页面的情况：然而在刷新页面的时候，beforeRouteLeave并不会执行，接着想到了下面这两个API.beforeunload和unloadbeforeunload 当浏览器窗口关闭或者刷新时触发:介绍：使用这个API可以阻止页面直接关闭，用户通过点击确定/取消按钮，来决定是否不关闭/刷新当前页面。在 chrome 下长这个样子，你们肯定都见过：如何使用这个 API 的使用非常简单，只要在页面加载的时候监听一下此事件，在需要出现弹窗的时候return 一个可以转化为 true 的值,就可以了。// 页面卸载之前let killTask = false; // 是否杀死任务window.onbeforeunload = e => { if (任务运行 && 对应页面) { killTask = true; return ‘您可能有数据没有保存’; // 在部分浏览器可以修改弹窗标题 } else { killTask = false; } // 没有return一个可以转化为true的值就不会出现弹窗};出现此弹窗的浏览器行为：以下行为是基于 chorme：焦点：你没有点击取消/确定之前，焦点会一直在此弹窗上你无法在出现弹窗的页面上执行任何操作在其他页面也只能执行简单的点击操作，弹窗还是存在页面中间，无法使用键盘，键盘：键盘被绑定在弹窗上，只能通过按键Esc、Enter来执行取消/确定操作弹窗不是页面的 dom，是浏览器的行为用户取消/确定，没有回调 API，无法得知弹窗标题：chrome 中刷新页面的标题：重新加载此网站?chrome 中关闭页面的标题：离开此网站?现在大部分浏览器都不允许修改弹窗的标题，这个是为了安全考虑，来保证用户不受到错误信息的误导，迷茫：一开始我以为既然可以拦截到用户的刷新/关闭页面的操作，出现了上面那个弹窗，这个需求就已经做完了的时候。然后发现，浏览器竟然没有提供用户点击确定/取消刷新页面的回调。到这里我陷入了迷茫，盯着beforeunload这个 API 思考了起了人生的意义(其实是在发呆)，盯着盯着，从beforeunload的before我也就想到了unload这个 API。瞬间又燃起了斗志，何不试试这个unload？unload当页面正在被卸载的时候触发该事件介绍当页面正在被卸载的时候触发该事件，该事件不可取消，为不可逆操作。使用直接监听该事件就可以了。window.onunload = e => {}结合需求:killTask为beforeunload时定义的变量，每次进入回调，都会给killTask赋值，使用这个值就可以判断什么时候可以发送请求杀死任务。window.onunload = e => { if (killTask && 对应页面) { // 发送请求 }};到这里大家肯定以为已经做出来了该需求，事实上，并没有！无法发送异步请求我使用的是axios来发送请求，请求发出去了，但是被取消了，服务器那边根本没有收到请求，如下。经过一顿分析:发现是axios请求是异步的问题，谷歌之后发现axios不支持同步的请求最后使用原生的XMLHttpRequest对象，让请求同步大功告成！实际上，上面才是我第一次要发的内容，而下面更好的解决方法！缺陷与更好的建议：当我把这篇文章发布在公众号上，被奇舞周刊转载了，上面一些大佬给我提了一些建议。研究了一下，结果…好吧！我承认我是菜鸡。hey 不过这正是我写博客的收获之一，分享经验，收获知识！性能缺陷：XHR同步请求会阻碍页面卸载，如果是刷新/跳转页面的话，页面重新展示速度会变慢，导致性能问题。毕竟向网络发送请求并获得响应可能会超级慢，有可能是用户网络环境比较差，又或者是服务器挂了，请求一直没返回回来…基于性能问题，大佬们推荐使用Beacon代替XHR，然后经过一番搜索…Beacon APIBeacon API用于将少量数据通过post请求发送到服务器。Beacon是非阻塞请求，不需要响应完美解决性能缺陷问题：浏览器将 Beacon 请求排队让它在空闲的时候执行并立即返回控制它在unload状态下也可以异步发送，不阻塞页面刷新/跳转等操作。所以Beacon可以完美解决上面提到的因XHR同步请求阻塞而引起的性能缺陷问题。使用：navigator.sendBeacon()完整API：let result = navigator.sendBeacon(url, data);Beacon是挂在navigator下面的，上面就是它的完整API。result是一个布尔值，代表这次发送请求的结果:如果浏览器接受并且把请求排队了则返回 tru如果在这个过程中出现了问题就返回 falsenavigator.sendBeacon接受两个参数：url: 请求的 URL。请求是 POST 请求。data: 要发送的数据。数据类型可以是：ArrayBufferView, Blob, FormData，Sting。来看一个用FormData来传递数据的栗子，你就懂了：// 创建一个新的 FormData 并添加一个键值对let data = new FormData();data.append(‘hello’, ‘world’);let result = navigator.sendBeacon(’./src’, data);if (result) { console.log(‘请求成功排队等待执行’);} else { console.log(‘失败’);}浏览器支持：浏览器支持：Edge：14+，Firefox：31+，Chrome：39+，Opera：26+，IE：不支持。虽然现在浏览器对sendBeacon的支持很好，我们对其做一下兼容性处理也是有必要的：if (navigator.sendBeacon) { // Beacon 代码} else { // 回退到 XHR同步请求或者不做处理}web wroker中使用Beacon因为Beacon是挂在navigator 下面，而web worker也有navigator ，去找了一下，真的给我找到了。这儿有一个MDN提供的栗子)，可以点进去看一下。PS：对web worker不熟悉的同学可以看我这篇文章Beacon其他相关客户端优化：可以将 Beacon 请求合并到其他请求上，一同处理, 尤其在移动环境下。Beacon更多的情况是用于做前端埋点，监控用户活动，它的初衷也基于此。小结本文总共讲了三个API，beforeunload、unload和Beacon，Beacon这个API估计知道的人比较少，以后遇到前端埋点和页面卸载前发送请求的需求，记得使用这三个API。以上2019.02.19博客、前端积累文档、公众号、GitHub参考资料：MDN页面跳转时，统计数据丢失问题探讨使用 Web Beacon API 记录活动 ...

Ajax请求服务端时可以新建cookie吗

比如第一次通过api请求服务端，在服务端新建了cookie，第二次重新请求时能获取到吗？

原生js实现Ajax，JSONP

Ajax内部的几个执行步骤创建XMLHttpRequest对象(new XMLHttpRequest())设置请求头(setRequestHeader)连接服务器(open())设置回调(onreadyStateChange)发送数据(send())在回调函数中获取数据JSONP利用script标签可以跨域请求资源解决跨域问题。详细解释可以看彻底弄懂跨域问题前端代码/** 原生js实现Ajax* */function Ajax(params) { params = params || {}; params.data = params.data || {}; var _json = params.jsonp ? jsonp(params): json(params); // 判断是json还是jsonp function json(params) { // 普通请求 params.type = (params.type || ‘GET’).toUpperCase(); // 设置请求默认类型 var urlData = formatParams(params.data); // 对数据进行格式化 var xhr = null; // 对xhr进行初始化 if (window.XMLHttpRequest) { xhr = new window.XMLHttpRequest(); } else { xhr = new ActiveXObject(‘Microsoft.XMLHTTP’); } var headers = params.headers || {}; if (params.type === ‘GET’) { xhr.open(params.type, params.url + ‘?’ + urlData, true); setHeaders(xhr, headers); xhr.send(null); } else { xhr.open(params.type, params.url, true); setHeaders(xhr, headers); xhr.send(JSON.stringify(params.data)); } xhr.onreadystatechange = function () { if (xhr.readyState === 4) { var status = xhr.status; if (status >= 200 && status < 300) { var response = ‘’; var type = xhr.getResponseHeader(‘Content-Type’); if (type.indexOf(‘xml’) !== -1 && xhr.responseXML) { // xml格式 response = xhr.responseXML; } else if (type.indexOf(‘application/json’) !== -1) { // JSON格式 response = JSON.parse(xhr.responseText); } else { response = xhr.responseText; // 字符串格式 } params.success && params.success(response); } else { params.error && params.error(status); } } } } function jsonp(params) { var callbackName = params.jsonp; // 回调函数名 var head = document.getElementsByTagName(‘head’)[0]; params.data[‘callback’] = callbackName; var data = formatParams(params.data); var script = document.createElement(‘script’); head.appendChild(script); // 创建jsonp函数，成功后自动让success函数调用，在自动删除 window[callbackName] = function (json) { // 设置回调，获取后台数据后才执行 head.removeChild(script); clearTimeout(script.timer); window[callbackName] = null; params.success && params.success(json); }; script.src = params.url + ‘?’ + data; // 设置src的时候才开始向后台请求数据 if (params.time) { // 限定时间 script.timer = setTimeout(function () { window[callbackName] = null; head.removeChild(script); params.error && params.error({ message: ‘超时’ }) }, params.time) } } function formatParams(data) { // 使用 encodeURIComponent 对 URI的某部分编码 var arr = []; for (var key in data) { arr.push(encodeURIComponent(key) + ‘=’ + encodeURIComponent(data[key])); } // 添加随机数，防止缓存 arr.push(‘v=’ + random()); return arr.join(’&’); } function random() { return Math.floor(Math.random() * 10000 + 500); } function setHeaders(xhr, headers) { for (var key in headers) { xhr.setRequestHeader(key, headers[key]); } }}使用方法不用jsonp请求 Ajax({ url: ‘后端接口’, type: ‘POST’, headers: { ‘Content-Type’: ‘application/json’, token: ‘xxx’ }, success(res) { console.log(res); }, error(status) { console.log(some error status = ${status}); }})jsonp请求 Ajax({ url: ‘http://localhost:8080’, headers: { ‘Content-Type’: ‘application/json’ }, jsonp: ‘getUser’, time: 2000, success(res) { console.log(res); }, error(status) { console.log(some error status = ${status.msg}); }})jsonp后台配置代码var querystring = require(‘querystring’);var http = require(‘http’);var server = http.createServer();server.on(‘request’, function(req, res) { var params = querystring.parse(req.url.split(’?’)[1]); var fn = params.callback; // jsonp返回设置 res.writeHead(200, { ‘Content-Type’: ’text/javascript’ }); var data = { user: ‘xbc’, password: ‘123456’ } res.write(fn + ‘(’ + JSON.stringify(data) + ‘)’); res.end();});server.listen(‘8080’);console.log(‘Server is running at port 8080…’);参考文章原生 JavaScript 实现 AJAX、JSONPajax 快速入门 ...

Ajax同步和异步的区别

AJAX中根据async的值不同分为同步（async = false）和异步（async = true）两种执行方式；在W3C的教程中推荐使用异步执行；在默认情况下为异步(true)同步和异步有什么不同：异步：在异步模式下，当我们使用AJAX发送完请求后，可能还有代码需要执行。这个时候可能由于种种原因导致服务器还没有响应我们的请求，但是因为我们采用了异步执行方式，所有包含AJAX请求代码的函数中的剩余代码将继续执行。如果我们是将请求结果交由另外一个JS函数去处理的，那么，这个时候就好比两条线程同时执行一样。同步：在同步模式下，当我们使用AJAX发送完请求后，后续还有代码需要执行，我们同样将服务器响应交由另一个JS函数去处理，但是这时的代码执行情况是：在服务器没有响应或者处理响应结果的JS函数还没有处理完成return时，包含请求代码的函数的剩余代码是不能够执行的。就好比单线程一样，请求发出后就进入阻塞状态，知道接触阻塞余下的代码才会继续执行。一般默认值为true，异步。异步请求可以完全不影响用户的体验效果，无论请求的时间长或者短，用户都在专心的操作页面的其他内容，并不会有等待的感觉。如何选择同步或者异步我们在发送AJAX请求后，还需要继续处理服务器的响应结果，如果这时我们使用异步请求模式同时未将结果的处理交由另一个JS函数进行处理。这时就有可能发生这种情况：异步请求的响应还没有到达，函数已经执行完了return语句了，这时将导致return的结果为空字符串。

php原生上拉加载，点击加载更多(jQuery,ajax,mysql)

设计目的一个网站的数据非常多的时候，需要分页，方便浏览，为了方便翻页，那么我们摒弃传统的点击翻页，直接往下拉，不停地自动加载数据，这样就可以方便阅读。设计原理通过ajax向后端接口发起翻页请求，发送页码，后端接收页码，返回json数据，前端jquery解析json并且拼接在原有的数据基础上！代码index.html<!DOCTYPE html><html><head> <meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”> <meta http-equiv=“X-UA-Compatible” content=“IE=edge”> <meta name=“viewport” content=“width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover”> <meta name=“apple-mobile-web-app-capable” content=“yes”> <meta name=“apple-mobile-web-app-status-bar-style” content=“black”> <meta name=“format-detection” content=“telephone=no”> <title>jquery+ajax上拉加载更多</title> <style> {margin:0;padding: 0;} #text p{ width: 80%; padding: 5px 5px; background: #eee; margin:5px auto; } #loadmore{ width: 120px; background: #eee; height: 45px; border-radius: 100px; margin:20px auto; line-height: 45px; text-align: center; cursor: pointer; } #loading{ text-align: center; } </style></head><body> <h3 id=“loading”></h3> <div id=“text”></div> <div id=“loadmore”>点击加载更多</div></body></html><!–引入jquery库–><script type=“text/javascript” src=“http://www.yilingsj.com/skin/yilingsj/js/jquery-1.8.3.min.js"></script><script>// 定义一个变量，等会用来控制多次触发var i=0;$(window).scroll(function(){ //获取滚动时距离浏览器顶部的值　var t=$(this).scrollTop(); //获取当前窗口的高度　var h=$(this).height(); //获取按钮距离浏览器顶部的值　var h1=$(’#loadmore’).offset().top; //用按钮的值-滚动条的值与窗口高度进行比较，如果小时，则表示按钮进入可视区，同时也表示滚动条即将到达底部　if(h1-t<h){ //防止快速下拉时多次触发　if(i==0){ //改变i的值　i=1;　//触发点击事件　$(’#loadmore’).click();　}　}});// 加载初始数据var p = 1;$.ajax({　type:“get”,　url:‘server.php?page=’ + p,　data:{},　dataType:“json”,　success:function(data){ for (var a in data){ $(’#text’).append("<p>"+data[a].resname+"</p>”); $("#loading").remove(); }　i=0; }, error:function(data){　}, beforeSend:function(data){ $(’#loading’).append(“加载中”); }　});// 加载更多$(’#loadmore’).click(function(){ p++;　$.ajax({　type:“get”,　url:‘server.php?page=’ + p,　data:{},　dataType:“json”,　success:function(data){ for (var a in data){ $(’#text’).append("<p>"+data[a].resname+"</p>"); $("#loading").remove(); }　i=0;　}, error:function(data){　$(’#text’).append("<p>"+服务器错误+"</p>");　}, beforeSend:function(data){ $(’#loading’).append(“加载中”); }　});});</script>server.php<?phpheader(“Content-type:application/json”);header(‘Access-Control-Allow-Origin:’);// 连接数据库$con = mysql_connect(“数据库地址”,“数据库账号”,“数据库密码”);if (!$con){die(‘Could not connect: ’ . mysql_error());}mysql_select_db(“数据库名”, $con);mysql_query(“SET NAMES UTF8”);// 每页显示条数$pageLine = 5;// 计算总记录数$ZongPage = mysql_query(“select count(*) from 表名”);// 计算总页数$sum = mysql_fetch_row($ZongPage);$pageCount = ceil($sum[0]/$pageLine); // 定义页码变量@$tmp = $_GET[‘page’]; // 计算分页起始值$num = ($tmp - 1) * $pageLine; // 查询语句$result = mysql_query(“SELECT 字段 FROM 表名 ORDER BY id DESC LIMIT " . $num . “,$pageLine”);//遍历输出$results = array();while ($row = mysql_fetch_assoc($result)) {$results[] = $row;}echo json_encode($results);//分页按钮//上一页$lastpage = $tmp-1;//下一页$nextpage = $tmp+1;//防止翻过界if (@$tmp > $pageCount) { echo “[{"result":"没有了"}]”;}// 关闭数据库连接mysql_close($con);?>DEMO：戳这里作者：TANKING微信：likeyunba520网站：likeyunba.com ...

前端如何通过Nginx代理做到跨域访问API接口

跨域是指a页面想获取b页面资源，如果a、b页面的协议、域名、端口、子域名不同，或是a页面为ip地址，b页面为域名地址，所进行的访问行动都是跨域的，而浏览器为了安全问题一般都限制了跨域访问，也就是不允许跨域请求资源Nginx作为反向代理服务器，就是把http请求转发到另一个或者一些服务器上。通过把本地一个url前缀映射到要跨域访问的web服务器上，就可以实现跨域访问。对于浏览器来说，访问的就是同源服务器上的一个url。而nginx通过检测url前缀，把http请求转发到后面真实的物理服务器一.配置Nginx废话不多说,我们直接打开nginx.conf文件server { listen 8888; server_name 127.0.0.1; location / { proxy_pass http://127.0.0.1:5500; } location /api{ proxy_pass http://ip.taobao.com/; } }配置解释：我们在浏览器中输入 127.0.0.1:8888 自动会转发到 http://127.0.0.1:5500http://127.0.0.1:5500 是本地所指向的地址，类似于vue开的的代理npm run dev 启动的一个地址http://ip.taobao.com/ 是我们要访问的接口地址(淘宝检测ip地址来源的接口)前端ajax的url地址这样写 http://127.0.0.1:8888/api/service/getIpInfo.php?ip=117.89.35.51，访问的url中有api nginx会自动换到所对应的location前端实列代码://新建一个html文件把以下代码放入script标签中$.ajax({ //请求淘宝检测ip地址来源的接口 url:‘http://127.0.0.1:8888/api/service/getIpInfo.php?ip=117.89.35.51’, type:‘get’, success:function(res){ console.log(res) }, error:function(err){ console.log(err) }})启动服务:我是通过vsCode的Go live插件启动了一个127.0.0.1:5500的服务，有很多同学是通过node开启的代理，都一样,然后我们在浏览器中输入127.0.0.1:8888上面nginx所配置打开浏览器network数据返回如下，说明跨域访问成功二.其它跨域解决方案1.jsonp 需要目标服务器配合一个callback函数。2.window.name+iframe 需要目标服务器响应window.name。3.html5的 postMessage+ifrme 这个也是需要目标服务器或者说是目标页面写一个postMessage，主要侧重于前端通讯。4.node.js开启本地代理,类似于vue-cli中的devServer模式,阔以方便开启代理5.CORS 需要服务器设置header ：Access-Control-Allow-Origin。6.Nginx反向代理，可以不用目标服务器配合，需要Nginx服务器，用于请求转发。我个人认为4 、5 、6解决跨域问题在实际开发过程中显得更为重要三.Nginx工具以及参考资料Nginx在线配置生成工具(需要翻墙)如何提高Nginx的性能Nginx常用命令Nginx 配置简述(小胡子哥)

PHP+AJAX实现账号注册和登陆，附可用demo

前言登陆和注册已经是网站的标配了，所以这是我们web开发学习过程中必学的了。其实很容易实现，只需要懂数据库的增删改查，还有if_else的条件语句即可做出来。目录css –Login-Reg.css server –LoginUser.php –RegUser.php –LoginFrom.html–RegForm.html注册RegForm.html<!DOCTYPE html><html><head> <meta charset=“utf-8”> <title>用户注册</title> <link rel=“stylesheet” type=“text/css” href=“css/Login-Reg.css”></head><body> <h2 id=“Reg-text”>用户注册</h2> <div id=“Form-con”> <form id=“form1” onsubmit=“return false” action="##" method=“post”> <input type=“text” name=“username” class=“inputStyle” placeholder=“请输入账号”><br/> <input type=“password” name=“password” class=“inputStyle” placeholder=“请输入密码”><br/> <input type=“password” name=“cpassword” class=“inputStyle” placeholder=“请确认密码”><br/> <input type=“submit” class=“btnStyle” value=“注册” onclick=“RegUser()"> </div> <div id=“Result”></div> </form></body><!– AJAX提交表单 –><script src=“http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type=“text/javascript”> function RegUser() { $.ajax({ type: “POST”,//方法 url: “../server/RegUser.php” ,//表单接收url data: $(’#form1’).serialize(), success: function (data) { //提交成功 var result=document.getElementById(“Result”); result.innerHTML=data[0].result; //注册后跳转 if (data[0].result == “注册成功”) { location.href=“LoginFrom.html”; } }, error : function(data) { //提交失败 var result=document.getElementById(“Result”); result.innerHTML=“连接服务器失败”; } }); } </script></html>RegUser.php<?phpheader(“Content-type:application/json”);// 注册账号验证$username = $_POST[“username”];//获取表单POST过来的用户名$password = $_POST[“password”];//获取表单POST过来的密码$cpassword = $_POST[“cpassword”];//获取表单POST过来的重复密码//表单过滤$user = trim($username);//过滤空格$psw = trim($password);//过滤空格$cpsw = trim($cpassword);//过滤空格//开始判断if($user == "” && $psw == "” && $cpsw == “”){ echo “[{"result":"都还没填呢！"}]”;}else if($user == "" && $psw == “”){ echo “[{"result":"账号和密码都还没填呢"}]”;}else if ($psw == "" && $cpsw == “”) { echo “[{"result":"密码都还没填呢"}]”;}else if($user == "" && $cpsw == “”){ echo “[{"result":"账号和重复密码还没填呢"}]”;}else if ($user == “”) { echo “[{"result":"账号还没填呢"}]”;}else if ($psw == “”) { echo “[{"result":"密码还没填呢"}]”;}else if ($cpsw == “”) { echo “[{"result":"重复密码还没填呢"}]”;}else if ($psw !== $cpsw) { echo “[{"result":"两次输入密码不一样呢"}]”;}else if (strlen($user) < 5){ echo “[{"result":"账号不能小于5位数"}]”;}else if (strlen($psw) < 8){ echo “[{"result":"密码不能小于8位数"}]”;}else if (preg_match(’/^[\x{4e00}-\x{9fa5}]+$/u’, $user)>0){ echo “[{"result":"账号不能为中文"}]”;}else if (preg_match(’/[\x{4e00}-\x{9fa5}]/u’, $user)>0){ echo “[{"result":"账号不能存在中文"}]”;}else if(preg_match("/['.,:;*?~`!@#$%^&+=)(<>{}]|]|[|/|\|"||/",$user)){ echo “[{"result":"账号不能存在特殊符号"}]”;}else{ //生成用户ID，为简单学习，随机生成随机数 $uid = rand(10000,99999); //密码MD5加密 $md5psw = MD5($psw); // 数据库连接 $con = mysql_connect(“localhost”,“root”,“root”); mysql_select_db(“test”, $con); mysql_query(“SET NAMES UTF8”); //查询数据库是否有存在该用户 $exist = mysql_query(“SELECT * FROM userlist WHERE username = ‘$user’”); $exist_result = mysql_num_rows($exist); if($exist_result){ //如果存在该用户 echo “[{"result":"该账号已被注册"}]”; }else{ //插入数据库 mysql_query(“INSERT INTO userlist (username, password, userid) VALUES (’$user’, ‘$md5psw’, ‘$uid’)”); echo “[{"result":"注册成功"}]”; }}?>登陆LoginFrom.html<!DOCTYPE html><html><head> <meta charset=“utf-8”> <title>用户登陆</title> <link rel=“stylesheet” type=“text/css” href=“css/Login-Reg.css”></head><body> <h2 id=“Reg-text”>用户登陆</h2> <div id=“Form-con”> <form id=“form1” onsubmit=“return false” action="##" method=“post”> <input type=“text” name=“username” class=“inputStyle” placeholder=“请输入账号”><br/> <input type=“password” name=“password” class=“inputStyle” placeholder=“请输入密码”><br/> <input type=“submit” class=“btnStyle” value=“登陆” onclick=“LoginUser()"> </div> <div id=“Result”></div> </form></body><!– AJAX提交表单 –><script src=“http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type=“text/javascript”> function LoginUser() { $.ajax({ type: “POST”,//方法 url: “../server/LoginUser.php” ,//表单接收url data: $(’#form1’).serialize(), success: function (data) { var result=document.getElementById(“Result”); //提交成功 result.innerHTML=data[0].result; if (data[0].result == “登陆成功”) { result.innerHTML=“登陆成功”; }else if (data[0].result == “fail”) { result.innerHTML=“登陆失败，账号或密码错误”; } }, error : function(data) { //提交失败的提示词或者其他反馈代码 var result=document.getElementById(“Result”); result.innerHTML=“连接服务器失败”; } }); } </script></html>LoginUser.php<?phpheader(“Content-type:application/json”);// 注册账号验证$username = $_POST[“username”];//获取表单POST过来的用户名$password = $_POST[“password”];//获取表单POST过来的密码//表单过滤$user = trim($username);//过滤空格$psw = trim($password);//过滤空格//开始判断if($user == "” && $psw == “”){ echo “[{"result":"账号和密码都没填呢！"}]”;}else if ($user == “”) { echo “[{"result":"账号还没填呢"}]”;}else if ($psw == “”) { echo “[{"result":"密码还没填呢"}]”;}else{ // 数据库连接 $con = mysql_connect(“localhost”,“root”,“root”); mysql_select_db(“test”, $con); mysql_query(“SET NAMES UTF8”); //校验MD5密码 $md5psw = MD5($psw); //查询数据库账号密码是否一致 $exist = mysql_query(“SELECT * FROM userlist WHERE username = ‘$user’ AND password = ‘$md5psw’”); $exist_result = mysql_num_rows($exist); if($exist_result){ echo “[{"result":"登陆成功"}]”; }else{ echo “[{"result":"fail"}]”; }}?>数据库自增id –id –int(11)用户id –userid – varchar(32)用户名 –username – varchar(32)密码 –password – varchar(32)注册时间 –regtime –timestampdemohttp://www.likeyunba.com/demo…Author：TANKINGweb:http://likeyunba.comWeChat:likeyunba520Date:2019-2-2 ...

ajax是asynchronous javascript and XML的简写1、允许javascript脚本向服务器发起HTTP请求，和解析服务器响应；2、意味着用户单击后，可以不必刷新页面也能取得新数据；3、ajax技术的核心是XMLHttpRequest对象(简称XHR)；

axios-extra 支持并发及自动重试功能的 axios

axios 基于 promise 用于浏览器和 node.js 的 http 客户端;而 axios-extra 扩展了 axios 让它拥有有并发控制以及重试的能力;如果你是一正在使用 axios 只要修改一行代码立即拥有安装npm i axios-extra使用默认最大 10 并发, 0 重试;//const axios = require(‘axios’); const axios = require(‘axios-extra’); //修改一行代码无感使用 axios-extra设置并发数,及重试次数方式一: 用 axios.defaults 修改默认配制const axios = require(‘axios-extra’);axios.defaults.maxConcurrent = 1; //修改并发为1axios.defaults.queueOptions.retry = 2; //修改默认重试次数为2方式二: 用 axios.create(config) 创建新的 axiosconst axios = require(‘axios-extra’);let axios1 = axios.create({ maxConcurrent: 1, //并发为1 queueOptions: { retry: 3, //请求失败时,最多会重试3次 retryIsJump: true //是否立即重试, 否则将在请求队列尾部插入重试请求 }});方式三: 为某一次特殊请求单独设置重试设置config参数的queueOptions属性即可;const axios = require(‘axios-extra’);//本次get请求若不成功,将重试3次axios.get(‘http://xxx’,{ queueOptions: {retry: 3}})axios 的发送请求方法均可使用:axios(config)axios.request(config)axios.get(url[, config])axios.delete(url[, config])axios.head(url[, config])axios.options(url[, config])axios.post(url[, data[, config]])axios.put(url[, data[, config]])axios.patch(url[, data[, config]])补充并发与重试都是基于队列实现的, 默人重试是在队列的最后重新插入请求. retryIsJump 设置为true最会在队列头部插入请求, 实现立即重试更多 queueOptions 配制可参看这里 ...

Ajax上传文件/照片时报错TypeError ：Illegal invocation

问题Ajax上传文件/照片时报错TypeError ：Illegal invocation解决网上搜索问题，错误原因可能有以下几个，依次检查：请求类型有误，如post请求，但在后台设置的是get请求参数有误。如没有传参，或是参数对应不上去File类型的参数被预先处理了检查后发现应该时原因3，故修改代码，设置$.ajax的processData: false：getToken().then( res => { console.log(‘获取七牛云token后上传图片’) if(!res.hasOwnProperty(‘data’)) return // 整理参数 var formData = new FormData() formData.append(’token’, res.data) formData.append(‘file’, file) $.ajax({ url: ‘’, type: ‘POST’, contentType: ‘multipart/form-data’, processData: false, // 增加这一行，不处理参数 data: formData, success: function (result) { console.log(result) } })})参考使用AJAX实现文件上传时Illegal invocation错误jquery ajax报Uncaught TypeError ：Illegal invocation

[转载] $.ajax()详解

前端开发难免会用到 $.ajax()，详细整理下各参数的含义，供以后查询参考。文章整合了《https://www.cnblogs.com/tyler…》和《https://www.cnblogs.com/huyue…》。

[ 造轮子 ] 手动封装 AJAX （三） —— 最终版

导言在开始之前先想一想ajax是怎样的流程首先打开一个连接发送数据返回结果我们要自定义的设置有哪些设置请求方式设置请求头设置返回数据格式返回成功后或失败后我们要做的功能有哪些数据校验统一数据的格式支持文件上传对于传入参数的容错处理经过以上思考基本结构大致成型数据校验数据格式的统一建立连接设置请求头设置返回数据格式发送数据返回成功或失败代码如下class AJAX { constructor({url = “",method = “GET”,data = {},async = true,success,error,resType = “",headers = {}}) { //集中管理传递过来的参数 this.option = {url,method,data,async,success,error,resType,headers}; this.xhr = new XMLHttpRequest(); this.start(); } start() { //数据校验 this.checkOption(); //数据格式的统一 this.initOption(); //建立连接 this.open(); //设置请求头 this.setHeaders(); //设置返回数据格式 this.setResponseType(); //发送数据 this.sendData() //返回成功或失败 this.responseData(); }; }接下来添加校验功能首先url不能是空然后请求头必须是字面量对象格式 {key:value}再有就是一些简单的警告代码如下checkOption() { let {url,async,resType,headers} = this.option; if (url === ‘’) { throw new Error(‘请求地址不能为空’); //打印错误信息，并停止当前进程 //Console.error(‘请求地址为空’); 也可以打印错误信息，但是不能停止当前进程 } if(typeof headers !== ‘object’){ throw new Error(‘设置请求头时请传入 {key:value，key:value…} 的格式’); } if(typeof resType !== ‘string’){ throw new Error(‘设置返回数据格式时请传入字符出串格式’); } if (typeof url !== ‘string’) { //输出警告信息 console.warn(‘当前请求地址不是字符串，现在将其尝试转换为字符串’); } if (async === false && resType != ‘’) { console.warn(‘如果设置了请求方式为同步，即使设置了返回数据格式也不会生效’); }};需要注意的是返回数据格式可以设置这几个值，之后会写一个详细的传参指南接下来是数据的处理首先我们需要保证请求格式，不管传入时是大写还是小写，在我们设置请求格式时要是全部大写还有就是url可能是数字的，需要转换成字符为了方便将 async不是布尔型的转成布尔型，这是什么概念，就是传参时写数字 1 是异步数字 0 是同步将需要发送的内容做一个处理initOption() { let {url,async,method} = this.option; //url不是字符串转换成字符串 if (typeof url !== ‘string’) { try { this.option.url = url.toString(); console.log(转换成功: "${this.option.url}"); } catch (error) { throw new Error(‘url 转换字符串失败’); } } //async不是布尔型转成布尔型 if(typeof async !==‘boolean’){ async == true ? this.option.async = true : this.option.async = false; } //将 post get 转换为大写 this.option.method = method.toUpperCase(); //post和get数据初始化 if(this.option.method != ‘FORMDATA’){// [1] let data = this.option.data; if(typeof data === ‘object’){//[2] if( this.option.method === ‘GET’){ let arr=[]; for(let name in data){ arr.push(${name}=${data[name]});//[3] } let strData=arr.join(’&’);//[4] this.option.data=?${strData};//[5] }else if( this.option.method === ‘POST’){ let formData = new FormData();//[6] for(let key in data){ formData.append(${key},${data[key]}); } this.option.data=formData; } }else if(typeof data === ‘string’ && this.option.method === ‘GET’){//[7] this.option.data=?${data}; } }};这里详细说说对需要发送数据的处理,按照序号来说判断它不是 formData ，也就是说是 GET 和 POST 时我们进行数据处理，是 formData 不进行处理，直接发送，这是为了能够实现文件上传功能判断它是不是 {key:vlue} 这种格式的，是的话解析或拼接，不是的话跳到 [7] 如果是字符串直接加到 url 后边[3] [4] [5] 这里是为了处理成 url?key=value$key=value 这种 url 传参的数据格式[6] 是新建了一个 FormData 对象，是 ajax2.0 里边的，它最主要的可以用 ajax 实现文件上传功能，在这里是为了代码简单打开连接经过之前的数据处理这里只需要判断下是 GET 还是其他方式（post formdata），然后选择对应的连接方式 open(){ let {method,url,async,data} = this.option; if(method === ‘GET’){ this.xhr.open(method,url+data,async); }else{ this.xhr.open(method,url,async); } }设置自定义请求头将传入的参数进行解析，然后设置自定义请求头代码如下setHeaders(){ let headers = this.option.headers; for(let key in headers){ this.xhr.setRequestHeader(${key.toString()},${headers[key].toString()}) } }设置返回数据格式、发送数据由于同步请求时不能设置返回数据格式，所以做下判断发送数据这里，在经过之前的数据处理后只有 GET 方式有所区别，其他两种没有区别（支持 GET POST 以及我自己定义的一种，更多请求方法可自行扩展）setResponseType() { if (this.option.async) { this.xhr.responseType = this.option.resType; }}sendData(){ if(this.option.method == ‘GET’){ this.xhr.send(); }else{ this.xhr.send(this.option.data); }}请求完成后的数据返回请求完成后会返回数据判断 success 以及 error 是不是函数，是的话会将数据返回给 success 或者将错误信息返回给 errorresponseData(){ this.xhr.onload = ()=>{ if(this.xhr.status >= 200 && this.xhr.status < 300 || this.xhr.status === 304){ typeof this.option.success === ‘function’ && this.option.success(this.xhr.response); }else{ typeof this.option.error === ‘function’ && this.option.error(this.xhr.statusText); } }}在实现基本功能后，突然想到 jQuery 的 ajax 是会返回一个 promise 对象，可以同时使用回掉函数，或者使用 then 和 catch 来处理数据因此修改了下传入参数，以及返回数据的处理传参时代码如下//add resolve rejectclass AJAX { constructor({url = “",method = “GET”,data = {},async = true,success,error,resType = “",headers = {},resolve,reject}) { this.option = {url,method,data,async,success,error,resType,headers,resolve,reject}; this.xhr = new XMLHttpRequest(); this.start(); }}返回数据时代码如下responseData(){ this.xhr.onload = ()=>{ if(this.xhr.status >= 200 && this.xhr.status < 300 || this.xhr.status === 304){ typeof this.option.success === ‘function’ && this.option.success(this.xhr.response); this.option.resolve(this.xhr.response);//add }else{ typeof this.option.error === ‘function’ && this.option.error(this.xhr.statusText); this.option.reject(this.xhr.statusText);//add } }}最终代码class AJAX { constructor({url = “",method = “GET”,data = {},async = true,success,error,resType = “",headers = {},resolve,reject}) { this.option = {url,method,data,async,success,error,resType,headers,resolve,reject}; this.xhr = new XMLHttpRequest(); this.start(); } start() { //数据校验 this.checkOption(); //数据格式的统一 this.initOption(); //建立连接 this.open(); //设置请求头 this.setHeaders(); //设置返回数据格式 this.setResponseType(); //发送数据 this.sendData() //返回成功或失败 this.responseData(); }; checkOption() { let {url,async,resType,headers} = this.option; if (url === ‘’) { throw new Error(‘请求地址不能为空’); //打印错误信息，并停止当前进程 //Console.error(‘请求地址为空’); 也可以打印错误信息，但是不能停止当前进程 } if(typeof headers !== ‘object’){ throw new Error(‘设置请求头时请传入 {key:value，key:value…} 的格式’); } if(typeof resType !== ‘string’){ throw new Error(‘设置返回数据格式时请传入字符出串格式’); } // "” 与设置为"text"相同，是默认类型（实际上是 DOMString） // “arraybuffer” 将接收到的数据类型视为一个包含二进制数据的 JavaScript ArrayBuffer // “blob” 将接收到的数据类型视为一个包含二进制数据的 Blob 对象 // “document” 将接收到的数据类型视为一个 HTML Document 或 XML XMLDocument ，这取决于接收到的数据的 MIME 类型 // “json” 将接收到的数据类型视为 JSON 解析得到的 // “text” 将接收到的数据类型视为包含在 DOMString 对象中的文本 if (typeof url !== ‘string’) { //输出警告信息 console.warn(‘当前请求地址不是字符串，现在将其尝试转换为字符串’); } if (async === false && resType != ‘’) { console.warn(‘如果设置了请求方式为同步，即使设置了返回数据格式也不会生效’); } }; initOption() { let {url,async,method} = this.option; //url不是字符串转换成字符串 if (typeof url !== ‘string’) { try { this.option.url = url.toString(); console.log(转换成功: "${this.option.url}"); } catch (error) { throw new Error(‘url 转换字符串失败’); } } //async不是布尔型转成布尔型 if(typeof async !==‘boolean’){ async == true ? this.option.async = true : this.option.async = false; } //将 post get 转换为大写 this.option.method = method.toUpperCase(); //post和get数据初始化 if(this.option.method != ‘FORMDATA’){ let data = this.option.data; if(typeof data === ‘object’){ if( this.option.method === ‘GET’){ let arr=[]; for(let name in data){ arr.push(${name}=${data[name]}); } let strData=arr.join(’&’); this.option.data=?${strData}; }else if( this.option.method === ‘POST’){ let formData = new FormData(); for(let key in data){ formData.append(${key},${data[key]}); } this.option.data=formData; } }else if(typeof data === ‘string’ && this.option.method === ‘GET’){ this.option.data=?${data}; } } }; open(){ let {method,url,async,data} = this.option; if(method === ‘GET’){ this.xhr.open(method,url+data,async); }else{ this.xhr.open(method,url,async); } } setHeaders(){ let headers = this.option.headers; for(let key in headers){ this.xhr.setRequestHeader(${key.toString()},${headers[key].toString()}) } } setResponseType() { if (this.option.async) { this.xhr.responseType = this.option.resType; } } sendData(){ if(this.option.method == ‘GET’){ this.xhr.send(); }else{ this.xhr.send(this.option.data); } } responseData(){ this.xhr.onload = ()=>{ if(this.xhr.status >= 200 && this.xhr.status < 300 || this.xhr.status === 304){ typeof this.option.success === ‘function’ && this.option.success(this.xhr.response); this.option.resolve(this.xhr.response); }else{ typeof this.option.error === ‘function’ && this.option.error(this.xhr.statusText); this.option.reject(this.xhr.statusText); } } } all(promises) { return Promise.all(promises); };}function ajax({url,method,data,async,success,error,resType,headers}){ return new Promise((resolve, reject) => { return new AJAX({url,method,data,async,success,error,resType,headers,resolve,reject}); });}使用时可以将代码复制粘贴到单独的 js 文件然后用 script 标签引入也可以添加一行 export 代码将最后的 ajax 暴露出去使用import 引入具体使用方法用法ajax({ url:‘api/login’, method:‘post’,//支持 GET POST 和我自定义的 FORMDATA ，传入时不区分大小写 data = { name:“yhtx”, id:“1997” },//除了这种还支持字符串 “name=yhtx&id=1997”；以及 formData 数据，在传入formData 数据时请将 method 设置为 FORMDATA async = true,//可以使用数字 1 代替 true ，数字 0 代替 false success(res){ //可以使用回调的形式处理数据也可以使用 then },error(err){ //可以使用回调的形式处理错误也可以使用 catch }, resType = “”,//可以传入 "” “arraybuffer” “blob” “document” “json” “text” headers = { mycookie: “46afqwiocibQEIJfa498./&678” //使用对象的方式传参 }}).then((res)=>{ //可以使用 then 的形式处理数据也可以使用回调函数}).catch((err)=>{ //可以使用 catch 的形式处理数据也可以使用回调函数}) ...

web开发的跨域问题详解

本文由云+社区发表做过 web 开发的同学，应该都遇到过跨域的问题，当我们从一个域名向另一个域名发送 Ajax 请求的时候，打开浏览器控制台就会看到跨域错误，今天我们就来聊聊跨域的问题。1. 浏览器的同源策略同源的定义是：如果两个页面的协议，端口（如果有指定）和域名都相同，则两个页面具有相同的源。同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。2. 跨域错误信息产生的原因为了说明问题，我们可以做如下实验，我们在本地搭建了开发环境，由客户端 http://localhost:3001 向服务器 http://localhost:3000 发送两个请求，一个使用 javascript 异步请求数据，另一个使用 img 标签请求数据，服务器收到请求后，打印接收到请求的日志，如下图所示：客户端发送两个请求服务端打印日志并处理请求代开客户端浏览器的控制台，可以看到发出了两个请求，并且都收到了状态码为 200 的响应，同时控制台报了一个错误，即 xhr 请求报错。由此我们可以知道，之所以产生跨域错误信息，原因有以下三条：浏览器端的限制（服务端收到了请求并正确返回）发送的是 XMLHttpRequest 请求（使用 img 标签发送的请求为 json 类型，并不会报错）请求了不同域的资源只有同时满足了这三个条件，浏览器才会产生跨域错误。3. 解决跨域的思路既然我们知道了跨域错误产生的原因，那么解决思路就很直观了，针对出错的三个原因进行相应的处理即可，相应的解决思路也有三个方向：打破浏览器的限制不发送 XHR 请求解决跨域下文将分别进行阐述。3.1 打破浏览器的限制由上面分析结论可知，之所以出现跨域的错误，实际上是客户端浏览器所做的限制，服务器并未进行限制，因此我们可以通过设置浏览器，使其不进行跨域检查。实际上浏览器也提供了对应的设置选项。以 MacOS 下的 Chrome 浏览器为例，在终端中使用命令open -n /Applications/Google\ Chrome.app/ –args –disable-web-security –user-data-dir=/Users/your-computer-account/MyChromeDevUserData/打开浏览器，即可禁用 Chrome 浏览器的安全检查功能，同时也会禁用跨域安全检查功能，这样再次拿前面的例子进行测试，发现此时不会报错，同时也可以正确拿到服务端返回的数据。禁用浏览器安全检查功能这种方式虽然可以实现跨域，但是需要每个用户都对浏览器进行设置，同时可能导致潜在的安全隐患，正常情况下不实用。但这个例子充分说明了，跨域错误是前端浏览器所做的限制，与后台服务无关。3.2 JSONP实现跨域根据思路2，既然跨域问题产生的原因是因为客户端发送了 Ajax 请求，那么我们打破这个条件即可。具体实现方式就是使用 JSONP 来进行跨域请求。JSONP，是 JSON with Padding 的简称，它是 json 的一种补充使用方式，利用 script 标签来解决跨域问题。JSONP 是非官方协议，他只是前后端一个约定，如果请求参数带有约定的参数，则后台返回 javascript 代码而非 json 数据，返回代码是函数调用形式，函数名即约定值，函数参数即要返回的数据。JSONP 的实现原理如下图所示：JSONP实现原理首先在客户端 js 中定义一个函数（假设名为 handler），然后动态创建一个 script 标签插入页面中，script 标签的 src 属性即要调用的地址，同时，在调用的 url 中加入一个服务端约定的参数（假设名为 callback，参数值为已定义的函数名 handler），服务端收到请求，如果发现请求的 url 中带有约定的参数，那么就返回一段函数调用形式的 javascript 代码，该段代码的函数名即为 callback 参数的值 handler，函数的参数即为待返回的数据。这样，客户端拿到返回结果后就会执行 handler 函数，对返回的数据进行处理。我们使用 jquery 向服务端发送一个 JSONP 格式的请求，从浏览器控制台可以看到请求和对应的响应，如下图所示：JSONP请求JSONP请求的响应由上图可以看到，发送JSONP请求时，请求的 Type 为 script 类型而非 xhr 类型，这样就打破了跨域报错的三个必要条件，不会产生跨域错误，同时也验证了服务端返回的数据格式为 javascript 代码调用的形式，其中 Jquery331045** 这一长串函数名是 jquery 自动生成的。由于 JSONP 的原理是使用 script 标签来加载数据，所以它的兼容性很好，但是使用 JSONP 来解决跨域问题存在以下缺陷：只能发送 GET 请求发送的不是 XHR 请求，这样导致 XHR 请求中的很多事件都无法进行处理服务端需要改动3.3 跨域资源共享CORSCORS 是一个 W3C 标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出 XMLHttpRequest 请求，从而克服了 AJAX 只能同源使用的限制。CORS 基于 http 协议关于跨域方面的规定，使用时，客户端浏览器直接异步请求被调用端服务端，在响应头增加响应的字段，告诉浏览器后台允许跨域。跨域错误回到文章开始的这个跨域错误信息，可以看到错误的具体信息是：服务端没有设置Access-Control-Allow-Origin 这个响应头从而导致报错，通过设置 Access-Control-Allow-Origin: * 这个响应头，我们可以解决问题。但是，这种设置能满足所有情况吗？更进一步，使用 CORS 时浏览器如何检查跨域错误？前面我们有讲到，虽然浏览器报错，但是在这之前服务端已经接受了请求，那么，浏览器总是先发出请求后再进行判断吗？下面我们一一讨论。3.3.1 浏览器如何检查跨域错误浏览器检查跨域错误的基本原理是：浏览器检测到 ajax 请求的域与当前域不一致，会在请求头中增加 Origin 字段，然后检查服务端响应头 Access-Control-Allow-Origin，如果不存在或不匹配，则报跨域错误。浏览器检查跨域错误原理3.3.2 浏览器总是先发出请求，然后根据是否有 Access-Control-Allow-Origin 响应头来判断吗答案是，对于简单请求，是；而对于非简单请求，不是。非简单请求的情况下，浏览器并不是直接请求所需资源，而是会先发出一个预检请求，预检请求通过后才会对所需资源进行请求。非简单请求预检请求这里涉及到的简单请求和非简单请求的概念，那么简单请求和非简单请求有什么区别呢？MDN 对非简单请求进行了定义，满足下列条件之一，即为非简单请求：使用了下列 HTTP 方法：PUT、DELETE、CONNECT、OPTIONS、TRACE、PATCH使用了除以下首部之外的其他首部：Accept、Accept-Language、Content-Language、Content-TypeContent-Type首部的值不属于下列其中一个： application/x-www-form-urlencoded、 multipart/form-data、 text/plain请求中的 XMLHttpRequestUpload 对象注册了任意多个事件监听器请求中使用了ReadableStream对象简单来说，除了我们平时使用最多的 GET 和 POST 方法，以及最常使用的 Accept、Accept-Language、Content-Language 和类型为 application/x-www-form-urlencoded、 multipart/form-data、 text/plain 的 Content-Type 请求头，其他基本都是非简单请求。对于这些非简单请求，浏览器会发出两个请求，第一个为 OPTIONS 遇见请求，遇见请求的响应检查通过后才会发出对资源的请求。非简单请求过程生产环境下，如果需要发送非简单跨域请求，每次两个请求会增加响应时间，为此，W3C 标准中增加了另一个响应头 Access-Control-Max-Age 参数，该响应头表明了对于非简单请求的预检请求浏览器的缓存时间，在缓存有效期内，非简单请求可以不发送预检请求，另外，实际开发中，可以在服务端设置接收到的请求方法是 OPTIONS 时，直接返回 200，这样也能加快响应。3.3.3 设置 Access-Control-Allow-Origin: * 就行吗带cookie的跨域当我们需要发送带 cookie 的请求时，Access-Control-Allow-Origin 直接设置为通配符 * 时是无法通过浏览器的检查的，此时该响应头的值必须与发出请求的域完全匹配才行，另外，还需要设置 Access-Control-Allow-Credentials 响应头的值为 true，表示支持带 cookie 的跨域请求。3.3.4 CORS请求头和响应头总结请求头：Origin：浏览器发出 Ajax 跨域请求之前会添加此头部，值为发送请求的域Access-Control-Request-Method：使用了除 GET、POST 请求方法之外的方法，浏览器会添加此头部，值为当前请求方法Access-Control-Request-Headers：使用了自定义头部或除了Accept、Accept-Language、Content-Language、Content-Type 之外的头部，浏览器会添加此头部，值为当前的请求方法响应头：Access-Control-Allow-Origin：表示服务端允许哪些域请求资源Access-Control-Allow-Methods：当客户端包含 Access-Control-Request-Method 请求头时，服务端需要响应该头部，值通常由 Reauest 的 header 中 Access-Control-Request-Method 取得Access-Control-Allow-Headers：当客户端包含 Access-Control-Request-Headers 请求头时，服务端需要响应该头部，值通常由 Reauest 的 header 中 Access-Control-Request-Headers 取得Access-Control-Expose-Headers：指出客户端通过 XHR 对象的 getResponseHeaders 方法可以获取的响应头有哪些Access-Control-Allow-Credentials：允许带 cookie 的跨域请求Access-Control-Max-Age：预检请求的缓存时间4. 总结本文介绍了跨域的原因，重点介绍了使用 JSONP 和 CORS 解决跨域问题的方法。除此之外，实际开发中还其他各种解决跨域问题的思路，本质上，这些方法都是打破跨域错误的三个条件，大家可以自行查资料了解一下。此文已由作者授权腾讯云+社区在各渠道发布 ...

[ 造轮子 ] 手动封装 AJAX （二） —— ES6 版

相比前一版本除了使用 ES6 与法外还有以下改动现在不需要按顺序输入参数会针对 GET 和 POST 做不同的数据处理可以自定义设置请求头增加了参数数据类型的判断增加了调用代码示例ajax({ url:‘1.json’, method:‘post’, resType:‘json’, headers:{ id:465, name:123, key:798 }, data:{ name: “yhtx”, id: “1997” }, success(res){ console.log(res); }, error(){ console.log(’error’) }})调用效果图核心代码没有多少变化，因为只有这一种使用方法//不支持低版本浏览器const ajax = ({url,method=“GET”,data={}, async = true ,success,error,resType="",headers={}})=>{ //错误判断 url为必填项 if(!url || url === ‘’){ throw new Error(‘请求地址不能为空’); } //变量声明 let dataArr = []; let dataStr = “”; let xhr = new XMLHttpRequest();//不兼容低版本浏览器 let formData = new FormData(); //将小写转换成大写 method = method.toUpperCase(); //初始化data switch (method){ case ‘POST’: for(let key in data){ formData.append(${key},${headers[key]});//将data转换成 FormData 对象的字段 } break; case ‘GET’: for(let key in data){ dataArr.push(${encodeURIComponent(key)}=${encodeURIComponent(data[key])}); } strData=dataArr.join(’&’); break; } //设置返回数据格式 if(typeof async === ‘boolean’ && async){//如果设置了同步就不能设置返回数据格式 if(typeof resType === ‘string’){ xhr.responseType = resType; // 在不设置responseType的时候默认为 text }else{ throw new Error(‘设置返回数据格式时，请使用字符串类型’); } } //发起请求 switch (method){ case ‘POST’: xhr.open(method , url , async); break; case ‘GET’: xhr.open(method , ${url}?${strData} , async); break; } //设置请求头必须在 xhr.open() 后才可以 //判断是否设置 if(typeof headers === ‘object’ && Object.keys(headers).length !== 0){ //循环 headers 设置请求头 for(let key in headers){ xhr.setRequestHeader(${key},${headers[key]}); // xhr.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”); } //console.log(Object.keys(headers));//返回一个数组，数组成员是对象中所有的键 //console.log(Object.values(headers));//返回一个数组，数组成员是对象中所有的值 } xhr.send(formData);//发送数据 //监听状态 xhr.onreadystatechange = ()=>{ if(xhr.readyState === 4){ let res = xhr.response; if(xhr.status >= 200 && xhr.status < 300 || xhr.status === 304){ typeof success === ‘function’ && success(res); }else{ typeof error === ‘function’ && error(res); } } }}ajax({ url:‘1.json’, method:‘post’, resType:‘json’, headers:{ id:465, name:123, key:798 }, data:{ name: “yhtx”, id: “1997” }, success(res){ console.log(res); }, error(){ console.log(’error’) }}) ...

[ 造轮子 ] 手动封装 AJAX （一） —— 基础版

关于 AJAX 相信都用过，自己动手封装的也肯定有不少，但应该都只是简单的可以请求，不能设置同步异步以及返回的数据格式兼容低版本 IE5、IE6可以使用 get 和 post 请求数据可以设置请求头需要的思路以及语法都有了，需要小伙伴自己拓展哦可以设置返回数据格式，不设置为默认get 请求的数据拼接我没写，有需要的可以自己加之后会有 ES6 语法的封装敬请期待注：代码使用 ES5 语法，我写的这个版本的传参只能按照顺序来直接上代码//1.用 ES5 写 ajaxvar ajax = function (url,method,data,async,success,error,resType) { //设置变量默认值 method = method || “GET”; async = async || true; data = data || “”; resType = resType || “”; //数据校验 if(!url || url === ‘’){ throw new Error(‘url不能为空’);//throw 用来抛出异常 } if(method===“GET” && data != “”){ throw new Error(‘请将get请求参数写在url里’);//由于时间不太够不再写参数拼接，有兴趣的小伙伴可以自己加参数拼接功能 } //将小写全部转换为大写 method = method.toUpperCase(); //判断是否是低版本 IE if (window.XMLHttpRequest) { //是否支持XMLHttpRequsest var xhr = new XMLHttpRequest(); } else { //低版本 IE var xhr = new ActiveXObject(“Microsft.XMLHTTP”); } //xmlhttp.open(method,url,async) 请求类型请求地址是否异步 xhr.open(method, url, async); //设置请求头 //判断是否设置 //循环 headers 设置请求头 // xhr.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”); //设置返回数据格式 if(async){//如果设置了同步就不能设置返回数据格式 xhr.responseType = resType; // 在不设置responseType的时候默认为 text } //send(data) 将请求发送到服务器。 data仅用于post xhr.send(data); xhr.onreadystatechange = function () { if (xhr.readyState == 4) { var res = xhr.response; if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) { success && success(res); } else { error && error(res); } } }}//url,method,data,async,success,error,resTypeajax(“1.json”,“GET”,"",true,function(res){console.log(res);},function(error){console.log(error);},‘json’);请求的 json 文件内容{ “name”: “yhtx1997”, “text”: “恭喜你测试成功！！！"}调用效果图 ...

CORS 理解（不要那么多术语）

摘要谈到跨域，不论前端还是后端，多少有点谈虎色变，面试中也常会问到这些问题，浏览器和服务器端到底怎么做才能跨域，他们都做了什么？同源 vs 跨域同源，字面意义是相同的源头，即同一个web服务器（比如tomcat启动的一个实例），好比一个家庭；跨域就是从一个web服务器向另一个服务器发送或获取数据，好比去邻居家拿东西。之所以要做跨域限制，是为了安全，你不能从邻居家直接拿吧，总得问过人家。那么怎么来判断同源？就看一个web服务器的根本三要素：协议、web服务器域名、端口号。比如：当前页面的地址是http://myhost.com:8080/index,源就是http://myhost.com:8080,当新请求的协议、域名、端口号与之完全一致即是同源，否则是跨域。对于下面发送的请求，浏览器的判决如下：http://www.myhost.com:8080/users 跨域 -> 域名必须完全一致https://myhost.com:8080/users 跨域 -> 协议必须一致https://myhost.com:9000/users 跨域 -> 端口必须一致https://myhost.com/users 跨域 -> 端口必须一致(没有端口也是不一致）https://myhost.com:8080/profile/users 同源跨域时的动作浏览器端假设我们点击一个按钮去获取数据，获取数据的请求准备从浏览器发出，这时浏览器先会检测这条请求是同源还是跨域，也就是与按钮所在页面的地址是同源还是跨域，如果是同源，好说，直接发送出去；如果是跨域的请求，那就得hold住先，浏览器会在请求的http header中加上一个Origin字段，标明这个请求是从哪里发出来的，例如: Origin:http://neighbour.com:9000,这样服务器端好辨识是自己家人来取东西，还是隔壁老王来借东西了。那些做检测、加header字段等事情全是浏览器做，对于前端开发者来说，什么事都不用干，ajax请求平时怎么发送，跨域时还怎么发送。可见，跨域对于前端没影响，关键在于服务器端。服务器端每个web服务器就像一个家庭。好邻居要吃螃蟹来借点醋，这没问题；坏邻居家有醋要来借点螃蟹，这不干。服务器收到请求会给与响应，响应的header里写明跨域的配置信息，告诉浏览器，它允许哪些域名发来的请求访问，哪些method可以执行。浏览器收到响应后自动判断能不能真正执行请求。假设服务器域名是http://rich.com:8080，它收到了一个从http://neighbour.com:9000发来的请求http://rich.com:9000/borrow-vinegar，服务器响应它，在响应中写明本服务器支持哪些域名可以访问，哪些method可以执行，浏览器收到后做匹配，再判定。那么，服务器有哪些判定的规则呢？是否允许跨域的判定一个支持CORS的web服务器，有如下的判定字段，他们会在响应的header中写明Access-Control-Allow-Origin：允许跨域的Origin列表Access-Control-Allow-Methods：允许跨域的方法列表Access-Control-Allow-Headers：允许跨域的Header列表Access-Control-Expose-Headers：允许暴露给JavaScript代码的Header列表Access-Control-Max-Age：最大的浏览器缓存时间，单位为s其中Access-Control-Allow-Origin（访问控制之允许的源）,在响应的http header中必须有的，表示允许访问本服务器的源头Origin（域名），可以是特定的域名列表，用逗号分隔，也可以是通配符 *，表示支持任意域名的访问。除了限定源头Origin，还会限制请求的方法Method，Header。如，如果服务器设定Access-Control-Allow-Methods:GET，那么跨域的POST请求无法在这个服务器执行。总流程页面发送请求浏览器根据同源策略做出判定，如果是同源请求，直接发送出去；如果是跨域请求，在HTTP HEADER加上Origin字段，或是先发送一次预检请求(preflight)。服务器接收请求，根据自身跨域的配置（如允许哪些域名，什么样的Method访问），返回文件头。若未配置过任何允许跨域，则文件头里不包含Access-Control-Allow-origin字段，若配置过域名，则返回Access-Control-Allow-origin+ 对应配置规则里的域名的方式。浏览器接收到响应，根据响应头里的`Access-Control-Allow-origin字段做匹配，如果没有这个字段，说明不匹配；如果有，将字段内容和当前域名做比对。如匹配，则可以发送请求。跨域的请求形式跨域的请求分两种，一种是简单请求，一种是非简单请求（废话）。简单请求，方法仅限于 HEAD,GET或POST，且Header的字段不超过以下字段：HeadeAcceptAccept-LanguageContent-LanguageLast-Event-IDContent-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain （没有application/json, 说明如果发送JSON格式的body请求数据是一个非简单请求)非简单请求就是其他请求简单请求浏览器会直接在请求的Header加上Origin字段再发送；非简单请求浏览器则会先发送一次预检请求，根据预检请求的结果，决定是否正式发送请求。详情可以访问阮一峰的日志：跨域资源共享 CORS 详解

PC端微信内置浏览器vue axios没发出去请求

PC端微信内置浏览器vue axios没发出去请求，仅做记录今天测试同学测活动的时候在windows下面的微信内邮件扫描二维码竟然使用内置浏览器测了起来。还有这种骚操作??? 之前的测试从来没测过这个浏览器,据说是腾讯使用的比较老的chrome内核果然有问题。通过抓包得知请求都没发出去，于是我就在axios里面一步一步手动做console 通过变量写入到页面最后拦截器里面看到了includes，随便不抱希望的改了一下，没想到请求发出去了，这么说来应该是babel的版本没有转换includes导致的，也有可能是转换了微信浏览器还是不支持。最终自己重写了includes，得以解决

状态码为200时 jQuery ajax报错

问题现象HTTP 状态码为 200 OK 时， jquery ajax报错2. 问题原因jquery ajax的dataType字段包含：json, 但是服务端返回的数据不是规范的json格式，导致jquery解析json字符串报错，最终导致ajax报错。jQuery ajax 官方文档上说明：“json”: Evaluates the response as JSON and returns a JavaScript object. Cross-domain “json” requests are converted to “jsonp” unless the request includes jsonp: false in its request options. The JSON data is parsed in a strict manner; any malformed JSON is rejected and a parse error is thrown. As of jQuery 1.9, an empty response is also rejected; the server should return a response of null or {} instead. (See json.org for more information on proper JSON formatting.)设置dataType为json时，jquery就会去解析响应体为JavaScript对象。跨域的json请求会被转化成jsonp, 除非设置了jsonp: false。JSON数据会以严格模式去解析，任何不规范的JSON字符串都会解析异常并抛出错误。从jQuery 1.9起，一个空的响应也会被抛出异常。服务端应该返回一个null或者{}去代替空响应。参考json.org, 查看更多内容3. 解决方案这个问题的原因有两个。后端返回的json数据格式不规范HTTP状态码为200，但是返回空的响应所以后端在返回结果时，不要使用空的响应，也不应该去手动拼接JSON字符串，而应该交给响应的库来实现JSON序列化字符串工作。方案1：如果后端确定响应体中不返回数据，那么就把状态码设置为204，而不是200。状态码为204时，jQuery就知道响应体中没有数据，也不需要去解析。我一直逼着后端同事这么做。方案2：如果后端接口想返回200，那么请返回一个null或者{}去代替空响应方案3：别用jQuery的ajax，换个其他的库试试4. 参考Ajax request returns 200 OK, but an error event is fired instead of successjQuery.ajax

只知道ajax？你已经out了

欢迎大家前往腾讯云+社区，获取更多腾讯海量技术实践干货哦~本文由前端林子发表于云+社区专栏随着前端技术的发展，请求服务器数据的方法早已不局限于ajax、jQuery的ajax方法。各种js库已如雨后春笋一般，蓬勃发展，本文主要想介绍其中的axios和fetch。0.引入ajax（Asynchronous JavaScript and XML–异步JavaScript 和 XML），是一种客户端向服务器请求数据的方式，并且不需要去刷新整个页面；它依赖的是XMLHttpRequest对象。在我之前的文章中，介绍过ajax的创建过程，可以移步这次，我们聊聊ajax的创建过程。当然项目中我们一般没有直接使用原生的ajax，而是使用javascript的各种库，例如jQuery。jQuery对原生的XHR对象进行了封装，还增添了对JSONP的支持，且经过多年维护，各种文档资料非常丰富，非常适合学习和上手。不过随着前端技术的快速发展，react、vue框架的兴起，XHR对象都有了替代的方案（fetch）。另外如果为了要使用$.ajax方法，就导入整个jQuery这个大而全的库，也未免显得臃肿了些。所以本文将介绍两个目前常用的获取服务器数据的js库：axios和fetch。1.axios是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。随着 vuejs 作者尤雨溪发布消息，不再继续维护vue-resource,并推荐大家使用 axios 开始，axios 进入了很多人的目光。axios本质也是对原生的XHR的封装，不过它是Promise 的实现版本，符合最新的ES规范，axios的几条特性：(1)从浏览器中创建XHR；(2)从node.js创建http请求；(3)支持Promise API；(4)客户端支持防御CSRF(5)提供了一些并发请求的接口使用npm安装： npm install axios示例–执行GET请求：//axiosaxios.get(’/user’, { params: { ID: 12345 }}).then(function (response) { console.log(response);}).catch(function (error) { console.log(error);});axios的优点：体积较小、使用简单、还可以执行多个并发请求，并且可以直接得到返回结果，不会像fetch需要自己去转换，个人还是比较喜欢使用axios。2.fetchfetch API脱离了XHR，是基于Promise设计。旧浏览器不支持Promise，需要使用polyfill es6-promise。2.1 使用使用npm安装：npm install whatwg-fetch –save示例–执行GET请求：//use ‘whatwg-fetch’import ‘whatwg-fetch’var result = fetch(url, { credentials: ‘include’,//跨域请求带上cookie headers: { ‘Accept’: ‘application/json, text/plain, /’ }//设置http请求的头部信息 }).then(res => { return res.text() //将请求来的数据转化成文本形式 // return res.json() //将数据转换成 json格式}).then(text => { console.log(text)}).catch(e => { throw (e)})可以在这个代码的基础上，增加一些操作，比如说在对请求数据处理前，先检查下返回结果的状态。对状态非200的结果，增加对应状态码的错误提示；在得到请求数据后，转换成需要的文本格式，或者json格式；另外，还可以对转换后的数据进行进一步的处理，比如请求的数据返回的是下划线类型的数据，可以处理成驼峰形式。2.2 fetch的优点及需要注意的地方为什么要使用fetch呢？直接使用jQuery和axios也能满足我们的开发需要。看了些文章，提及到使用fetch的好处：脱离的XHR，是ES规范里新的实现方式，支持async/await；更加底层，提供了丰富的API(request，response)；符合关注分离，没有将输入、输出和用事件来跟踪的状态混杂在一个对象里；更好更方便的写法；需要注意的是：兼容性；当服务器返回400、500等错误码时并不会reject，只有网络错误等导致请求不能完成时，fetch才会被reject；fetch不支持abort，不支持超时控制，使用setTimeout及Promise.reject的实现的超时控制，并不能阻止请求过程继续在后台运行，造成了流量的浪费；fetch没有办法原生监测请求的进度，而XHR可以；fetch跨域请求时，默认不会带cookie，如果需要带cookie，则要指定:credentials:’include’，例如：var result = fetch(url, { credentials: ‘include’,});3.小结本文简单地分别介绍了axios和fetch的使用方法和特点。如果要详细了解fetch的应用，推荐阅读 MDN Fetch 教程和WHATWG Fetch 规范。如有问题，欢迎指正。相关阅读【每日课程推荐】机器学习实战！快速入门在线广告业务及CTR相应知识 ...