XHR:AJAX的技术基础

本文转自 http://www.cnblogs.com/wuchong/archive/2010/11/03/1868322.html
　　XHR即XMLHttpRequest，XMLHttpRequest对象是现今所有AJAX和Web 2.0应用程序的技术基础。虽然目前的主流趋势都是在提供各种AJAX(Asynchronism Javascript And Xml)框架以进一步简化XHR对象的使用，但是，了解对象的工作机制是很有必要的，下面，小弟谈谈自己的见解，如有不当敬请指正。

　　AJAX是一个专用术语，用于实现在客户端脚本和服务器之间的数据交互过程。此技术最大的优点就是：我们从服务器检索数据的时候不必把当前用户正在使用的页面全部回馈给服务器，它与JavaScript结合，使得更新被显示的HTML内容而不需要刷新整个页面，AJAX使得浏览器类似桌面程序，变得更有交互性。

　　AJAX利用一个构建到浏览器内部的对象(XMLHttpRequest)来实现发送和接收HTTP请求与响应信息。经由XHR对象发送HTTP请求并不需要页面中拥有或者寄回一个<form>元素。A代表的意思是异步，这表示XHR对象请求过程可以另外开启一个线程，不影响Web页面上的其他HTML/JavaScript继续对其浏览器进行处理。需要注意的是缺省状态的情况下是异步进行的，需要同步处理只需要在open()方法中指定一下。注：同步处理会使页面的处理暂停在XHR向服务器的请求过程中，直到给XHR请求处理完成得到服务器回应后为止。

　　下面简单介绍一下XMLHttpRequest对象的属性及事件

一、XHR的属性：

　　1、readyState

　　当XHR对象把一个HTTP请求发送到服务器的过程中会经历几个状态，直到请求被处理，然后才接收一个回应。readyState就是XHR请求的状态属性，它本身有5个属性值：(如下表)

readyState属性值表
readyState取值

描述

0

描述一种"未初始化"状态；此时，已经创建一个XMLHttpRequest对象，但是还没有初始化。

1

描述一种"发送"状态；此时，代码已经调用了XMLHttpRequest open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器。

2

描述一种"发送"状态；此时，已经通过send()方法把一个请求发送到服务器端，但是还没有收到一个响应。

3

描述一种"正在接收"状态；此时，已经接收到HTTP响应头部信息，但是消息体部分还没有完全接收结束。

4

描述一种"已加载"状态；此时，响应已经被完全接收。

　　2、responseText
　　responseText属性包含客户端接收到的HTTP响应的文本内容。当readyState值为0、1、2时，responseText包含一个空字符串。当readyState值为3(正在接收)时，响应中包含客户端还未完成的响应信息。当readyState为4时(以加载)时，responseText包含了完整的响应信息。
　　3、responseXML
　　此responseXML属性用于当接收到完整的HTTP响应时(readyState为4)描述XML响应。此时，Content-Type头部指定MIME(多功能网际邮件扩充协议)类型为text/xml，application/xml或以+xml结尾。如果Content-Type头部并不包含这些媒体类型之一，那么responseXML的值为null。无论何时，只要readyState值不为4，那么该responseXML的值也为null。其实，这个responseXML属性值是一个文档接口类型的对象，用来描述被分析的文档。如果文档不能被分析(例如，如果文档不是良构的或不支持文档相应的字符编码)，那么responseXML的值将为null。
　　4、status
　　status属性描述了HTTP请求的状态代码，其类型为short类型。而且仅当readyState值为3或4时，status属性才可以用，否则，就会引发异常。注：鉴于status的属性值较多，此处列举两个重要的属性：200表示OK，一切正常；400表示Bad Request，请求出现语法错误。
　　5、statusText
　　statusText属性描述了HTTP状态代码文本，仅当readyState值为3或4的时候才能使用。当readyState为其它值时视图存取statusText属性将引发异常。
二、事件
　　onreadystatechange事件：XHR中的重要事件。当readyState值发生变化的时候，XHR对象都会激发一个onreadystatechange事件。其中，onreadystatechange属性接收一个EventListener值向该方法指示无论readyState何时发生改变，该对象都将激活。
　　XHR对象的方法
　　1、abort()方法
　　你可以使用这个abort()方法来暂停与一个XMLHttpRequest对象相联系的HTTP请求，从而把该对象复位到未初始化状态。
　　2、open()方法
　　你需要调用open(DOMString method，DOMString uri，boolean async，DOMString username，DOMString password)方法初始化一个XMLHttpRequest对象。其中，method参数是必须提供的-用于指定你想用来发送请求的HTTP方法(GET，POST，PUT，DELETE或HEAD)。为了把数据发送到服务器，应该使用POST方法；为了从服务器端检索数据，应该使用GET方法。在调用open()方法后，XMLHttpRequest对象把它的readyState属性设置为1(打开)并且把responseText、responseXML、status和statusText属性复位到它们的初始值。另外，它还复位请求头部。注意，如果你调用open()方法并且此时readyState为4，则XMLHttpRequest对象将复位这些值。
　　3、send()方法
　　在通过调用open()方法准备好一个请求之后，你需要把该请求发送到服务器。仅当readyState值为1时，你才可以调用send()方法；否则的话，XMLHttpRequest对象将引发一个异常。该请求被使用提供给open()方法的参数发送到服务器。当async参数为true时，send()方法立即返回，从而允许其它客户端脚本处理继续。在调用send()方法后，XMLHttpRequest对象把readyState的值设置为2(发送)。当服务器响应时，在接收消息体之前，如果存在任何消息体的话，XMLHttpRequest对象将把readyState设置为3(正在接收中)。当请求完成加载时，它把readyState设置为4(已加载)。对于一个HEAD类型的请求，它将在把readyState值设置为3后再立即把它设置为4。send()方法使用一个可选的参数-该参数可以包含可变类型的数据。典型地，你使用它并通过POST方法把数据发送到服务器。另外，你可以显式地使用null参数调用send()方法，这与不用参数调用它一样。对于大多数其它的数据类型，在调用send()方法之前，应该使用setRequestHeader()方法(见后面的解释)先设置Content-Type头部。如果在send(data)方法中的data参数的类型为DOMString，那么，数据将被编码为UTF-8。如果数据是Document类型，那么将使用由data.xmlEncoding指定的编码串行化该数据。
　　4、setRequestHeader()方法
　　该setRequestHeader(DOMString header，DOMString value)方法用来设置请求的头部信息。当readyState值为1时，你可以在调用open()方法后调用这个方法；否则，你将得到一个异常。
　　5、getResponseHeader()方法
　　getResponseHeader(DOMString header，value)方法用于检索响应的头部值。仅当readyState值是3或4(换句话说，在响应头部可用以后)时，才可以调用这个方法；否则，该方法返回一个空字符串。
　　6、getAllResponseHeaders()方法
　　该getAllResponseHeaders()方法以一个字符串形式返回所有的响应头部（每一个头部占单独的一行）。如果readyState的值不是3或4，则该方法返回null。
　　下面是一个简单的实例代码：
　　此方法实现一个简单的检测数据库中的用户名是否已经存在方法，访问一个已经写好的服务

<script language="javascript" type="text/javascript">
     var  xhr;
     
    if(window.ActiveXObject)//判断浏览器是否支持ActiveX
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    else if (window.XMLHttpRequest)//判断浏览器是否支持XHR
        xhr = new  XMLHttpRequest();
        
    function  send()//自定义方法
        {
            var checkname = document.getElementById("tbxName").value;
            
            xhr.open("POST","http://localhost:1956/CheckBySql/Service.asmx",true);

            xhr.SetRequestHeader ("Content-Type","text/xml; charset=utf-8"); 
            xhr.SetRequestHeader ("SOAPAction","http://tempuri.org/IsExist"); 
            var  data="<?xml version=\"1.0\" encoding=\"utf-8\"?><soap:Envelope xmlns:xsi=\"http://www.w3.org/2001/XMLSchema-instance\" xmlns:xsd=\"http://www.w3.org/2001/XMLSchema\" xmlns:soap=\"http://schemas.xmlsoap.org/soap/envelope/\"><soap:Body><IsExist xmlns=\"http://tempuri.org/\"><name>" + checkname + "</name></IsExist></soap:Body></soap:Envelope>";
            xhr.onreadystatechange=processRequest; //事件处理，processRequeset是个处理方法
            xhr.send(data);
        }
        
        function processRequest()
         {
           //alert(xh.responseText);
           if(xh.readyState==4) //接受完毕
　　         {
　　          if(xh.status==200)//正确 401代表错误
　　            {
                    var pat= new RegExp("<IsExistResult>([\\w\\W]*?)<\\/IsExistResult>","i");
                    var ar=pat.exec(xh.responseText);
                    var x = ar[0].replace("<IsExistResult>","");
                    var y = x.replace("</IsExistResult>","");
                    var result = parseInt(y);
                    if(result == 1)
                    {
                        document.getElementById("lblMsg").innerHTML = "用户名已存在!";
                    }
                    else
                    {
                        document.getElementById("lblMsg").innerHTML = "用户名可以使用!";
                    }
                 }
　　          }
　       }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table class="style1">
            <tr>
                <td style="width: 50px">
                    <asp:Label ID="lblName" runat="server" Text="姓名："></asp:Label>
                </td>
                <td style="width: 129px">
                    <asp:TextBox ID="tbxName" runat="server" onblur="javascript:send();"></asp:TextBox>
                </td>
                <td>
                    <asp:Label ID="lblMsg" runat="server"></asp:Label>
                </td>
            </tr>
　　　</table>
    </div>
    </form>
</body>
</html>

　　总结：通过对XHR对象的使用，使我们可以在不刷新页面的情况下也可以更新数据。大大减轻了页面服务端的负担，是用户的感觉更加直观，使浏览器的交互能力大大加强！