Ajax之旅(三）-- 异步更新

上篇博文中，已经为大家在理论上讲述了什么是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",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/164494.html

Ajax之旅(三）-- 异步更新

猜你在找的Ajax相关文章