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。关于Get和Post的不同。请见下图：
3.再者，当通用server后，我们须要完毕一项任务，那便是确定当server返回所需数据。或者说XMLHTTPRequest的状态发生变化时。调用HandleStateChange函数。
xmlhttp.onreadystatechange= HandleStateChange;
4.然后，当设置好“要去哪儿（对server的调用）”和“回到哪儿（HandleStateChange函数）”后。就能够发送请求了。xmlhttp.Send(xmldoc);
5.最后，就须要HandleStateChange函数来检查XMLHTTPRequest的readystate属性，然后检查server返回的状态码。假设一切正常。HandleStateChange函数就会在client运行对应操作。这也就是所谓的回调函数。
以上说了说XMLHTTPRequest这个Ajax核心对象的使用，那么它是怎样实现异步更新的呢？这就体如今咱们上面提到的回调函数了。
大家看上面程序的调用顺序，在第三步中我们就设置了server返回数据时所需调用的函数，设置完毕之后，我们就不用管他了。全然能够继续我们下一步的操作（比如第四步）。在我们的操作过程中，一旦XMLHTTPRequest的状态发生变化。就会自己主动调用HandleStateChange函数，来实现当中功能。这整个过程就非常easy的实现了异步更新。
浙公网安备 33010602011771号