xmlhttp是如何完成异步操作的

本文深入探讨了AJAX的异步操作原理,解释了XMLHttpRequest如何通过onreadystatechange事件实现异步请求,以及如何在状态标志为4时,通过回调函数处理服务器响应。
    ajax第一个字母就是Asynchronous-异步,那么到底xmlhttp为何能支持异步操作呢?
    大家在使用ajaxpro的时候,经常这么调用服务器端方法
None.giffunction DoSomething()
ExpandedBlockStart.gifContractedBlock.gif
dot.gif{
InBlock.gif    MyPage.Method1.Do(val1,val2,CallBack);
ExpandedBlockEnd.gif}

None.gif
None.giffunction CallBack(res)
ExpandedBlockStart.gifContractedBlock.gif
dot.gif{
InBlock.gif   
//res.value;
ExpandedBlockEnd.gif
}

这样在调用DoSomething方法的时候,会很快返回,用户可以继续操作界面,直到回调函数得到通知运行,再处理本次请求的结果。这就是一次异步操作。
   那是通过什么样的机制来完成对CallBack函数的通知的呢,XmlHttpRequest对象支持一种onreadystatechange的委托,请求j状态的更改会触发这个委托。 HTTP 就绪状态表示请求的状态或情形。它用于确定该请求是否已经开始、是否得到了响应或者请求/响应模型是否已经完成。它还可以帮助确定读取服务器提供的响应文本或数据是否安全。在 Ajax 应用程序中需要了解五种就绪状态:
 0:请求没有发出(在调用 open() 之前)。

 1:请求已经建立但还没有发出(调用 send() 之前)。

 2:请求已经发出正在处理之中(这里通常可以从响应得到内容头部)。

 3:请求已经处理,响应中通常有部分数据可用,但是服务器还没有完成响应。

 4:响应已完成,可以访问服务器响应并使用它。
 
   在ajax中最常用的就是状态标志4,回调函数中发现状态标志为4的时候,就可以做处理请求数据的操作了。
比如创建XmlHttpRequest的代码如下:

ExpandedBlockStart.gifContractedBlock.giffunction CreateXMLHttpRequest()dot.gif{
InBlock.gif   
// Initialize Mozilla XMLHttpRequest object
ExpandedSubBlockStart.gifContractedSubBlock.gif
   if (window.XMLHttpRequest)dot.gif{
InBlock.gif       xmlHttp 
= new XMLHttpRequest();
ExpandedSubBlockEnd.gif   }
 
InBlock.gif   
// Initialize for IE/Windows ActiveX version
ExpandedSubBlockStart.gifContractedSubBlock.gif
   else if (window.ActiveXObject) dot.gif{
ExpandedSubBlockStart.gifContractedSubBlock.gif       
trydot.gif{
InBlock.gif            xmlHttp 
= new ActiveXObject("Msxml2.XMLHTTP.3.0");
ExpandedSubBlockEnd.gif       }
 
ExpandedSubBlockStart.gifContractedSubBlock.gif       
catch (e)dot.gif{
ExpandedSubBlockStart.gifContractedSubBlock.gif            
trydot.gif{
InBlock.gif            xmlHttp 
= new ActiveXObject("Microsoft.XMLHTTP");
ExpandedSubBlockEnd.gif            }

ExpandedSubBlockStart.gifContractedSubBlock.gif            
catch (e)dot.gif{newsstring = "<div class='loading'>Loading rquest content fail, Please try it again latterdot.gif</div>";}
ExpandedSubBlockEnd.gif       }

ExpandedSubBlockEnd.gif   }

ExpandedBlockEnd.gif}

发出xmlhttprequest并支持回调函数的代码如下: 

None.gif xmlHttp.onreadystatechange = function(){
None.gif   // only if xmlHttp shows 
"complete"
None.gif   if (xmlHttp.readyState 
== 4){
None.gif      // only http 
200 to process
None.gif      if (  xmlHttp.status == 200){
None.gif         CallBack()
;         
None.gif
      }
None.gif   }
None.gif}
None.gif   xmlHttp.open(
"GET", url, true);
None.gif
   xmlHttp.setRequestHeader("If-Modified-Since","0");
None.gif
   xmlHttp.send(null);

CallBack函数就可以执行对请求数据的处理了。
 
 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值