AJAX从入门到深入

红太狼 2022-05-14 05:24 193阅读 0赞

#### 一、AJAX简介 ####

**1.概述**

**AJAX（Asynchronous Javascript And XML）**

> AJAX = 异步 JavaScript 和 XML（标准通用标记语言的子集）；  
> AJAX 是一种用于创建快速动态网页的技术，在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面；  
> 通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新，传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。

**2. 应用场景**

*  检查用户名是否被注册
 *  省市级联下拉框联动
 *  搜索内容自动补全

**3. Internet标准**

AJAX是基于现有的Internet标准，并且联合使用它们：

XMLHttpRequest 对象 (异步的与服务器交换数据)
    JavaScript/DOM (信息显示/交互)
    CSS (给数据定义样式)
    XML (作为转换数据的格式)

#### 二、AJAX原生写法 ####

**1. 代码：**

//先声明一个异步请求对象
    var xmlHttpReg = null;
    function ajax() { 
    	if (window.ActiveXObject) {                  //如果是IE5、IE6
    	    xmlHttpReg = new ActiveXObject("Microsoft.XMLHTTP");
    	} 
    	else if (window.XMLHttpRequest) { 
    	    xmlHttpReg = new XMLHttpRequest();      //实例化一个xmlHttpReg
    	}
    	//如果实例化成功,就调用open()方法,就开始准备向服务器发送请求
    	if (xmlHttpReg != null) { 
    		//创建一个HTTP请求
    	    xmlHttpReg.open("get", "checknumber.php?type="+gametype
    	                                               +"&round="+gameroundno, true);
    	    xmlHttpReg.send();  //发送请求
    	    xmlHttpReg.onreadystatechange = doResult; //设置回调函数
    	}
    }
    
    //响应HTTP请求状态变化的函数
      function httpStateChange(){ //判断异步调用是否完成
        if(xmlhttp.readyState==4){ //readyState==4表示后台处理完成了
          //状态码为0是本地响应成果，200表示处理的结果是ok的
          if(xmlhttp.status==200||(xmlhttp.status==0){ 
          //判断异步调用是否成功,如果成功开始局部更新数据
            //code...
          }else{ 
            alert("出错状态码："+xmlhttp.status+"出错信息："+xmlhttp.statusText);
          }
        }
      }

实现步骤：

*  step1. 创建XMLHttpRequest对象，也就是创建一个异步调用对象；
 *  step2. 创建一个新的HTTP请求，并指定改HTTP请求的方法、URL以及验证信息；
 *  step3. 设置响应HTTP状态变化的函数；
 *  step4. 发送HTTP请求；
 *  step5. 获取异步调用返回的数据；
 *  step6. 使用JavaScript和DOM实现局部刷新。

**2.XMLHttpRequest对象及其创建**

> XMLHttpRequest 对象（是AJAX的基础）  
> 　　所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）  
> 　　XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新

创建XMLHttpRequest对象 ：`xmlhttp=new XMLHttpRequest();`

**3.AJAX向服务器发送请求**

XMLHttpRequest 对象用于和服务器交换数据。  
向服务器发送请求，使用 XMLHttpRequest 对象的 open() 和 send() 方法

xmlhttp.open("GET","AJAX_info.txt",true);
    xmlhttp.send();

方法	                                               描述
            	                               规定请求的类型、URL 以及是否异步处理请求
    open(method,url,async)					       method: 请求的类型；GET 或 POST
    										       url: 文件在服务器上的位置
    										       async: true（异步）或 false（同步）
    																		
    send(string)							   将请求发送到服务器
    											   string: 仅用于 POST 请求

**4.Get and Post**

与 Post 相比，Get 更简单也更快，并且在大部分情况下都能用  
然而以下情况中，请使用 POST 请求：

*  无法使用缓存文件（更新服务器上的文件或数据库）
 *  向服务器发送大量数据（POST 没有数据量限制）
 *  发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

**5.XMLHttpRequest 响应**

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>responseText</td> 
   <td>获得字符串形式的响应数据</td> 
  </tr> 
  <tr> 
   <td>responseXML</td> 
   <td>获得 XML 形式的响应数据</td> 
  </tr> 
 </tbody> 
</table>

如果来自服务器的响应并非 XML，请使用 responseText 属性。  
responseText 属性返回字符串形式的响应，如下：

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

**6.XMLHttpRequest readyState**

`onreadystatechange`：

> 当请求被发送到服务器时，需要执行一些基于响应的任务  
> 每当 readyState 改变时，就会触发 onreadystatechange 事件  
> readyState 属性存有 XMLHttpRequest 的状态信息

下面是 XMLHttpRequest 对象的三个重要的属性：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><strong>onreadystatechange</strong></td> 
   <td>存储函数（或函数名），每当 readyState属性<br>改变时，就会调用该函数</td> 
  </tr> 
  <tr> 
   <td><strong>responseXML</strong></td> 
   <td>获得 XML 形式的响应数据</td> 
  </tr> 
  <tr> 
   <td><strong>readyState</strong></td> 
   <td>存有 XMLHttpRequest 的状态,从 0 到 4 发生变化<br> 0: 请求未初始化<br> 1: 服务器连接已建立<br> 2: 请求已接收<br> 3: 请求处理中<br> 4: 请求已完成，且响应已就绪</td> 
  </tr> 
  <tr> 
   <td><strong>status</strong></td> 
   <td>200: “OK” <br> 04: 未找到页面</td> 
  </tr> 
 </tbody> 
</table>

在 `onreadystatechange` 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务  
当 **readyState 等于 4 且状态为 200** 时，表示响应已就绪：

xmlhttp.onreadystatechange=function()
    { 
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        { 
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    }

#### 三、AJAX jQuery写法 ####

**1. 标准写法**

$.ajax({ 
      
    	// 请求类型:get/post
        type: "POST",  
        // 请求的url地址
        url: "/login",
        // 请求的数据类型:可以是html,json,xml等
        dataType: "json", 
    	// 请求是否异步,默认为异步(true)
        async:true, 
        // 请求参数
        data: { username:$("#username").val(), password:$("#password").val()},  
       
        beforeSend:function(){ 
        	// 请求前的处理
        }    
       	success: function(data){  
       		// 请求成功时的处理 
            console.log(data);  
        }，  
        error:function(e){   
       		// 请求出错时的处理
            console.log(e);  
        }  
    });

**补充：dataType的属性**

$.AJAX()方法中`dataType`属性要求为`String`类型的参数，即预期服务器返回的数据类型。如果不指定，jQuery将自动根据HTTP包信息返回responseXML或responseText，并作为回调函数参数传递。

可用的类型如下：

*  JSON：返回JSON数据；
 *  XML：返回XML文档，可用jQuery处理；
 *  HTML：返回纯文本HTML信息；包含的Script标签会在插入DOM时执行；
 *  Script：返回纯文本JavaScript代码，不会自动缓存结果，除非设置了cache参数。

**2. 简单写法**

语法：`jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)`

参数：  
![ajax参数描述][ajax]

代码示例：

$.get(base + "/project/findByFactory", { "factory": factSelStr}, function (result) { 
        console.log(result);
    });

#### 四、async 异步同步请求的区别 ####

> 异步请求：sync设置为true（默认为true）；`$.ajax`执行后，会继续执行Ajax后面的脚本，直到服务器端返回数据后，触发`$.ajax`里的success方法  
> 同步请求：sync设置为false；在没有返回值之前，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以  
>   
> 同步是指：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式  
> 用户填写所有信息后，提交给服务器，等待服务器的回应（检验数据），是一次性的。信息错误又要重新  
>   
> 异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式  
> 当用户填写完一条信息后，该信息会自动向服务器提交，然后服务器响应客户端，在此过程中，用户依然在填写表格的信息，即向服务器请求多次，节省了用户的时间，提高了用户的体验

补充：AJAX默认是异步加载的，也就是说第一个function请求数据时，数据还未返回时便开始执行第二个function了，如果将其设置为同步请求，则会等第一个function执行完后才会加载第二个function。

#### 五、其他问题 ####

**1. Ajax请求导出Excel的问题**

问题描述：前端发起ajax请求，后台使用POI生成excel文件，最后用response输出excel文件流，整个调用过程没有报任何错，excel文件流能在浏览器控制台输出，但是浏览器没有弹出文件下载，毫无反应。

解决方法：开始以为是浏览器兼容性，或是后台输出文件流代码有问题，后来网上搜索发现有人说不能使用ajax请求导出excel，换成地址重定向`window.location.href`即可。

代码：

// 导出
    $("#customer-export").click(function () { 
    
        var customerArray = new Array();
        $("input:checkbox[name='custCheck']:checked").each(function () { 
            customerArray.push($(this).val());
        });
        if (customerArray.length == 0) { 
            layer.open({ 
                skin: "layui-layer-molv",
                title: "提示",
                content: "请勾选导出数据",
                icon: 8
            });
            return false;
        }
        // 传递到controller层是个字符串数组
        var customerJson = customerArray.toString();
        // 不要使用ajax调用
        window.location.href = base + "/customer/exportExcel?customerJson=" + customerJson;
    });

[ajax]: /images/20220514/b2ffd621c7a84bfe9ec0b365b6d8972d.png