ajax實現WEB頁面上多任務同時作業

 

今天需要寫一個功能，對於資料庫中的資料，在使用者通過WEB顯示出來的時候，自動啟動伺服器端指令碼對每個資料的有效性進行檢測，並將結果呈現給使用者。

 

我考慮的就是，呈現每條資料的時候，啟動一個ajax通訊進程，將結果反饋回來就OK了。

細節方面需要考慮的是，每個進程完成任務後在回調的時候如何知道它的“宿主”資料是哪一個（哪條資料發起的任務）。

 

還有由於XMLHttpRequest對於每個任務都是私人的，我們需要多任務並發，所以這裡我使用一個類封裝整個任務。每次啟動一個類對象，將其作為類的私人成員。

 

下面看看我們的用戶端指令碼模型

 

//檢測URL的ajax進程類<br />function TaskAjaxProcess()<br />{<br />//類成員XMLHttpRequest<br />var http_request_check_url = false;</p><p>//啟動任務<br />this.start_task = function( $obj )<br />{<br />var checkurl = $obj.alt;<br />////////////建立http request//////////////////<br />http_request_check_url=false;</p><p>//開始初始化XMLHttpRequest對象<br />if(window.XMLHttpRequest)//Mozilla瀏覽器<br />{<br />http_request_check_url=new XMLHttpRequest();<br />if(http_request_check_url.overrideMimeType)<br />{//設定MIME類別<br />http_request_check_url.overrideMimeType("text/xml");<br />}<br />}<br />else if(window.ActiveXObject)//IE瀏覽器<br />{<br />try<br />{<br />http_request_check_url=new ActiveXObject("Msxml2.XMLHttp");<br />}<br />catch(e)<br />{<br />try<br />{<br />http_request_check_url=new ActiveXobject("Microsoft.XMLHttp");<br />}<br />catch(e){}<br />}<br />}<br />//異常，建立對象執行個體失敗<br />if(!http_request_check_url)<br />{<br />document.getElementById("searchresult").innerHTML="<font color=red>Fault error:建立XMLHttp對象失敗！</font>";<br />return false;<br />}</p><p>//在URL添加隨機數防止瀏覽器cache頁面<br />//將發起者（任務宿主）ID也傳進PHP指令碼<br />var post_url= "checkURL.php?url=" + checkurl + "&id=" + $obj.id + "&random=" + Math.random()*(10000);</p><p>http_request_check_url.onreadystatechange=this.showCheckURLResult;//註冊完成的回呼函數<br />http_request_check_url.open("GET",post_url,true);<br />http_request_check_url.send(null);<br />}</p><p>//完成的回呼函數<br />this.showCheckURLResult = function()<br />{<br />if(http_request_check_url.readyState==4)<br />{<br />if(http_request_check_url.status==200)//資訊返回成功<br />{<br />var response = eval( "(" + http_request_check_url.responseText + ")" );<br />//在這裡處理結果<br />//將ID回傳過來，則是任務宿主類<br />}<br />}<br />}//function<br />}</p><p>//啟動任務，傳進來HTML對象<br />function start_task($obj)<br />{<br />//啟動任務<br />var s = new TaskAjaxProcess();<br />s.start_task( $obj );<br />}</p><p>

 

服務端指令碼略，大致為處理後附帶的將任務發起者的ID也傳回來。

就可以實現同時啟動多任務並且回調後在介面上處理了。