Client端异步Callback实现的原理

原创 2007年09月16日 15:52:00

我已经介绍了Client-Callback技术,那么让我们来探讨一下Client-Callback技术怎样实现异步刷新吧(实现原理)。正所谓"知其然,知其所以然"。

运行前一篇文章的(http://blog.csdn.net/goalbell/archive/2007/09/16/1787213.aspx)例子,用firebug调试并打开查看一下WebResource.axd?d=23ERqfzqTJs6_Rg9n1je_Q2&t=633249794114687500。你会发现里面大有文章,呵呵!微软已经帮你封装好实现异步所需要的技术了,即是XmlHttpRequest对象。从firebug里面的js代码总共有537行,实现的技术大部分围绕XmlHttpRequest对象以及Dom技术。下面分析核心代码(core)的实现过程吧。Let's Start!

下面的一段代码取自WebForm_DoCallback的函数里面:

 var xmlRequest,e;
 try {
  xmlRequest = new XMLHttpRequest();
}
catch(e) {
try {
xmlRequest = new ActiveXObject("Microsoft.XMLHTTP");
 }
catch(e) {
}
}
 var setRequestHeaderMethodExists = true;
try {
 setRequestHeaderMethodExists = (xmlRequest && xmlRequest.setRequestHeader);
}
catch(e) {}
 var callback = new Object();
callback.eventCallback = eventCallback;
 callback.context = context;
 callback.errorCallback = errorCallback;
callback.async = useAsync;
 var callbackIndex = WebForm_FillFirstAvailableSlot(__pendingCallbacks, callback);
if (!useAsync) {
if (__synchronousCallBackIndex != -1) {
 __pendingCallbacks[__synchronousCallBackIndex] = null;
 }
 __synchronousCallBackIndex = callbackIndex;
 }
 if (setRequestHeaderMethodExists) {
 xmlRequest.onreadystatechange = WebForm_CallbackComplete;
 callback.xmlRequest = xmlRequest;
 xmlRequest.open("POST", theForm.action, true);
 xmlRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlRequest.send(postData);
return;
}

分析一下:

             首先实例化一个兼容三种浏览器(IE、FF、SF)的XmlHttpRequest对象,接着调用javascript内置的Object类来建立一个callback构造函数,该构造函数总共有四个属性。至于Callback构造函数有什么用呢?接下来这一句callback.xmlRequest=xmlRequest可以看到,将XmlHttpRequest的实例赋给了callback的属性了。最后XmlHttpRequest的实例(xmlRequest),即xmlRequest的回调方法onreadystatechange指向了WebForm_CallbackComplete,而WebForm_CallbackComplete这个函数干什么的呢?下面会分析的;xmlRequest向服务器发送请求,theForm.action怎样获得的呢?她是通过WebForm_DoPostBackWithOptions函数来获得的。由于xmlRequest是用"POST"方法向服务器请求的,所以要标明请求的头格式以及发送的参数。好了分析完上面的代码之后,我们一起来看一下WebForm_CallbackComplete究竟做了什么呢?

下面的是完整的函数示例:

function WebForm_CallbackComplete() {
 for (i = 0; i < __pendingCallbacks.length; i++) {
 callbackObject = __pendingCallbacks[i];
 if (callbackObject && callbackObject.xmlRequest && (callbackObject.xmlRequest.readyState == 4)) {
 WebForm_ExecuteCallback(callbackObject);
 if (!__pendingCallbacks[i].async) {
 __synchronousCallBackIndex = -1;
 }
 __pendingCallbacks[i] = null;
var callbackFrameID = "__CALLBACKFRAME" + i;
var xmlRequestFrame = document.getElementById(callbackFrameID);
if (xmlRequestFrame) {
 xmlRequestFrame.parentNode.removeChild(xmlRequestFrame);
 }
 }
 }

我们看一下,_pendingCallbacks怎样来的,var __pendingCallbacks = new Array();原来_pendingCallbacks是一个数组变量来的,其实从循环也可以猜到了。接着就将它赋给一个callback对象了,其实callback对象上面已经实例化了(上面那个callback构造函数)。最后就是判断xmlRequest的状态码来执行WebForm_ExecuteCallback函数。

最后,如果大家有什么好的看法可以反馈给我。

 

jQuery源码解析(2)—— Callback、Deferred异步编程

闲话这篇文章,一个月前就该出炉了。跳票的原因,是因为好奇标准的promise/A+规范,于是学习了es6的promise,由于兴趣,又完整的学习了《ECMAScript 6入门》。本文目的在于解析jQ...
  • vbdfforever
  • vbdfforever
  • 2016年03月26日 14:18
  • 1485

Akka工作原理

Akka工作原理
  • birdben
  • birdben
  • 2015年11月12日 11:50
  • 2284

RPC-client异步回调原理

RPC-client异步回调原理 见下面的设计图: 所谓异步回调,在得到结果之前,不会处于阻塞状态,理论上任何时间都没有任何线程处于阻塞状态,因此异步回调的模型,理论上只需要很少的...
  • chenglinhust
  • chenglinhust
  • 2017年06月03日 19:48
  • 819

异步事件回调机制原理探索

自定义的异步事件回调机制: 可以在自己的应用程序中,先注册事件和事件对应的回调函数(回调函数可以是函数指针法,虚函数方法的方式);自己程序中每帧检测事件是否发生或者条件是否满足,满足的时候就进入回调函...
  • Blues1021
  • Blues1021
  • 2015年03月15日 12:58
  • 5277

Java并发编程之异步Future机制的原理和实现

Java并发编程之异步Future机制的原理和实现           项目中经常有些任务需要异步(提交到线程池中)去执行,而主线程往往需要知道异步执行产生的结果,这时我们要怎么做呢?用r...
  • a1282379904
  • a1282379904
  • 2016年08月27日 14:27
  • 5702

jQuery异步框架探究3:jQuery.when方法

(本篇文章针对jQuery1.6.1版本)经过前两篇文章对jQuery异步回调机制的详细分析,关于jQuery如何实现异步回调机制的原理已经非常清楚了--将"回调函数"与"击发动作"两个步骤分开,这样...
  • warhin
  • warhin
  • 2016年03月27日 14:03
  • 1172

详解回调函数——以JS为例解读异步、回调和EventLoop

很多人在问什么是回调?百度出来的答案基本都不正确,看了只会让人更加迷惑。下文试着用尽量简单的例子帮大家梳理清楚,因为回调并不是一句话下定义就能明白的概念,需要用一段文字像讲故事一样来说明,回调如同很多...
  • tywinstark
  • tywinstark
  • 2015年09月14日 21:34
  • 21157

python异步回调函数的实现

说到异步回调函数的应用,最经典的就是ajax。 首先我们回想一下ajax是如何工作的。variable=new XMLHttpRequest(); xmlhttp.onreadystatechang...
  • payinglee
  • payinglee
  • 2013年06月01日 19:48
  • 14552

理解javascript异步机制(setTimeout )

最近在学nodejs ,对于异步的概念早就理解了,但是,却有一个问题一直不解。 问题描述: javascript是一个单线程的语言,那他是如何实现异步的呢? 看了很多资料,终于找...
  • zhouyongwinner
  • zhouyongwinner
  • 2014年12月26日 17:19
  • 1819

Angular服务Request异步请求的详细分析

首先这里我简单写个例子来方便您的理解var request = { post: function() { var errorCallback = { e...
  • qq_27080247
  • qq_27080247
  • 2016年05月23日 17:04
  • 9336
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Client端异步Callback实现的原理
举报原因:
原因补充:

(最多只允许输入30个字)