Ajax(一)：XHR的用法

AJAX
能够向服务器请求额外的数据而无须卸载页面，会带来更好的用户体验。

1、在使用xhr对象时，要调用都第一个方法就是open(),它接收3个参数：要发送的请求的类型(get,post等)、请求的url和表示
是否异步发送请求的布尔值。

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

调用open()方法并不会真正发送请求，而只是启动一个请求以备发送，要发送特定的请求，必须像下面这样调用send()方法：

xhr.open('get', 'example.txt', false);
xhr.send(null);

＊：只能向同一个域中使用相同端口和协议的url发送请求，如果url与启动请求的页面有任何差别，都会引发安全错误

 

2、调用send()之后，请求就会分派到服务器。等到服务器响应之后再继续执行。在收到响应后，响应到数据会自动填充xhr对象到属性，
相关的属性简介如下：

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

通过检测status来决定下一步的操作，不要依赖statusText，因为后者的跨浏览器使用时不太可靠

 

3、多数情况下，我们还是要发送异步请求，才能让js继续执行而不必等待响应。此时，可以检测xhr对象的readyState属性，该属性
表示请求/响应过程的当前活动阶段。

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

只要readyState属性的值由一个值变成另一个值，都会触发一次readystatechange事件。利用这个事件来检测每次状态变化后的state的值。通常我们只对readyState为4的阶段感兴趣，因为此时所有数据都已经就绪。
不过，必须在调用open()之前指定onreadystatechange事件处理程序才能确保跨浏览器兼容性。

function createXHR(){
    if(typeof XMLHttpRequest !="undefined"){
        return new XMLHttpRequest(); 
    }else if(typeof ActiveXObject !="undefined"){
        if(typeof arguments.callee.activeXString !="string"){
            var versions =    ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"];
            var 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");
    }
}

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); 
        } 
    } 
}

//读取example文本 
xhr.open("get","example.txt",true); 
xhr.send(null);

    

 

另外，在接收到响应之前还可以调用abort()方法来取消异步请求

xhr.abort()

 

转载于:https://www.cnblogs.com/wzndkj/p/8564451.html