五、Invoke 函數
Invoke 函數是核心所在，前面我畫的流程圖中已經簡單地描述了它的主要流程。不過這個函數太重要了，這裡還是列出它的全部源碼：
1AJaxPro.Request = Class.create();
2AjaxPro.Request.prototype = (new AJaxPro.Base()).extend({
3 invoke: function(method, data, callback) {
4 var async = typeof callback == "function" && callback != AJaxPro.noOperation;
5 var JSon = AJaxPro.toJSON(data) + "\r\n";
6
7 if(AJaxPro.cryptProvider != null)
8 JSon = AJaxPro.cryptProvider.encrypt(JSon);
9
10 this.callback = callback;
11
12 if(async) {
13 this.XMLHttp.onreadystatechange = this.DOStateChange.bind(this);
14 if(typeof this.onLoading == "function") this.onLoading(true);
15 }
16
17 this.XMLHttp.open("POST", this.url, async);
18 this.XMLHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
19 this.XMLHttp.setRequestHeader("Content-Length", JSon.length);
20 this.XMLHttp.setRequestHeader("AJax-method", method);
21
22 if(AjaxPro.token != null && AJaxPro.token.length > 0)
23 this.XMLHttp.setRequestHeader("Ajax-token", AJaxPro.token);
24
25 if(MS.Browser.isIE)
26 this.XMLHttp.setRequestHeader("Accept-Encoding", "gzip, deflate");
27 else
28 this.XMLHttp.setRequestHeader("Connection", "close"); // Mozilla Bug #246651
29
30 if(this.onTimeout != null && typeof this.onTimeout == "function")
31 this.timeoutTimer = setTimeout(this.timeout.bind(this), this.timeoutPeriod);
32
33 this.XMLHttp.send(JSon);
34
35 JSon = null;
36 data = null;
37 delete JSon;
38 delete data;
39
40 if(!async) {
41 return this.createResponse();
42 }
43
44 return true;
45 }
46});
47
嗯，相當復雜啊。我們慢慢地看。
AjaxPro.Request 類當然不是只有 Invoke 一個函數，這裡省去了其它函數。嗯，我們看到，AjaxPro.Request 也是從 AJaxPro.Base “繼承”下來的。
第4行的 async，字面上理解就是指異步，這一行什麼意思？嗯，如果傳進來的 callback 類型是函數，並且不是無操作，那就認為是異步的。
第5行的 JSon，它可是相當重要啊。這裡調用了 AJaxPro.toJSON 方法把傳進來的數據進行了某種編碼，本例中這個數據當然就是從 doTest1_next 一路傳進來的 TextBox 裡我們輸入的字符串值了，這個函數的實現，本文也不再列出，可以參見 core.ashx 文件。
接下來第7到8行，如果提供了加密，那麼就對 JSon 進行加密。這個好理解。
第12到15行，如果是異步的，那麼這裡將 doStateChange 函數綁定到 onreadystatechange 事件上去。嗯，這裡的綁定其實也是在 core.ashx 文件裡聲明的一個方法，本文不再闡述它的實現了，大家有興趣，可以自己去看。綁定完成後，當服務端完成操作後，DOStateChange 函數會被調用，這時可以進行更改頁面的工作。此外，這裡還檢測了一下 onLoading 事件。
第17行到第33行可謂核心代碼，我們知道 AJax 就是使用的 XMLHttpRequest 來完成無刷新頁面的。這裡我們可看到 this.XMLHttp 被用來進行了請求封裝。其中值得我們注意的，Content-Length 使用的 JSon.length，Ajax-method 則使用的就是傳進來的 AJaxMethod 方法名稱，本例中為 EchoInput。第30、31行設置了超時處理，當然了，頁面不能死等嘛。第33行則將 JSon 發送到服務端。
接下來的第41行，我們看到如果不是異步操作的話，此處將直接調用 createResponse 函數獲得響應。那如果是異步操作呢？記得我們設置了 DOStateChange 吧？異步的返回處理就是它的事了。createResponse 函數後面再介紹。
六、解釋“繼承”
前面我們好幾次看到貌似繼承。當然它們都僅僅是貌似而已。看看以下 core.ashx 中的代碼就明白了：
1Object.extend = function(destination, source) {
2 for(property in source) {
3 destination[property] = source[property];
4 }
5 return destination;
6}
7
哈哈，所謂的“繼承”，其實只是個屬性拷貝而已。
七、this.XMLHttp 從何而來？
前面我們看到了 this.XMLHttp 大顯神威。那麼它是哪兒來的？看看 AJaxPro.Request 類的 initialize 函數吧（有刪節）：
1initialize: function(url) {
2 this.XMLHttp = new XMLHttpRequest();
3}
4
是了，XMLHttp 只是 XMLHttpRequest 的一個實例。那麼 XMLHttpRequest 的定義呢？
1var lastclsid = null;
2if(!window.XMLHttpRequest) {
3
4 function getXMLHttp(clsid) {
5 var XMLHttp = null;
6 try {
7 XMLHttp = new ActiveXObject(clsid);
8 lastclsid = clsid;
9 return XMLHttp;
10 } catch(ex) {}
11 }
12
13 window.XMLHttpRequest = function() {
14 if(lastclsid != null) {
15 return getXMLHttp(lastclsid);
16 }
17
18 var XMLHttp = null;
19 var clsids = ["MsXML2.XMLHTTP.6.0","MsXML2.XMLHTTP.5.0","MsXML2.XMLHTTP.4.0","MsXML2.XMLHTTP.3.0","MsXML2.XMLHTTP.2.6","Microsoft.XMLHTTP.1.0","Microsoft.XMLHTTP.1","Microsoft.XMLHTTP"];
20
21 for(var i=0; i<clsids.length && XMLHttp == null; i++) {
22 XMLHttp = getXMLHttp(clsids[i]);
23 }
24
25 if(XMLHttp == null) {
26 return new IFrameXMLHttp();
27 }
28
29 return XMLHttp;
30 }
31}
32
哦，原來是在這裡真正創建的。說到底還是一個 ActiveXObject 啊。關於這個本文也不再多提。不過代碼中還需要注意的一點是，
如果把第19行列出的一大堆clsids 都處理過了還沒有得到對象怎麼辦？注意到第26行 new 了一個 IFrameXMLHttp。
IFrameHttp 是在 core.ashx 中定義的，它基本上完全模擬了 ActiveXObject 對象的功能。想研究研究的，自己看源碼吧。篇幅所限，這裡不多講啦。
八、DOStateChange 函數
嗯，前面已經提過，異步的話 DOStateChange 函數將會在服務端返回後執行，看看它的源碼呢：
1DOStateChange: function() {
2 if(this.onStateChanged != null && typeof this.onStateChanged == "function")
3 try{ this.onStateChanged(this.XMLHttp.readyState); }catch(e){}
4
5 if(this.XMLHttp.readyState != 4)
6 return;
7
8 if(this.XMLHttp.status == 200) {
9 if(this.timeoutTimer != null) clearTimeout(this.timeoutTimer);
10 if(typeof this.onLoading == "function") this.onLoading(false);
11
12 this.XMLHttp.onreadystatechange = AJaxPro.noOperation;
13
14 this.callback(this.createResponse());
15 this.callback = null;
16
17 this.XMLHttp.abort();
18 }
19},
20
如果 status 是 200，也就是 OK，那麼清除掉超時處理函數，處理 onLoading 事件，最後使用 callback 調用 createResponse 函數。還記得如果不是異步的話，createResponse 將會直接調用而不是通過 DOStateChange 吧。
九、createResponse 函數
1createResponse: function() {
2 var r = new Object();
3 r.error = null;
4 r.value = null;
5
6 var responseText = new String(this.XMLHttp.responseText);
7
8 if(AjaxPro.cryptProvider != null && typeof AJaxPro.cryptProvider == "function")
9 responseText = AJaxPro.cryptProvider.decrypt(responseText);
10
11 eval("r.value = " + responseText + ";");
12
13 if(r.error != null && this.onError != null && typeof this.onError == "function")
14 try{ this.onError(r.error); }catch(e){}
15
16 responseText = null;
17
18 return r;
19}
如果前面的 JSon 也就是 Request 是加過密的，這裡就需要對 responseText 進行解密。完了之後得到 r.value，r 將會被返回並提供給 callback 函數。本例中將最終傳回 doTest1_callback，r 被傳入它的 res 參數。最後更新文本框下的字符串，整個 AJax ClIEntScript 的流程就差不多是完成了。
十、簡單總結一下
呼，長出一口氣。總算可以告一段落了，AJaxPro 服務端的拆解過段時間再說吧。
在分析 ClIEntScript 端的時候真是大有感觸，JavaScript 其實遠比人們想象的強大和管用。其實我同大多數人一樣，起初也對它很不感冒，但是之前曾有兩件事讓我改變了觀念。其一是閱讀了黃忠成的《深入剖析 ASP.NET 組件設計》，才發現原來許多強大炫目的 ASP.Net 的控件，其實都是用的 JavaScript 實現。其二是在研究國外某文檔浏覽器實現的時候，發現人家使用 Javascript 在 IE 下相當完美地實現了強大靈活有如桌面程序的界面和功能，真是吃驚不小。當時就發現了自己對 JavaScript 的了解實在是嚴重汗顏，慚愧無地。無奈平時沒有多少時間去學習提高自己，只能偶爾抽抽空余時間了解了解，充充電吧。
相信 JavaScript 之類的腳本必將在未來的 Web 應用中大展身手。