Ajax之旅(二)--XMLHttpRequest

     上文中提到的Ajax的异步更新。主要使用XMLHttpRequest对象来实现的,XMLHttpRequest对象能够在不向server提交整个页面的情况下,实现局部更新网页。

当页面所有载入完毕后。client通过该对象向server请求数据,server端接受数据并处理后,向client反馈数据。

 关于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[可选](假设server须要验证。此处指定username。假设未指定,当server须要验证时,会弹出验证窗体) // bstrPassword[可选](验证信息中的password部分。假设username为空,则此值将被忽略) // 备注:调用此方法后,能够调用send方法向server发送数据。 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方法---发送请求到httpserver并接收回应 // (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方法,建立对server的调用,而且设置URL以及所希望的HTTP方法,一般是Get或者Post。关于GetPost的不同。请见下图:


     3.再者,当通用server后,我们须要完毕一项任务,那便是确定当server返回所需数据。或者说XMLHTTPRequest的状态发生变化时。调用HandleStateChange函数。

xmlhttp.onreadystatechange= HandleStateChange;

     4.然后,当设置好“要去哪儿(对server的调用)”和“回到哪儿(HandleStateChange函数)”后。就能够发送请求了。xmlhttp.Send(xmldoc);

     5.最后,就须要HandleStateChange函数来检查XMLHTTPRequestreadystate属性,然后检查server返回的状态码。假设一切正常。HandleStateChange函数就会在client运行对应操作。这也就是所谓的回调函数。

 

     以上说了说XMLHTTPRequest这个Ajax核心对象的使用,那么它是怎样实现异步更新的呢?这就体如今咱们上面提到的回调函数了。

大家看上面程序的调用顺序,在第三步中我们就设置了server返回数据时所需调用的函数,设置完毕之后,我们就不用管他了。全然能够继续我们下一步的操作(比如第四步)。在我们的操作过程中,一旦XMLHTTPRequest的状态发生变化。就会自己主动调用HandleStateChange函数,来实现当中功能。这整个过程就非常easy的实现了异步更新。

【推广】 免费学中医,健康全家人
原文地址:https://www.cnblogs.com/zhchoutai/p/8330771.html