一、了解ajax
1.理解
Ajax，是 Asynchronous JavaScript + XML 的简写。这种技术能够向服务器请求额外的数据而无须卸载页面(即刷新)，会带来更好的用户体验。一时间，席卷全球
Ajax：异步无刷新技术
2.核心XMLHttpRequest对象
1)获取xhr对象：var xhr = new XMLHttpRequest();
onreadystatechange 监听readystate值变化的事件
readystate 数据响应的响应
0=未初始化
1=已经调用open方法，但未调用send方法
2=调用send方法，但未开始响应
3=响应部分响应
4=完全响应数据，且可以使用
status 响应状态码
200=响应成功
500=服务器异常（报错）
404=未找到资源
statusText 状态码的说明
responseText 响应的数据2)Ajax实现流程
**1、创建**XMLHttpRequest对象** **2、打开请求/准备请求** **xhr.open(参数1,参数2,参数3)** **参数1：请求的方式 （GET|POST）** **参数2：请求的路径 （请求地址，如果是GET请求，参数直接拼接在地址栏后面）** **参数3：是否异步 （true|false。默认是true，表示异步）** **3、发送请求** **xhr.send(参数)** **参数：要传递的数据（参数）** **如果是GET请求：send(null);** **如果数POST请求：有参数，则设置参数，无参数则设置为null** **4、接收响应** **如果响应成功，接收数据** **status==200** xhr.responseText**<script type="text/javascript"> // 1、创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); console.log(xhr); // 2、打开请求/准备请求 xhr.open("请求类型GET|POST","请求路径","是否异步true|false") xhr.open("GET","js/data.json",false); // 同步请求 // 3、发送请求 xhr.send(参数) xhr.send(null); // 4、接收响应 xhr.responseText if (xhr.status == 200) { // 如果响应成功，接收数据 console.log(xhr.responseText); } </script>
二、GET和POST
1.GET
<button type="button" onclick="ajaxGet01()">同步请求</button> <button type="button" onclick="ajaxGet02()">异步请求</button> <script type="text/javascript"> /** * GET同步请求 * */ function ajaxGet01(){ //1.创建XMLHttpRequest var xhr=new XMLHttpRequest(); //2.打开请求/准备请求 xhr.open("GET","js/data.json?uname=zhangsan&upwd=1234",false); //3.发送请求 xhr.send(null); //4.接收响应 if(xhr.status==200){ console.log(xhr.responseText); } } /** * GET异步请求 * */ function ajaxGet02(){ //1.创建对象XMLHttpRequest var xhr=new XMLHttpRequest(); //2.打开请求/准备请求 xhr.open("GET","js/data.json?uname=zhangsan&upwd=1234",true); //3.发送请求 xhr.send(null); //4.接收响应 //监听数据是否完全响应 readstate xhr.onreadystatechange=function(){ //判断readstate的值是否为4（数据已经完全响应） if(xhr.readyState==4){ if(xhr.status==200){ console.log(xhr.responseText); }else{ console.log("失败状态码："+xhr.status+",错误原因："+xhr.statusText); } } } } /** * 封装GET请求 * * */ var obj = { url:"js/data.json?aa=1", // 请求路径 async:true, // 是否异步 data:{ // 请求的参数数据 uname=zhangsan&upwd=1234 uname:"zhangsan", upwd:"1234" } } // 调用ajax的get请求 ajaxGet(obj); /** * 封装GET请求 */ function ajaxGet(obj) { // 默认GET请求 // 1、创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); // 得到请求的参数 uname=zhangsan&upwd=1234 var params = formatParams(obj.data); // 判断参数是否为空，不为空则拼接到地址后面 if (params != null) { obj.url += (obj.url).indexOf("?") != -1 ? "&" + params : "?" + params; } // 2、打开请求/准备请求 xhr.open("GET",obj.url,obj.async); // 3、发送请求 xhr.send(null); // 4、接收响应 // 判断是否是异步请求 if (obj.async) { // 异步请求 // 监听数据是否完全响应 readystate xhr.onreadystatechange = function(){ // 判断readyState的值是否为4（数据已经完全响应） if (xhr.readyState == 4) { // 4、接收响应 callback(); } } } else { // 同步请求 // 4、接收响应 callback(); } /** * 响应成功处理的结果 */ function callback() { if(xhr.status == 200) { console.log(xhr.responseText); } else { console.log("失败状态码：" + xhr.status + "，错误原因：" + xhr.statusText); } } } /** * 格式化参数数据，并返回给调用者 { uname:"zhangsan", upwd:"1234" } | uname=zhangsan&upwd=1234 * @param {Object} data */ function formatParams(data){ // 得到格式化好的参数数据 var params = null; if (data != null && data.length > 0) { // 定义数组，接收每个参数键值对 var arr = []; // 遍历对象，得到对象中的键和值 for (var k in data) { var name = k; var value = data[k]; // 拼接键和值 var param = name+"="+value; // 将键值对设置到数组中 arr.push(param); } // 将数组转换成以指定符号分隔的字符串 params = arr.join("&"); console.log(params); } return params } </script>
2.POST
<button onclick="ajaxPost1()">同步请求</button> <button onclick="ajaxPost2()">异步请求</button> <script type="text/javascript"> /** Ajax Post请求 同步请求 */ function ajaxPost1(){ //1.创建XMLHttpRequest对象 var xhr=new XMLHttpRequest(); //2.打开请求/准备请求 xhr.open("POST","js/data.json",false); // 向服务器发送POST请求由于解析机制的原因，需要进行特别的处理。 //因为POST请求和Web表单提交是不同的，需要使用XHR来模仿表单提交。 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); //3.发送请求 xhr.send("uname=zhangsan&upwd=1234"); //4.接收响应 if(xhr.status==200){ console.log(xhr.responseText); } } /** Ajax Post请求 异步请求 */ function ajaxPost2(){ //1.创建XMLHttpRequest对象 var xhr=new XMLHttpRequest(); //2.打开请求/准备请求 xhr.open("POST","js/data.json",true); // 向服务器发送POST请求由于解析机制的原因，需要进行特别的处理。 //因为POST请求和Web表单提交是不同的，需要使用XHR来模仿表单提交。 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); //3.发送请求 xhr.send("uname=zhangsan&upwd=1234"); //4.接收请求 xhr.onreadystatechange=function(){ //判断readyState的值是否为4,数据完全响应 if(xhr.readyState==4){ if(xhr.status == 200) { console.log(xhr.responseText); }else{ console.log("失败状态码：" + xhr.status + "，错误原因：" + xhr.statusText); } } } } var obj={ url:"js/data.json", //请求路径 async:true, //是否异步 data:{ //请求的参数数据 uname:"zhangsan", upwd:"1234" } } //调用ajax的post方法 ajaxPost(obj); /** 封装Ajax的Post请求 */ function ajaxPost(){ //默认post请求 //1.创建XMLHttpRequest对象 var xhr =new XMLHttpRequest(); //2.打开请求/准备请求 xhr.open("POST",obj.url,obj.async); // 向服务器发送POST请求由于解析机制的原因，需要进行特别的处理。 //因为POST请求和Web表单提交是不同的，需要使用XHR来模仿表单提交。 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); //格式化后的参数 var params=formatParams(obj.data); //3.发送请求 //判断是否存在参数 if(params!=null){ xhr.send(params); }else{ xhr.send(null); } //判断是否异步请求 if(obj.async){ //异步请求 //监听是否完全响应 xhr.onreadystatechange=function(){ if(xhr.readyState==4){ //接收响应 callback(); } } }else{ //同步请求 //接收响应 callback(); } //响应成功处理的结果 function callback(){ if(xhr.status == 200) { console.log(xhr.responseText); } else { console.log("失败状态码：" + xhr.status + "，错误原因：" + xhr.statusText); } } } //格式化参数数据，返回给调用者 function formatParams(data){ //得到格式化好的参数数据 var params=null; if(data!=null && data.length>0){ //定义数组,接收每个参数键值对 for(var k in data){ var name=k; var value=data[k]; //拼接键值对 var param=name+"="+value; //将键值对设置到数组中 arr.push(param); } //将数组转换成指定符号分隔的字符串 params=arr.join("&"); console.log(params); } return params; } </script>
三、封装Ajax
<!-- 封装Ajax实现过程： 1.创建XMLHttpRequest对象 var xhr=new XMLHttpRequest(); 2.准备请求/打开请求 xhr.open(参数1,参数2,参数3); 参数1:请求的方式(GET|POST) 参数2：请求的路径(请求地址：如果是GET请求,参数直接拼接在地址栏后面) 参数3：是否异步 (true|false 默认是true，表示异步) 3.发送请求 xhr.send(参数); 如果是GET请求,则send(null);参数会直接设置在请求的地址后面; 如果是POST 向服务器发送POST请求由于解析机制的原因，需要进行特别的处理。 因为POST请求和Web表单提交是不同的，需要使用XHR来模仿表单提交。 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 如果有参数，则send(参数)；如果没有参数，则send(null) 4.接收响应 如果是同步请求： 判断是否响应成功 status==200 如果是，则获取响应数据 xhr.responseText 如果是异步请求： 通过onreadystatechange事件监听readyStatus的值变化，当数据完全响应成功时，readyState的值为4 判断readyState的值是否为4 如果是，判断是否响应成功status==20 如果是，则获取响应数据 xhr.responseText --> <script type="text/javascript"> //准备数据 var obj={ url:"js/data.json", type:"GET", //请求类型 GET|POST async:true, //是否异步请求 true|false data:{ uname:"zhangsan", upwd:"1234" }, success:function(result){ alert(result); } }; //调用 ajax(obj); /** 封装Ajax */ function ajax(obj){ //1.创建XMLHttpRequest对象 var xhr=new XMLHttpRequest(); //将对象格式的参数转换成键值对字符串格式 var params=formatParams(obj.data); //判断是否是GET请求 if((obj.type).toUpperCase()=="GET"){ //将参数拼接到地址后面 obj.url += (obj.url).indexOf("?") != -1 ? "&"+params : "?"+params; } //2.准备请求/打开请求 xhr.open(obj.type,obj.url,obj.async); //3.发送请求 xhr.send(参数); if((obj.type).toUpperCase()=="GET"){ xhr.send(null); }else{ //POST请求 // 向服务器发送POST请求由于解析机制的原因，需要进行特别的处理。 //因为POST请求和Web表单提交是不同的，需要使用XHR来模仿表单提交。 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); //如果有参数，则send(参数)；如果没有参数,则send(null) xhr.send(params); } //4.接收响应 if(obj.async){ //如果是异步请求 //通过onreadystatechange事件监听readyState的值变化，当完全响应成功，readyState的值为4 xhr.onreadystatechange=function(){ //判断readyState的值是否为4 if(xhr.readyState==4){ //判断是否响应status==200,如果是，则获取响应数据 xhr.responseText callback(); } } }else{ //同步请求 //判断是否响应status==200,如果是，则获取响应数据 xhr.responseText callback(); } /* 回调函数 */ function callback() { // 判断是否响应成功 status==200;如果是，则获取响应数据 xhr.responseText if (xhr.status == 200) { // console.log(xhr.responseText); obj.success(xhr.responseText); } } } /** * 格式化参数数据，并返回给调用者 * @param {Object} data */ function formatParams(data){ // 得到格式化好的参数数据 var params = null; if (data != null && data.length > 0) { // 定义数组，接收每个参数键值对 var arr = []; // 遍历对象，得到对象中的键和值 for (var k in data) { // 拼接键和值 var param = k + "=" + data[k]; // 将键值对设置到数组中 arr.push(param); } // 将数组转换成以指定符号分隔的字符串 params = arr.join("&"); } return params; } </script>
四、Jquery-Ajax
1.$.ajax()
<script type="text/javascript" src="js/jquery-3.4.1.js"></script> <script type="text/javascript"> $.ajax({ type:"get",//请求类型GET|POST url:"data.txt",//请求地址 data:{ }, dataType:"json",//预期服务器返回的数据类型是JSON格式,浏览器接收后会自动封装成json对象 success:function(result){ //回调函数：用来接收ajax请求后返回的结果 console.log(result); //添加到页面上 var ul=$("<ul></ul>"); //遍历 for(var i=0;i<result.length;i++){ var li="<li>"+result[i].uname+"</li>"; //将追加到ul中 ul.append(li); } //将ul追加到body中 $("body").append(ul); } }); </script>
2.$.get()
<script type="text/javascript" src="js/jquery-3.4.1.js"></script> <script type="text/javascript"> //有请求地址，无参数，无返回值 $.get("data.json"); //有请求地址，有参数，无返回值 $.get("data.json",{uname:"zhangsan",upwd:"123"}); //有请求地址，没有参数，有返回值 $.get("data.json",function(result){ console.log(result); }); //有请求地址，有参数，有返回值 $.get("data.json",{uname:"zhangsan",upwd:"1234"},function(result){ console.log(result); }); </script>
3.$.post()
<script type="text/javascript" src="js/jquery-3.4.1.js"></script> <script type="text/javascript"> //有请求地址，无参数，无返回值 $.post("data.json"); //有请求地址，有参数，无返回值 $.post("data.json",{uname:"zhangsan",upwd:"1234"}); //有请求地址，无参数，有返回值 $.post("data.json",function(result){ console.log(result); }); //有请求地址，有参数，有返回值 $.post("data.json",{uname:"zhangsan",upwd:"1234"},function(result){ console.log(result); }); </script>
4.$.getJSON()
//表示请求返回的数据类型是 JSON 格式的 ajax 请求 <script type="text/javascript" src="js/jquery-3.4.1.js"></script> <script type="text/javascript"> //有请求地址，无参数，无返回值 $.getJSON("data.json"); //有请求地址，有参数，无返回值 $.getJSON("data.json",{uname:"zhangsan",upwd:"1234"}); //有请求地址，无参数，有返回值 $.getJSON("data.json",function(result){ console.log(result); }); //有请求地址，有参数，有返回值 $.getJSON("data.txt",{uname:"zhangsan",upwd:"1234"},function(result){ console.log(result); }); </script>
5.jsonp
**远程跨域时，**如果有两个域名，从其中一个域名去访问另一个域名时，使用普通的 ajax 方
法是获取不到数据的，那么就可以使用 jsonp 方式发送请求。
<script type="text/javascript" src="js/jquery-3.4.1.js"></script> <script type="text/javascript"> $.ajax({ type:"get", url:"http://iservice.itshsxt.com/restaurant/find", dataType:"jsonp",//允许跨域请求(服务器也需要设置允许请求跨域) success:function(result){ console.log(result); } });
