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

 

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

 

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

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

 

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

 

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

 

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

 

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

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