【AJAX】XMLHTTPRequest对象

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

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

    一.什么是XMLHTTPRequest。

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

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

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

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

    二.XMLHTTPRequest对象的属性。

    

属性描述详细说明readyStateHTTP 请求的状态.当一个 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这一技术，而上面的五步法也就是用到它时必不可少的一块代码，期待以后见证它的使用时刻~