Ajax之旅（二）--XMLHttpRequest

来源：互联网发布：php class实例化编辑：程序博客网时间：2024/06/03 11:22

上文中提到的Ajax的异步更新，主要使用XMLHttpRequest对象来实现的，XMLHttpRequest对象可以在不向服务器提交整个页面的情况下，实现局部更新网页。当页面全部加载完毕后，客户端通过该对象向服务器请求数据，服务器端接受数据并处理后，向客户端反馈数据。关于XMLHttpRequest对象方法和属性如下（聊一眼即可，不是本文重点）：

<html><head><title>XMLHTTPRequest对象的说明DEMO</title><script language="javascript" type="text/javascript"><!--var xmlhttp;// 创建一个XMLHTTPRequest对象function createXMLHTTPRequext(){      if(window.ActiveXObject) {           xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');    }    else if(window.XMLHTTPRequest){       xmlhttp = new XMLHTTPRequest();    }}function PostOrder(xmldoc){    createXMLHTTPRequext();        // Open方法---创建一个新的http请求，并指定此请求的方法、URL以及验证信息    //     （1）语法：XMLHttpRequest.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);    //      （2）参数：bstrMethod（http方法，例如：POST、GET、PUT及PROPFIND。大小写不敏感） //   bstrUrl（请求的URL地址，可以为绝对地址也可以为相对地址）//   varAsync[可选]（布尔型，指定此请求是否为异步方式，默认为true。如果为真，当状态改变时会调用onreadystatechange属性指定的回调函数） //   bstrUser[可选]（如果服务器需要验证，此处指定用户名，如果未指定，当服务器需要验证时，会弹出验证窗口）    //                 bstrPassword[可选]（验证信息中的密码部分，如果用户名为空，则此值将被忽略）         // 备注：调用此方法后，可以调用send方法向服务器发送数据。    xmlhttp.Open("get", "http://localhost/example.htm", false);        // onreadystatechange属性---指定当readyState属性改变时的事件处理句柄    //  （1）语法：XMLHttpRequest.onreadystatechange = funcMyHandler;    //      （2）如下的例子演示当XMLHTTPRequest对象的readyState属性改变时调用HandleStateChange函数，    // （3）当数据接收完毕后（readystate == 4）此页面上的一个按钮将被激活    // 备注：此属性只写，为W3C文档对象模型的扩展    xmlhttp.onreadystatechange= HandleStateChange;         // send方法---发送请求到http服务器并接收回应    // （1）语法：XMLHttpRequest.send(varBody);    // （2）参数：varBody （欲通过此请求发送的数据）     // 备注：此方法的同步或异步方式取决于open方法中的bAsync参数，如果bAsync == False，此方法将会等待请求完成或者超时时才会返回，如果bAsync == True，此方法将立即返回。     xmlhttp.Send(xmldoc);    // abort方法---取消当前请求    // （1）语法：XMLHttpRequest.abort();    // 备注：调用此方法后，当前请求返回UNINITIALIZED 状态。    xmlhttp.abort();    }function HandleStateChange(){    // readyState属性---返回XMLHTTP请求的当前状态    // （1）语法：lValue = oXMLHttpRequest.readyState;    // 备注：变量，此属性只读，状态用长度为4的整型表示.定义如下：    // （1）0 (未初始化) 对象已建立，但是尚未初始化（尚未调用open方法）     // （2）1 (初始化) 对象已建立，尚未调用send方法     // （3）2 (发送数据) send方法已调用，但是当前的状态及http头未知     // （4）3 (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，     // （5）4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据     if (xmlhttp.readyState == 4){if(xmlhttp.status =200 ){     document.frmTest.myButton.disabled = false;    //status属性---返回当前请求的http状态码   // （1）语法：Value = oXMLHttpRequest.status;   // （2）返回值：长整形标准http状态码，定义如下：    //  // 100:Continue // 101:Switching protocols // 200:OK // 201:Created // 202:Accepted // 203:Non-Authoritative Information // 204:No Content // 205:Reset Content // 206:Partial Content // 300:Multiple Choices // 301:Moved Permanently // 302:Found // 303:See Other // 304:Not Modified // 305:Use Proxy // 307:Temporary Redirect // 400:Bad Request // 401:Unauthorized // 402:Payment Required // 403:Forbidden // 404:Not Found // 405:Method Not Allowed // 406:Not Acceptable // 407:Proxy Authentication Required // 408:Request Timeout // 409:Conflict // 410:Gone // 411:Length Required // 412:Precondition Failed // 413:Request Entity Too Large // 414:Request-URI Too Long // 415:Unsupported Media Type  // 416:Requested Range Not Suitable  // 417:Expectation Failed  // 500:Internal Server Error  // 501:Not Implemented // 502:Bad Gateway // 503:Service Unavailable // 504:Gateway Timeout  // 505:HTTP Version Not Supported    // 备注：长整形，此属性只读，返回当前请求的http状态码,此属性仅当数据发送并接收完毕后才可获取。    alert(xmlhttp.status);   }          }}//--></script></head><body><form name="frmTest">        <input name="myButton" type="button" value="Click Me" onclick="PostOrder('http://localhost/example.htm');"></form>    </body></html>

要想更加深入的了解XMLHttpRequest对象，只知道其方法和属性只是其基础，我们还需要理解其创建和使用过程。以下是我通过一个小Demo总结分析的XMLHttpRequest对象创建和使用的，算是原理吧。不足之处还请您指导！

1.首先，通过createXMLHTTPRequest方法，创建一个XMLHTTPRequest对象。其中简单的分支逻辑是为了确定如何创建对象。判断浏览器是否支持ActiveX控件，依此来确定浏览器是否为IE。

2.其次，通过Open方法，建立对服务器的调用，并且设置URL以及所希望的HTTP方法，通常是Get或者Post。关于Get和Post的不同，请见下图：

3.再者，当通用服务器后，我们需要完成一项任务，那便是确定当服务器返回所需数据，或者说XMLHTTPRequest的状态发生变化时，调用HandleStateChange函数。xmlhttp.onreadystatechange= HandleStateChange;

4.然后，当设置好“要去哪儿（对服务器的调用）”和“回到哪儿（HandleStateChange函数）”后，就可以发送请求了。xmlhttp.Send(xmldoc);

5.最后，就需要HandleStateChange函数来检查XMLHTTPRequest的readystate属性，然后检查服务器返回的状态码，如果一切正常，HandleStateChange函数就会在客户端执行相应操作。这也就是所谓的回调函数。

以上说了说XMLHTTPRequest这个Ajax核心对象的使用，那么它是如何实现异步更新的呢？这就体现在咱们上面提到的回调函数了。大家看上面程序的调用顺序，在第三步中我们就设置了服务器返回数据时所需调用的函数，设置完成之后，我们就不用管他了，完全可以继续我们下一步的操作（例如第四步），在我们的操作过程中，一旦XMLHTTPRequest的状态发生变化，就会自动调用HandleStateChange函数，来实现其中功能。这整个过程就很容易的实现了异步更新。

4 0