深入理解AJAX系列第一篇--XMLHttpRequest对象

淩亂°似流年 2022-06-13 23:57 194阅读 0赞

**1.AJAX的原理**：通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。  
**2.AJAX的作用**：在无需重新加载整个网页的情况下，能够更新部分网页，从而带来更好的用户体验。  
**3.AJAX的核心**：XMLHttpRequest对象  
XMLHttpRequest是ajax的核心机制，它是在IE5中首先引入的，是一种支持异步请求的技术， 但是，由于各浏览器之间存在差异，所以创建一个XMLHttpRequest对象可能需要不同的方法。这个差异主要体现在IE和其它浏览器之间。所以需要编写一个浏览器兼容的创建XHR对象的函数。

**4.XHR的用法**  
（1）*发送请求*  
在使用XHR对象时，第一个要调用的第一个方法是open( )；它接受3个参数：  
a: 要发送的请求类型（”get”、”post”）;  
b:请求的URL（URL相对于执行代码的相对页面，可以为相对路径）；  
c:是否异步发送请求的布尔值。

xhr.open( "get", "example.php", false );

**注意**：调用open（）方法并不会真正发送请求，而是启动一个请求准备发送。  
要发送特定的请求，就要调用send( )方法：

xhr.open( "get", "example.php", false );
    send( null );

send（）方法接受一个参数，即要作为请求主体发送的数据，如果不需要通过请求主体发送信息，则必须传入null，因为这个参数对于浏览器来说是必须的，调用send（）方法之后，请求就会分派到服务器。  
（2）*接收响应*  
在接收到响应之后，响应的数据会自动填充XHR对象的属性，相关属性介绍如下：

responseText: 作为响应主体被返回的文本；
    responseXML: 如果响应的内容类型是'text/xml'或'application/xml'，这个属性中将保存着响应数据的XML DOM文档；
    status: 响应的HTTP状态；
    statusText: HTTP状态的说明；

在收到响应后第一步是检查响应状态，确保响应是否成功返回（状态为200），如果成功responseText和responseXML可以被访问，为了确保响应有效，我们可以这样检查状态码

if((xhr.status >=200 && xhr.status < 300) || xhr.status == 304){ alert(xhr.responseText); }else{ alert('request was unsuccessful:' + xhr.status); }

上面代码在发送同步请求的时候没问题，只有得到响应后才会执行检查status语句，但是在异步请求时，JavaScript会继续执行，不等生成响应就检查状态码，这样我们不能保证检查状态码语句是在得到响应后执行，这时候我们可以检查XHR对象的readyState属性，该属性表示请求/响应过程中的当前活动阶段。这个属性可取值如下：

0:未初始化。尚未调用open()方法
    1:启动。已经调用open()方法，但尚未调用send()方法
    2:发送。己经调用send()方法，且接收到头信息
    3:接收。已经接收到部分响应主体信息
    4:完成。已经接收到全部响应数据，而且已经可以在客户端使用了

只要readyState属性值由一个值变成另一个值，都会触发一次readystatechange事件。可以利用这个事件来检测每次状态变化后readyState的值。当为4的时候表示所有数据准备就绪。  
**\[注意\]**必须在调用open()之前指定onreadystatechange 事件处理程序才能确保跨浏览器兼容性，否则将无法接收readyState属性为0和1的情况；

我们也可以在接受响应之前调用abort方法取消异步请求：`xhr.abort( );`  
调用这个方法后，XHR会停止触发事件，而且也不再允许访问任何与响应有关的对象属性。  
**5.XMLHttpRequest对象的运行周期**  
（1）创建一个XMLHttpRequest实例，然后用它来发送请求，这种请求可以是GET方式，也可以是POST；  
（2）XMLHttpRequest发送后，服务器的响应何时到达、核实处理需要借助js的事件机制。XMLHttpRequest能触发的事件是onreadystatechange，  
当XMLHttpRequest对象的状态改变是，将触发XMLHttpRequest对象指定的onreadystatechange事件（为其绑定回调函数）；  
（3） readyState==4&&(xmlRequest.status==200||xmlRequest.status==304)时，可以开始处理服务器响应  
（4） 触发回调函数；  
（5）回调函数需借助XMLHttpRequest来解析服务器响应，当调用responseText或responseXML获取服务器响应后，XMLHttpRequest对象的运行周期结束；  
（6） js处理服务器响应；