首先,我們需要用JavaScript來創建XMLHttpRequest 類向服務器發送一個HTTP請求, XMLHttpRequest 類首先由Internet Explorer以ActiveX對象引入,被稱爲XMLHTTP。
後來Mozilla﹑Netscape﹑Safari 和其他瀏覽器也提供了XMLHttpRequest類,不過它們創建XMLHttpRequest類的方法不同。
對於Internet Explorer瀏覽器,創建XMLHttpRequest 方法如下:
Ø xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP.3.0"); //3.0或4.0, 5.0
Ø xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP");
Ø xmlhttp_request = new ActiveXObject("Microsoft.XMLHTTP");
由於在不同Internet Explorer瀏覽器中XMLHTTP版本可能不一致,爲了更好的兼容不同版本的Internet Explorer瀏覽器,因此我們需要根據不同版本的Internet Explorer瀏覽器來創建XMLHttpRequest類,上面代碼就是根據不同的Internet Explorer瀏覽器創建XMLHttpRequest類的方法。
對於Mozilla﹑Netscape﹑Safari等瀏覽器,創建XMLHttpRequest 方法如下: xmlhttp_request = new XMLHttpRequest();
如果服務器的響應沒有XML mime-type header,某些Mozilla瀏覽器可能無法正常工作。 爲了解決這個問題,如果服務器響應的header不是text/xml,可以調用其它方法修改該header。
xmlhttp_request = new XMLHttpRequest();
xmlhttp_request.overrideMimeType('text/xml');
在實際應用中,爲了兼容多種不同版本的瀏覽器,一般將創建XMLHttpRequest類的方法寫成如下形式:
try{
if( window.ActiveXObject )
{
for( var i = 5; i; i-- )
{
try{
I f( i == 2 )
{
xmlhttp_request = new ActiveXObject( "Microsoft.XMLHTTP" );
}
else
{
xmlhttp_request = new ActiveXObject( "Msxml2.XMLHTTP." + i + ".0" );
xmlhttp_request.setRequestHeader("Content-Type","text/xml");
xmlhttp_request.setRequestHeader("Content-Type","gb2312");
}
break;
}
catch(e)
{
xmlhttp_request = false;
}
}
}
else if( window.XMLHttpRequest )
{
xmlhttp_request = new XMLHttpRequest();
if (xmlhttp_request.overrideMimeType)
{
xmlhttp_request.overrideMimeType('text/xml'); }
}
}
catch(e)
{
xmlhttp_request = false;
}
在定義瞭如何處理響應後,就要發送請求了。可以調用HTTP請求類的open()和send()方法,如下所示:
xmlhttp_request.open('GET', URL, true);
xmlhttp_request.send(null);
open()的第一個參數是HTTP請求方式—GET,POST或任何服務器所支持的您想調用的方式。 按照HTTP規範,該參數要大寫;否則,某些瀏覽器(如Firefox)可能無法處理請求。
第二個參數是請求頁面的URL。
第三個參數設置請求是否爲異步模式。如果是TRUE,JavaScript函數將繼續執行,而不等待服務器響應。這就是"AJAX"中的"A"。
用JavaScript來創建XMLHttpRequest 類向服務器發送一個HTTP請求後,接下來要決定當收到服務器的響應後,需要做什麼。這需要告訴HTTP請求對象用哪一個JavaScript函數處理這個響應。可以將對象的onreadystatechange屬性設置爲要使用的JavaScript的函數名,如下所示:
xmlhttp_request.onreadystatechange =FunctionName;
FunctionName是用JavaScript創建的函數名,注意不要寫成FunctionName(),當然我們也可以直接將JavaScript代碼創建在onreadystatechange之後,例如:
xmlhttp_request.onreadystatechange = function(){
// JavaScript代碼段
};
首先要檢查請求的狀態。只有當一個完整的服務器響應已經收到了,函數纔可以處理該響應。XMLHttpRequest 提供了readyState屬性來對服務器響應進行判斷。
readyState的取值如下:
Ø 0 (未初始化)
Ø 1 (正在裝載)
Ø 2 (裝載完畢)
Ø 3 (交互中)
Ø 4 (完成)
所以只有當readyState=4時,一個完整的服務器響應已經收到了,函數纔可以處理該響應。具體代碼如下:
if (http_request.readyState == 4) { // 收到完整的服務器響應 }
else { // 沒有收到完整的服務器響應 }
當readyState=4時,一個完整的服務器響應已經收到了,接着,函數會檢查HTTP服務器響應的狀態值。完整的狀態取值可參見W3C文檔。當HTTP服務器響應的值爲200時,表示狀態正常。
在檢查完請求的狀態值和響應的HTTP狀態值後,就可以處理從服務器得到的數據了。有兩種方式可以得到這些數據:
(1) 以文本字符串的方式返回服務器的響應
(2) 以XMLDocument對象方式返回響應
代碼樣例:
<script type="text/javascript">
<!--
//得到內容容器和提示框節點
var content=document.getElementById("content");
var tip=document.getElementById("tip");
function getPage(page){
tip.style.display="inline";
var key=document.forms.form1.title.value;
//創建瀏覽器兼容的XMLHttpRequest對象
var xmlhttp;
try{
xmlhttp= new ActiveXObject('Msxml2.XMLHTTP');
}catch(e){
try{
xmlhttp= new ActiveXObject('Microsoft.XMLHTTP');
}catch(e){
try{
xmlhttp= new XMLHttpRequest();
}catch(e){}
}
}
//定義XMLHttpRequest對象的事件處理程序
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4){
//關閉顯示條
tip.style.display="none";
if(xmlhttp.status==200){
//當加載成功時將內容顯示於頁面
content.innerHTML=xmlhttp.responseText;
}else{
//否則彈出錯誤信息
alert(xmlhttp.status);
}
}
}
//創建一個連接
xmlhttp.open("get","show.aspx?page="+page+"&key="+key);
//發送請求
xmlhttp.send(null);
}
-->
</script>
show.aspx
private void Page_Load(object sender, System.EventArgs e)
{
Response.Write(“你好”);
}