js 客戶端與伺服器端的通訊

鴨脖發表於2013-10-27
JS客戶端伺服器

 客戶端與伺服器端通訊一般有兩種方法，隱藏iframe和使用xmlhttp物件

隱藏框架技術實現Ajax通常由4個過程組成。第一步是由使用者的某種行為引發了一個對隱藏框架的請求。這包括使用者單擊了在可見框架頁中的超連結，或者由使用者的其他互動行為所引發。通常情況下，對隱藏框架頁的請求僅僅是將隱藏框架頁重定向到一個伺服器上指定的服務端程式。對隱藏框架頁的重定向將自動觸發第二個過程：即向伺服器傳送請求。

在伺服器程式完成了對請求的處理之後，將發生第三個過程：即伺服器將響應傳送回隱藏框架頁。伺服器端的響應是一個Web頁面，該頁面將被髮送給隱藏框架。當來自伺服器的響應被完全接收後，隱藏框架中的Web頁面將發起與可見框架頁的聯絡，並告知可見框架，伺服器的響應已經成功。這就是第四個過程，該過程通常在隱藏框架的window.onload事件處理器中完成。

例子：

客戶端程式碼：

[javascript] view plaincopy
  1. var oHiddenFrame=null;  
  2. function getServerInfo()  
  3. {  
  4.    if(oHiddenFrame==null)  
  5.    {  
  6.       oHiddenFrame=document.createElement("iFrame");  
  7.       oHiddenFrame.name="hiddenFrame";  
  8.       oHiddenFrame.id="hiddenFrame";  
  9.       oHiddenFrame.style.height="0px";  
  10.       oHiddenFrame.style.width="0px";  
  11.       oHiddenFrame.style.position="absolute";  
  12.       oHiddenFrame.style.visibility="hidden";  
  13.       document.body.appendChild(oHiddenFrame);  
  14.    }  
  15.    setTimeout(function(){frames["hiddenFrame"].location.href="aa.aspx";},10);  
  16. }  
  17. function handleResponse(sResponseText)  
  18. {  
  19.    alert("伺服器回應的訊息是："+sResponseText);  
  20. }  

HTML

  1. <p>點選按鍵通過隱藏框架向伺服器發出請求</p>  
  2. <input type="button" onclick="getServerInfo()" value="get server info" />  

 

伺服器端響應的WEB頁面aa.aspx

[javascript] view plaincopy
  1. window.onload=function()  
  2. {  
  3.    parent.handleResponse("bb")  
  4. }  

 

使用xmlhttp

xmlHttp是微軟建立的額物件，它的本質是新增額外的用於傳送和接收XML程式碼的功能的普通的HTTP請求。

當一個xmlHttp物件把一個http傳送到伺服器端，將經歷若干種狀態，而readyState這是描述這樣它的一系列狀態的一個屬性值

取值   描述

0       描述一種“為初始化”狀態，此時，已經建立一個xmlHttp物件，但是還沒有對它初始化

1       描述一種“準備傳送”狀態，此時，xmlHttp物件已經呼叫open()方法開啟一個請求，並且xmlHttp物件準備把這個請求傳送到出去

2       描述一種“傳送”狀態，此時，xmlHttp物件已經呼叫send()方法將請求傳送出去，但是還沒有從伺服器端得到相應。

3       描述一種“正在接收”狀態，此時，已收到HTTP相應頭部資訊，但是，訊息體部分還沒有完全接收

4       描述一種“已載入”狀態，此時，相應已經被完全接受。

 

responseText屬性

這個屬性包含客戶端接收到的HTTP響應的文字內容，當readyState屬性為0，1,2時，responseText為空字串，當為3時，包含部分響應資訊，當readyState為4時，包含完整的相應資訊。

 

responseXML屬性

此responseXML屬性用於當接收到完整的HTTP響應時(readyState為4)描述XML響應；此時，Content-Type頭部指定MIME(媒體)型別為text/xml，application/xml或以+xml結尾。如果Content-Type頭部並不包含這些媒體型別之一，那麼responseXML的值為null。無論何時，只要readyState值不為4，那麼該responseXML的值也為null。
　　其實，這個responseXML屬性值是一個文件介面型別的物件，用來描述被分析的文件。如果文件不能被分析(例如，如果文件不是良構的或不支援文件相應的字元編碼)，那麼responseXML的值將為null。

 

statusText屬性

這個屬性描述了HTTP狀態程式碼文字，當且僅當readyState的值為3或4時才可用，當readySate為其它值時如果試圖讀取statusText將引發一個異常

 

abort()方法

可以使用該方法來取消一個http請求，從而把xmlHttp物件復位到為初始化狀態

 

open()方法

開啟一個請求，通常包括三個引數，提交方式：get和post，請求的URL，判斷同步還是非同步請求的布林值，同步為false,非同步為true.


send()方法

傳送一個請求。xmlHttp物件呼叫send方法後，通常講readyState屬性從1變為2.它通常包含一個引數，當使用get請求時，該引數可以為空，當使用post請求時，該引數通常是請求傳送的引數的字串。

 

setRequestHeader()方法
該setRequestHeader(DOMString header，DOMString value)方法用來設定請求的頭部資訊。當readyState值為1時，你可以在呼叫open()方法後呼叫這個方法；否則，你將得到一個異常。

getResponseHeader()方法
getResponseHeader(DOMString header，value)方法用於檢索響應的頭部值。僅當readyState值是3或4(換句話說，在響應頭部可用以後)時，才可以呼叫這個方法；否則，該方法返回一個空字串。

getAllResponseHeaders()方法
該getAllResponseHeaders()方法以一個字串形式返回所有的響應頭部（每一個頭部佔單獨的一行）。如果readyState的值不是3或4，則該方法返回null。

例子。。驗證一個使用者名稱是否存在

客戶端程式碼

[javascript] view plaincopy
  1. var request;  
  2. function createXMLHTTP()  
  3. {  
  4.      if(window.XMLHttpRequest)  
  5.      {  
  6.         return new XMLHttpRequest();  
  7.      }  
  8.      else if(window.ActiveXObject)  
  9.      {  
  10.          try  
  11.          {  
  12.             return new ActiveXObject("MSXML2.XMLHTTP");  
  13.          }  
  14.          catch(oException)  
  15.          {  
  16.             return new ActiveXObject("Microsoft.XMLHTTP");  
  17.          }  
  18.      }  
  19.      else  
  20.      {  
  21.         throw new Error("not exists");  
  22.      }  
  23. }  
  24.   function checkUsername()  
  25.   {  
  26.      var userValue=document.getElementById("username").value;  
  27.         if(userValue=="")  
  28.         {  
  29.             alert("Please enter a user name to check!")  
  30.             return;  
  31.         }  
  32.         var url="bb.aspx?username="+userValue;  
  33.         request=createXMLHTTP();  
  34.         request.open("get","bb.aspx","true");  
  35.         request.onreadystatechange=function()  
  36.         {  
  37.            if(request.readyState==4)  
  38.            {  
  39.               alert(request.responseText)  
  40.               checkUsername_callBack(request.responseText);  
  41.            }  
  42.         }  
  43.         request.send(null);  
  44.   }  
  45.   function checkUsername_callBack(sResponseText)  
  46.   {  
  47.             var userValue=document.getElementById("username").value;  
  48.             if(sResponseText=="available")  
  49.             {  
  50.                 alert("username:"+userValue+" is  available!");  
  51.             }  
  52.             else  
  53.             {  
  54.                 alert("username:"+userValue+" is not available!");  
  55.             }  
  56.   }  
  1. <table>  
  2. <tr>  
  3. <td>UserName</td>  
  4. <td><input type="text" id="username" /></td>  
  5. <td><input type="button" value="驗證" onclick="checkUsername()"/></td>  
  6. </tr>  
  7. </table>  

 

伺服器端bb.aspx程式碼

[c-sharp] view plaincopy
  1. protected void Page_Load(object sender, EventArgs e)  
  2. {  
  3.     string username = Request.QueryString["username"];  
  4.     if ("aa" == username || "bb" == username)  
  5.     {  
  6.         Response.Write("available");  
  7.     }  
  8.     //else  
  9.     //{  
  10.     //    Response.Write(username);  
  11.     //}  
  12. }  

相關文章