XMLHttpRequest 对象

XMLHttpRequest 是一个 JavaScript 对象,它最初由微软设计,随后被 Mozilla,Apple, 和 Google采纳. 如今,该对象已经被 W3C组织标准化. 通过它,你可以很容易的取回一个URL上的资源数据. 尽管名字里有XML, 但XMLHttpRequest 可以取回所有类型的数据资源,并不局限于XML。

XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步地返回 Web 服务器的响应，并且能够以文本或者一个 DOM 文档的形式返回内容。而且除了HTTP ,它还支持file 和 ftp 协议.

XMLHttpRequest 对象是名为 AJAX 的 Web 应用程序架构的一项关键功能。

       浏览器支持

XMLHttpRequest 得到了所有现代浏览器较好的支持。唯一的浏览器依赖性涉及 XMLHttpRequest 对象的创建。在 IE 5 和 IE 6 中，必须使用特定于 IE 的 ActiveXObject() 构造函数。

嗯，通过上面的介绍我们对XMLHttpRequest对象的认识就更加全面和专业一些了，不过我们还没有介绍怎么样使用它，所以，下面两小部分的内容分别介绍一下有关XMLHttpRequest对象的小代码段和常使用的属性与方法的更加详细的说明。

   6）XMLHTTPRequest对象的简单代码段

function ajaxMethod(){  //1：创建XMLHttpRequest对象var xmlhttp;if (window.XMLHttpRequest)  {// code for IE7+, Firefox, Chrome, Opera, Safari  xmlhttp=new XMLHttpRequest();  }else  {// code for IE6, IE5  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  } //2：监听XMLHttpRequest对象的状态信息。每当 readyState 改变时，就会触发 onreadystatechange 事件（readyState 属性存有 XMLHttpRequest 的状态信息）xmlhttp.onreadystatechange=function()  {  if (xmlhttp.readyState==4 && xmlhttp.status==200)    {    //DO SOMETHING FOR THE SERVER RESPONSE    }  }//3：初始化HTTP请求的信息xmlhttp.open("GET","URL",true);//4：将HTTP请求发送到服务器xmlhttp.send();}

上面的这段简单的代码是不可用的，不过稍做修改就可能成为一个可用的AJAX方法了，当然，我们重点想说明的是，简单的封装一个AJAX方法使用到了XMLHttpRequest对象的那些方法和属性。当然，如果想封装一个更加健全和可靠的AJAX方法就必须详细的了解XMLHttpRequest对象的一些常用的方法和属性更加详尽的使用方式了！下面就是我想介绍的这些内容。

   7）XMLHTTPRequest对象常用的属性和方法的详细说明

        （1）XMLHTTPReuest对象的常用属性详解

                     a：readyState

readyState属性用于存储XMLHttpRequest对象的状态信息，当一个 XMLHttpRequest对象初次创建时，这个属性的值从 0 开始，直到接收到完整的 HTTP 响应，这个值增加到 4。readyState 的值不会递减，除非当一个请求在处理过程中的时候调用了 abort() 或 open() 方法。每次这个属性的值增加的时候，都会触发 onreadystatechange 事件。

并且5 个状态中每一个都有一个相关联的非正式的名称，如下表所示：

                     b：status

由服务器返回的 当前请求的HTTP 状态代码，如 200 表示成功，而 404 表示 "Not Found" 错误。当 readyState 小于 3 的时候读取这一属性会导致一个异常，仅当数据发送并接收完毕后才可获取。下表是常见的HTTP的状态码及其说明：

                     c：statusText

statusText属性用名称而不是数字指定了请求的 HTTP 的状态代码。也就是说，当状态为 200 的时候它是 "OK"，当状态为 404 的时候它是 "Not Found"。和 status 属性一样，当 readyState 小于 3 的时候读取这一属性会导致一个异常,也是仅当数据发送并接收完毕后才可获取。对应的名称参照上表。

                     d：responseText

responseText属性用于将来自服务器的响应信息作为字符串的形式返回。用它来存放到目前为止从服务器接收到的响应体（不包括头部），或者如果还没有接收到数据的话，就是空字符串。具体的存储时机如下：

                     e：responseXML

responseXML属性用于将来自服务器的响应信息格式化为Xml Document对象并返回。使用该属性时，服务器端要生成XML格式的数据，还要把响应的content-type设置为text/html，如果响应体不是“text/xml”返回null。

   （2）XMLHttpReuest对象的常用事件详解

onreadystatechange事件，当HTTP请求被发送到服务器时，我们需要执行一些基于响应的任务。使用readyState来存放 XMLHttpRequest对象 的状态信息，当 readyState 改变时，就会触发 onreadystatechange 事件。所以，可以使用此事件来处理一些基本的响应任务，当然此事件的重点是来处理当服务器响应已做好被处理的准备时所执行的任务，即 readyState=4 并且 status=200的时候。

   （3）XMLHttpReuest对象的常用方法详解

                     a：void open(string method,string url, boolean asynchronous[,string username][,string password])方法

                        作用：

初始化一个XMLHttpRequest对象，创建一个新的http请求，并指定此请求的方法、URL以及验证信息。

                        参数：

method：必选项，用于指定你想用来发送请求的HTTP方法(GET，POST，PUT，DELETE或HEAD)。为了把数据发送到服务器，应该使用POST方法；为了从服务器端检索数据，应该使用GET方法。

url：必选项，用于指定XMLHttpRequest对象把请求发送到的服务器相应的URI。借助于window.document.baseURI属性，该uri被解析为一个绝对的URI-换句话说，你可以使用相对的URI-它将使用与浏览器解析相对的URI一样的方式被解析。

asynchronous：必选项，用于指示这个调用是异步还是同步的，默认值为true，这表示请求本质上是异步的。如果这个参数为false，处理就会等待，直到从服务器返回响应为止。由于异步调用是使用Ajax的主要优点之一，所以倘若将这个参数设置为false，从某种程度上讲与使用XMLHttpRequest对象的初衷不太相符。在 某些情况下这,个参数设置为false也是有用的，比如在持久存储页面之前你可能想先验证用户的输入。

username：可选项，对于要求认证的服务器，你可以提供可选的用户名参数。

password：可选项，对于要求认证的服务器，你可以提供可选的口令参数。

                        备注：

在调用open()方法后，XMLHttpRequest对象把它的readyState属性设置为1并且把responseText、 responseXML、status和statusText属性复位到它们的初始值。另外，它还复位请求头部。注意，如果你调用open()方法并且此时readyState为4，则XMLHttpRequest对象将复位这些值。

                     b：void send(content)方法

                        作用：

向服务器发出请求

                        参数：

content：可选项，可以是一个DOM对象的实例、一个输入流，或者是一个串。该参数可以包含可变类型的数据。典型地，你使用它并通过POST方法把数据发送到服务器。另外，你可以显式地使用null参数调用send()方法，这与不用参数调用它一样。对于大多数其它的数据类型，在调用send()方法之前，应该使用setRequestHeader()方法(见后面的解释)先设置 Content-Type头部。如果在send(data)方法中的data参数的类型为DOMString，那么，数据将被编码为UTF-8。如果数据 是Document类型，那么将使用由data.xmlEncoding指定的编码串行化该数据。注意，传入这个对象的内容会作为请求体的一部分发送。

                        备注：

在通过调用open()方法准备好一个请求之后，我们需要把该请求发送到服务器。仅当readyState值为1时，你才可以调用send()方法；否则的 话，XMLHttpRequest对象将引发一个异常。该请求被使用提供给open()方法的参数发送到服务器。当async参数为true 时，send()方法立即返回，从而允许其它客户端脚本处理继续。在调用send()方法后，XMLHttpRequest对象把readyState的 值设置为2(发送)。当服务器响应时，在接收消息体之前，如果存在任何消息体的话，XMLHttpRequest对象将把readyState设置为 3(正在接收中)。当请求完成加载时，它把readyState设置为4(已加载)。对于一个HEAD类型的请求，它将在把readyState值设置为 3后再立即把它设置为4。

                     c：void setRequestHeader(string header, string value)方法

                       作用：

用来设置请求的头部信息，具体的是为HTTP请求中一个给定的首部设置值。

                        参数：

header：必选项，要设置的首部。

value：必选项，要在首部中放置的值。

                        备注：

当readyState值为1时，你可以在调用open()方法后调用这个方法；否则，你将得到一个异常。换言之，这个方法必须在open()之后才能调用，并且如果已经存在已此名称命名的http头，则覆盖之。

                     e：string getAllResponseHeaders()方法

                        作用：

获取完整的http头信息，以一个字符串形式返回所有的HTTP请求的所有响应首部，首部包括Content-Length、Date和URI。

参数：无

备注：每个http头名称和值用冒号分割，并以\r\n结束。如果readyState的值不是3或4，则该方法返回null。也即是当send方法完成后才可调用该方法。

                     f：string getResponseHeader(string header)方法

                        作用：

返回指定首部的串值。

                       参数：

header：必选项，表示希望得到的哪一个首部的值。

                        备注：

仅当readyState值是3或4(换句话说，在响应头部可用以后)时，才可以调用这个方法；否则，该方法返回一个空字符串。也就是当send方法成功后才可调用该方法。

                     g：void abort()方法

                        作用：

暂停与一个XMLHttpRequest对象相联系的HTTP请求，从而把该对象复位到未初始化状态。

                        参数：

无

                        备注：

调用此方法后，当前请求返回UNINITIALIZED 状态。

嗯，通过上面的总结，相信我们能比较容易的看明白下面的这两段小代码段啦！

1）一份把相关的方法基本都封装全了的XmlHttpRequest对象的JS文件(网上下载的)，此JS文件的详细定义如下：

function CallBackObject() {   this.XmlHttp = this.GetHttpObject(); }    //获得XMLHttpRequest对象 CallBackObject.prototype.GetHttpObject = function() {    var xmlhttp;   if (!xmlhttp && xmlhttp typeof XMLHttpRequest != ‘undefined‘)    {        try         {            if (window.XMLHttpRequest)            {// code for IE7+, Firefox, Chrome, Opera, Safari              xmlhttp=new XMLHttpRequest();            }            else            {// code for IE6, IE5              xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");            }        }         catch (e)         {          xmlhttp = false;        }   }  return xmlhttp;}  //处理服务器响应的回调函数CallBackObject.prototype.DoCallBack = function(URL){   if( this.XmlHttp )  {    if( this.XmlHttp.readyState == 4 || this.XmlHttp.readyState == 0 )    {      var oThis = this;      this.XmlHttp.open(‘POST‘, URL);      this.XmlHttp.onreadystatechange = function(){ oThis.ReadyStateChange(); };      this.XmlHttp.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded‘);      this.XmlHttp.send(null);    }  }}  //取消当前响应的回调函数CallBackObject.prototype.AbortCallBack = function(){  if( this.XmlHttp )    this.XmlHttp.abort();}  //服务器已连接时的回调函数CallBackObject.prototype.OnLoading = function(){  // Loading}  //请求已接受时的回调函数CallBackObject.prototype.OnLoaded = function(){  // Loaded}  //请求处理中的回调函数CallBackObject.prototype.OnInteractive = function(){  // Interactive}  //请求已完成，且响应就绪时的回调函数CallBackObject.prototype.OnComplete = function(responseText, responseXml){  // Complete}  //请求未初始化时的回调函数CallBackObject.prototype.OnAbort = function(){  // Abort}  //状态异常时的处理函数CallBackObject.prototype.OnError = function(status, statusText){  // Error}  //XMLHttpRequest对象的状态改变时的处理函数CallBackObject.prototype.ReadyStateChange = function(){  if( this.XmlHttp.readyState == 1 )  {    this.OnLoading();  }  else if( this.XmlHttp.readyState == 2 )  {   this.OnLoaded();  }  else if( this.XmlHttp.readyState == 3 )  {   this.OnInteractive();  }  else if( this.XmlHttp.readyState == 4 )  {   if( this.XmlHttp.status == 0 )      this.OnAbort();    else if( this.XmlHttp.status == 200 && this.XmlHttp.statusText == "OK" )      this.OnComplete(this.XmlHttp.responseText, this.XmlHttp.responseXML);    else      this.OnError(this.XmlHttp.status, this.XmlHttp.statusText, this.XmlHttp.responseText);     }}

2）改写的一段W3C测试AJAX方法的代码，学习编程最好是理论结合实践自己动手实验一下，说不定能发现许多意想不到的事情！

     a：联网的情况下，在浏览器地址栏输入：http://www.w3school.com.cn/tiy/t.asp?f=ajax_async_true

     b：然后将下面的代码输入到测试代码的编辑区：

<html><head><script type="text/javascript">function show(whereRun){  var para=document.createElement("p");  var node=document.createTextNode(whereRun+"--- the time is :"+new Date().getTime());  para.appendChild(node);  var element=document.getElementById("show");  element.appendChild(para);}function loadXMLDoc(){var xmlhttp;if (window.XMLHttpRequest)  {// code for IE7+, Firefox, Chrome, Opera, Safari  xmlhttp=new XMLHttpRequest();  }else  {// code for IE6, IE5  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");  }xmlhttp.onreadystatechange=function()  {     show("readyState is :"+xmlhttp.readyState+" --- status is :"+xmlhttp.status);  if (xmlhttp.readyState==4 && xmlhttp.status==200)    {    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;    }  }show("open is running,before!------------");xmlhttp.open("GET","/ajax/test1.txt",true);show("open is running,after!-------------");show("send is running,before!------------");xmlhttp.send();show("send is running,after!-------------");}</script></head><body><div id="myDiv"><h2>Let AJAX change this text</h2></div><button type="button" onclick="loadXMLDoc()">通过 AJAX 改变内容</button><div id=‘show‘></div></body></html>

     c：点击测试代码编辑区上边的“提交代码”按钮

     d：点击查看结果取里面的“通过AJAX改变内容”按钮

     e：我的运行效果如下图所示：

     f：从上面的运行结果也看到了一下XMLHttpRequest对象的运行时机的内容， 更多的体验，就自己动手来实验一下吧！

参考：

1：W3C之AJAX教程

2：百度百科XMLHttpRequest

3：轻松掌握XMLHttpRequest

4：W3C之XMLHttpRequest

5：XMLHttpRequest的属性和方法

6：XMLHttpRequest对象全面剖析

7：AJAX和XMLHttpRequest下的Web开发（1）

8：MDN之XMLHttpRequest

感谢W3C！感谢互联网时代！谢谢！