AJAX并發(fā)與控制的討論

RobinHoo

　　AJAX作為網(wǎng)頁異步處理的成功解決方法已經(jīng)眾所周知，但是在具體的使用上還是有一些不同的技巧。由于最近自己的一個(gè)小程序的需要，比較徹底的研究了一下AJAX多線程并發(fā)及其控制的方法。這里需要感謝Rick Chen和Tom Li在并發(fā)控制代碼部分給出的意見和建議。下面我們來看看AJAX并發(fā)處理和控制的基本思路和流程控制。

• 由DOM對(duì)象觸發(fā)AJAX請(qǐng)求
• 生成AJAX對(duì)象，并檢測當(dāng)前并發(fā)請(qǐng)求數(shù)量是否大于最大請(qǐng)求上限。如果大于上限AJAX對(duì)象壓入隊(duì)列，否則直接發(fā)送請(qǐng)求，并且增加并發(fā)請(qǐng)求數(shù)目。
• 如果AJAX請(qǐng)求完成，進(jìn)入完成后處理。結(jié)束后并發(fā)數(shù)目減一，之后檢測隊(duì)列是否有等待請(qǐng)求，如果有發(fā)送隊(duì)首AJAX對(duì)象請(qǐng)求。

　　這里我不詳細(xì)闡述如何生成AJAX對(duì)象和發(fā)送請(qǐng)求的代碼，主要解釋關(guān)于并發(fā)處理的一些問題。相關(guān)的AJAX基礎(chǔ)知識(shí)和瀏覽器兼容性問題請(qǐng)自己察看網(wǎng)上相關(guān)資料。

　　在分析上述AJAX應(yīng)用的流程時(shí)我們發(fā)現(xiàn)，制約AJAX使用的兩個(gè)地方。

• 如何將觸發(fā)AJAX異步請(qǐng)求的DOM和相關(guān)參數(shù)傳入onreadystatechange函數(shù)，從而更好的進(jìn)行后續(xù)處理。
• 如何有效地控制并發(fā)請(qǐng)求的對(duì)服務(wù)器的負(fù)載問題，即控制批量觸發(fā)的AJAX請(qǐng)求有序和可控的發(fā)送到遠(yuǎn)端服務(wù)器。

針對(duì)第一個(gè)問題，我這里采用的是引入嵌套匿名函數(shù)的方法達(dá)到各瀏覽器的兼容性。相應(yīng)代碼可參閱函數(shù)processRequest。在這個(gè)函數(shù)中，示例中指采用了兩個(gè)參數(shù)，一是識(shí)別并發(fā)請(qǐng)求觸發(fā)AJAX對(duì)象本身（這在并發(fā)多線程處理時(shí)是很重要的），另一個(gè)是觸發(fā)AJAX請(qǐng)求的DOM對(duì)象本身的ID名稱。當(dāng)然還可以引入更多需要的參數(shù)用于AJAX請(qǐng)求完成后的處理，并在函數(shù)processEcho添加相應(yīng)的代碼。由于考慮到可能處理的AJAX請(qǐng)求回復(fù)的內(nèi)容可能是針對(duì)requestXML，該函數(shù)傳入?yún)��?shù)是AJAX對(duì)象而不是requestText本身，當(dāng)然可以跟據(jù)自己的需求修改這一點(diǎn)。

第二個(gè)問題的處理過程中采用了類似隊(duì)列線形進(jìn)出的方式，將超過最大并發(fā)請(qǐng)求的AJAX對(duì)象的請(qǐng)求暫緩發(fā)送，先將AJAX對(duì)象壓入隊(duì)列。等到先期發(fā)送對(duì)象完成自身請(qǐng)求后，再檢測隊(duì)列是否為空，如果不空再將隊(duì)列首的AJAX的對(duì)象請(qǐng)求發(fā)送出去。這樣既滿足了服務(wù)器負(fù)載的考慮又照顧到AJAX請(qǐng)求發(fā)送的及時(shí)性。

       JavaScript語言: Ajax并發(fā)與控制代碼示例
       01 var max_session=10;
02 var sessions=0;
03 var requestQue=new Array();
04 function createRequest(method, url, async, objID)
05 {
06     var request = new Object();
07     if (window.ActiveXObject) request.ajax = new ActiveXObject("Microsoft.XMLHTTP");
08     else if (window.XMLHttpRequest) request.ajax = new XMLHttpRequest();
09     
10     if (request.ajax)
11     {
12         request.url=url;
13         request.method=method;
14         request.async=async;
15         request.objID=objID;
16         if(sessions<max_session)
17         {
18             sessions++;
19             sendRequest(request);
20             return;
21         }
22         else
23         {
24             requestQue.push(request);
25         }
26     }
27 }
28
29 function sendRequest(request)
30 {
31     
32     request.ajax.open(request.method, request.url, request.async);
33     request.ajax.onreadystatechange = processRequest(request.ajax,request.objID);
34     request.ajax.send(null);   
35 }
36
37 function checkQue()
38 {
39     if (sessions<max_session || requestQue.length>0)
40     {
41         sessions++;
42         var request = requestQue.shift();
43         if(request)
44         {
45             //Do something before sending request about object
46             preworkBeforeRequest(objID);
47             sendRequest(request);
48         }
49     }   
50 }
51
52 function processRequest(request,objID)
53 {
54     return function()
55     {
56         if(request.readyState!=4||request.status!=200) return false;
57         //Handle the response text or XML
58         processEcho(request,objID);
59         sessions--;
60         checkQue();
61     };
62
63 }
64
65 function preworkBeforeRequest(objID)
66 {
67     //Do something before sending request about object
68
69 }
70
71 function processEcho(request,objID)
72 {
73         echoText=requst.responseText;
74         echoXML=request.responseXml;
75         //Do something related with echo Text
76         
77         //Do something related with echo XML
78         
79         //Do something related with ObjID
80
81 }

[ 本帖最后由 RobinHoo 于 2008-8-30 15:41 編輯 ]