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

最新推荐文章于 2024-09-12 10:00:34 发布

NINE-NINE

最新推荐文章于 2024-09-12 10:00:34 发布

阅读量519

点赞数

分类专栏： AJAX 文章标签： ajax

本文链接：https://blog.csdn.net/m0_38099607/article/details/72862074

版权

AJAX 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

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

function createXHR(){

    if( typeof XMLHttpRequest != "undefined" ){
        return new XMLHttpRequest();
    }else if( typeof ActiveXObject != "undefined" ){
        if( typeof arguments.callee.activeXString != "string" ){
            ver versions = [ "MSXML2.XMLHttp.6.0" , "MSXML2.XMLHttp.3.0" , "MSXML2.XMLHttp" ], i , len;
            for( i = 0; len = versions.length; i<len; i++ ){
                try{
                    new ActiveXObject( versions[i] );
                    arguments.callee.activeXString = versions[i];
                    break;
                }catch( ex ){
                    //跳过
                }
            }
        }
        return new ActiveXObject( arguments.callee.activeXString );
    }else{
        throw new Error( "No XHR object available" );
    }
}

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的情况；

var xhr = createXHR();
xhr.onreadystatechange = function(){
    if( xhr.readyState == 4 ){
        if( ( xhr.status >= 200 && xhr.status < 300  ) || xhr.status == 304 ){
            alert( xhr.responseText );
        }else{
            alert( "Request was unsuccessful:" + xhr.status );
        }
    }
};
xhr.open( "get", "example.php", true );
xhr.send( null );

我们也可以在接受响应之前调用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处理服务器响应；