【AJAX】XMLHTTPRequest对象-CSDN博客

在上一篇博客中，我们了解到了AJAX方式下的Web应用程序与传统方式下的Web应用程序有着一个最大的不同之处是：数据传输中不用刷新整个网页，给带来了一种不一样的用户体验。这种技术的核心就是利用的XMLHTTPRequest对象。

那么，这篇博客就一起来学习XMLHTTPRequest对象。

一.什么是XMLHTTPRequest。

中文可以解释为可扩展超文本传输请求。Xml可扩展标记语言，Http超文本传输协议，Request请求。

XMLHttpRequest 对象用于在后台与服务器交换数据。

XMLHttpRequest 对象是开发者的梦想，因为您能够：在不重新加载页面的情况下更新网页；在页面已加载后从服务器请求数据；在页面已加载后从服务器接收数据；在后台向服务器发送数据。

所有现代的浏览器都支持 XMLHttpRequest 对象。

二.XMLHTTPRequest对象的属性。

属性	描述	详细说明
readyState	HTTP 请求的状态.当一个 XMLHttpRequest 初次创建时，这个属性的值从 0 开始，直到接收到完整的 HTTP 响应，这个值增加到 4。	0-Uninitialized-初始化状态。XMLHttpRequest 对象已创建或已被 abort() 方法重置。 1-Open-open() 方法已调用，但是 send() 方法未调用。请求还没有被发送。 2-Send-Send() 方法已调用，HTTP 请求已发送到 Web 服务器。未接收到响应。 3-Receiving-所有响应头部都已经接收到。响应体开始接收但未完成。 4-Loaded-HTTP 响应已经完全接收。
responseText	目前为止从服务器接收到的响应体（不包括头部），或者如果还没有接收到数据的话，就是空字符串。	如果 readyState 小于 3，这个属性就是一个空字符串。当 readyState 为 3，这个属性返回目前已经接收的响应部分。如果 readyState 为 4，这个属性保存了完整的响应体。
responseXML	对请求的响应，解析为 XML 并作为 Document 对象返回。如果响应体不是“text/xml”返回null。
status	由服务器返回的 HTTP 状态代码	如 200 表示成功，而 404 表示 "Not Found" 错误。当 readyState 小于 3 的时候读取这一属性会导致一个异常。
statusText	这个属性用名称而不是数字指定了请求的 HTTP 的状态代码。	当状态为 200 的时候它是 "OK"，当状态为 404 的时候它是 "Not Found"。和 status 属性一样，当 readyState 小于 3 的时候读取这一属性会导致一个异常。

三.XMLHTTPRequest对象的方法

方法	描述	详细说明
open(string method,string url,boolean asynch, String username,string password)	初始化 HTTP 请求参数，例如 URL 和 HTTP 方法，但是并不发送请求。	Method:表示http请求方法，一般使用"GET","POST". url：表示请求的服务器的地址； asynch：表示是否采用异步方法，true为异步，false为同步；后边两个可以不指定，username和password分别表示用户名和密码，提供http认证机制需要的用户名和密码。
send(content)	发送 HTTP 请求，使用传递给 open() 方法的参数，以及传递给该方法的可选请求体。	content可以指定为null表示不发送数据，其内容可以是DOM对象，输入流或字符串。
setRequestHeader(String header,String Value)	向一个打开但未发送的请求设置或添加一个 HTTP 请求。	此方法需在open方法以后调用，一般在post方式中使用。
getResponseHeader(String header)	返回指定的 HTTP 响应头部的值。其参数是要返回的 HTTP 响应头部的名称。可以使用任何大小写来制定这个头部名字，不区分大小写。该方法的返回值是指定的 HTTP 响应头部的值	如果没有接收到头部或者 readyState 小于 3 则为空字符串。如果接收到多个有指定名称的头部，这个头部的值被连接起来并返回，使用逗号和空格分隔开各个头部的值。
Abort()	停止当前http请求。对应的XMLHttpRequest对象会复位到未初始化的状态。	把 XMLHttpRequest 对象重置为 readyState 为 0 的状态，并且取消所有未决的网络活动。例如，如果请求用了太长时间，而且响应不再必要的时候，可以调用这个方法。
getAllResponseHeaders()	把 HTTP 响应头部作为未解析的字符串返回。	如果 readyState 小于 3，这个方法返回 null。否则，它返回服务器发送的所有 HTTP 响应的头部。头部作为单个的字符串返回，一行一个头部。每行用换行符 "" 隔开。

四.XMLHTTPRequest对象五步使用法

对于XMLHTTPRequest对象已有了一个理论认识，下面就介绍如何使用它的经典五步法。

第一步：创建XMLHTTPRequest对象

 var xmlhttprequest; 
   if(window.XMLHttpRequest){ 
       xmlhttprequest=new XMLHttpRequest(); 
       if(xmlhttprequest.overrideMimeType){ 
           xmlhttprequest.overrideMimeType("text/xml"); 
       } 
   }else if(window.ActiveXObject){ 
       var activeName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"]; 
       for(var i=0;i<activeName.length;i++){ 
           try{ 
               xmlhttprequest=new ActiveXObject(activeName[i]); 
               break; 
           }catch(e){ 
 
           } 
       } 
   } 
 
   if(xmlhttprequest==undefined || xmlhttprequest==null){ 
       alert("XMLHttpRequest对象创建失败！！"); 
   }else{ 
       this.xmlhttp=xmlhttprequest; 
   }

第二步：注册回调方法

//2.注册回调方法 
     xmlhttp.onreadystatechange=callback; 
    //错误的写法callback();

第三步： 设置和服务器交互的相应参数

 /*
    //GET方式交互 
    //设置和服务器端交互的相应参数 
    xmlhttp.open("GET","AjaxServer?name="+userName,true); 
    */
    /*
    //POST方式交互
    //设置和服务器端交互的相应参数 
    xmlhttp.open("POST","AjaxServer",true); 
    //POST方式交互所需要增加的代码 
    xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
    */

第四步： 设置向服务器端发送的数据，启动和服务器端的交互

//4.设置向服务器端发送的数据，启动和服务器端的交互 
    //GET方式
    xmlhttp.send(null);
    //POST方式
    //4.设置向服务器端发送的数据，启动和服务器端的交互 
    xmlhttp.send("name="+userName);

第五步：判断和服务器端的交互是否完成，还要判断服务器端是否返回正确的数据

//根基实际条件写callback的功能代码 
function callback(){ 
     if（xmlhttp.readState==4）{ 
         //表示服务器的相应代码是200；正确返回了数据  
        if(xmlhttp.status==200){  
            //纯文本数据的接受方法  
            var message=xmlhttp.responseText;  
            //使用的前提是，服务器端需要设置content-type为text/xml  
            //var domXml=xmlhttp.responseXML;  
            //其它代码 
         }  
    } 
 }

五.学习总结

以上是对XMLHTTPRequest对象基础的总结，初次接触，没有什么很深刻的体会，而对于后面了解到的内容，使用它会有一些扩展性的问题，如：“缓存问题”、“中文问题”以及“跨域问题”，也觉得应该是后面在项目实践中都要考虑的方面。并且，在以后的开发中，为了更好的用户体验，也是一定会用到AJAX这一技术，而上面的五步法也就是用到它时必不可少的一块代码，期待以后见证它的使用时刻~