上篇博文中，已经为大家在理论上讲述了什么是XMLHttpRequest对象，它是Ajax实现异步更新的核心对象。下面，我们就通过一个实例，来了解XMLHTTPRequest对象的使用或者说异步更新的实现。
实例：判断用户代码是否重复
方案一：同步更新。原理如下图所示：
从上图中可以看到，当我们在浏览器用户代码输入框中输入“用户代码”后，只能等待服务器的响应，当服务器将结果反馈给浏览器后，我们才可以进行下一个操作，也就是继续输入“用户名称”。
这就是同步更新，这样必然会给用户带来几秒钟的等待时间，也许一个输入框显不出什么，如果每次输入点东西，就要等待几秒，哪怕一秒，还会有用户愿意继续使用我们的网站吗？所以，异步跟新出来了。
方案二：异步更新，原理如下图所示：
从上图可以看出和同步更新的明显不同。在异步更新中，我们使用了Ajax引擎，从图中看起来，也就好像是，在浏览器和服务器中间加入了中间层（Ajax引擎）。
这样，当我们输入完“用户代码”后，浏览器将请求发送给Ajax引擎，然后就可以继续输入“用户名称”了，不再需要等待。而Ajax引擎则再将请求发送给服务器。当服务器操作完成后，将结果返回给Ajax引擎，Ajax引擎再返回给浏览器，进而显示。简言之，浏览器只需要把请求发送给Ajax即可，然后该干什么还干什么；当Ajax引擎有更新时，利用回调函数返回给浏览器。这就是异步更新。
通过方案一，我们也很明显的知道了方案二的优势，那么究竟在代码中如何实现呢，下面是我针对上述实例---判断用户代码是否重复 的一些代码实现，仅供大家参考。当然，也利用这些实现，来让读者朋友们，对XMLHttpRequest对象的使用，有所深入了解。
第一步：创建Ajax核心对象XMLHttpRequest。
这里，我们需要针对不同的浏览器做不同的实例化结果。
<span style="font-size:18px;"> var xmlHttp;
function createXMLHttpRequest(){
//表示当前浏览器不是ie
if(window.XMLHttpRequest){
xmlHttp= newXMLHttpRequest();
} else if (window.ActiveXObject){
xmlHttp= newActiveXObject("Microsoft.XMLHTTP");
}
}</span>
第二步：注册回调函数。
回调函数，是XMLHttpRequest对象实现异步更新的核心方法。发送一个请求后，客户端无法确定什么时候会完成这个请求，所以需要用事件机制来捕获请求的状态，XMLHttpRequest对象提供了onreadyStateChange事件实现这一功能，也就是我们常说的回调函数。
再通俗一点说：回调，不是你主动调的，是由服务器来调的（在这里是Ajax引擎调的。）
<span style="font-size:18px;"><span style="font-size:14px;">//注册回调函数 xmlHttp.onreadystatechange= callback;</span></span>
此处，需要注意一点：
<span style="font-size:18px;">xmlHttp.onreadystatechange = callback(); //代表方法调用 xmlHttp.onreadystatechange = callback; //代表把方法的地址传过去</span>
第三步：设置和服务器端的交互方式及相应参数。
就是我们常说的是get提交还是post提交，根据不同的提交方式，代码实现也不尽相同，下面给出的实现是get提交的代码。此处还有一个参数，xmlHttp.open("GET",
url, true)中，true代表是异步提交，false则代表同步提交，所以，想要实现异步更新，此处参数还需设置为true。
<span style="font-size:18px;"> //第三步：设置和服务器端的交互方式及相应参数
varurl= "user_validate.jsp?userId=" + trim(filed.value)+"&time=" + new Date().getTime() </span>
<span style="font-size:18px;"> xmlHttp.open("GET", url, true);</span>
第四步：向服务器端发送数据。
上述设置均完成后，我们只需要向服务器端发送数据即可。
<span style="font-size:18px;"> //第四步：向服务器端发送数据
xmlHttp.send(null);
} else {
document.getElementById("spanUserId").innerHTML = "";
}
</span>
第五步：利用callback函数，来判断与服务器端的交互是否完成，响应是否正确，并根据需要服务器端返回的数据，更新页面内容。
<span style="font-size:18px;">//第五步：判断与服务器端的交互是否完成
functioncallback(){
if (xmlHttp.readyState== 4) {
if (xmlHttp.status ==200) {
if (trim(xmlHttp.responseText)!= "") {
//alert(xmlHttp.responseText);
document.getElementById("spanUserId").innerHTML = "<fontcolor='red'>"
+ xmlHttp.responseText + "</font>"
}else{
document.getElementById("spanUserId").innerHTML = "";
}
} else {
alert("请求失败。错误码为：" + xmlHttp.status);
}
}
}</span>
这里需要注意：
<span style="font-size:18px;">ajax.readyState== 4 //只要有响应就返回。不管正确与否; Ajax引擎状态为成功 ajax.status ==200 //HTTP协议状态为成功</span>
五步下来，我们判断用户代码是否重复的异步更新也就实现啦，不知道你对Ajax，对XMLHttpRequest对象，对异步更新又了解了多少了？
Ajax之旅(三）-- 异步更新