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

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

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

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

例子：

用戶端代碼：

var oHiddenFrame=null;<br /> function getServerInfo()<br /> {<br /> if(oHiddenFrame==null)<br /> {<br /> oHiddenFrame=document.createElement("iFrame");<br /> oHiddenFrame.name="hiddenFrame";<br /> oHiddenFrame.id="hiddenFrame";<br /> oHiddenFrame.style.height="0px";<br /> oHiddenFrame.style.width="0px";<br /> oHiddenFrame.style.position="absolute";<br /> oHiddenFrame.style.visibility="hidden";<br /> document.body.appendChild(oHiddenFrame);<br /> }<br /> setTimeout(function(){frames["hiddenFrame"].location.href="aa.aspx";},10);<br /> }<br /> function handleResponse(sResponseText)<br /> {<br /> alert("伺服器回應的訊息是："+sResponseText);<br /> }<br />

HTML<p>點擊按鍵通過隱藏架構向伺服器發出請求</p><br /><input type="button" onclick="getServerInfo()" value="get server info" />

 

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

window.onload=function()<br /> {<br /> parent.handleResponse("bb")<br /> }

 

使用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(換句話說，在回應標頭部可用以後)時，才可以調用這個方法；否則，該方法返回一個Null 字元串。

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

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

用戶端代碼

var request;<br /> function createXMLHTTP()<br /> {<br /> if(window.XMLHttpRequest)<br /> {<br /> return new XMLHttpRequest();<br /> }<br /> else if(window.ActiveXObject)<br /> {<br /> try<br /> {<br /> return new ActiveXObject("MSXML2.XMLHTTP");<br /> }<br /> catch(oException)<br /> {<br /> return new ActiveXObject("Microsoft.XMLHTTP");<br /> }<br /> }<br /> else<br /> {<br /> throw new Error("not exists");<br /> }<br /> }<br /> function checkUsername()<br /> {<br /> var userValue=document.getElementById("username").value;<br /> if(userValue=="")<br /> {<br /> alert("Please enter a user name to check!")<br /> return;<br /> }<br /> var url="bb.aspx?username="+userValue;<br /> request=createXMLHTTP();<br /> request.open("get","bb.aspx","true");<br /> request.onreadystatechange=function()<br /> {<br /> if(request.readyState==4)<br /> {<br /> alert(request.responseText)<br /> checkUsername_callBack(request.responseText);<br /> }<br /> }<br /> request.send(null);<br /> }<br /> function checkUsername_callBack(sResponseText)<br /> {<br /> var userValue=document.getElementById("username").value;<br /> if(sResponseText=="available")<br /> {<br /> alert("username:"+userValue+" is available!");<br /> }<br /> else<br /> {<br /> alert("username:"+userValue+" is not available!");<br /> }<br /> }

<table><br /><tr><br /><td>UserName</td><br /><td><input type="text" id="username" /></td><br /><td><input type="button" value="驗證" onclick="checkUsername()"/></td><br /></tr><br /></table>

 

伺服器端bb.aspx代碼

protected void Page_Load(object sender, EventArgs e)<br /> {<br /> string username = Request.QueryString["username"];<br /> if ("aa" == username || "bb" == username)<br /> {<br /> Response.Write("available");<br /> }<br /> //else<br /> //{<br /> // Response.Write(username);<br /> //}<br /> }