NET中用JavaScript來創建XMLHttpRequest 的Ajax開發介紹

首先,我們需要用JavaScript來創建XMLHttpRequest 類向服務器發送一個HTTP請求, XMLHttpRequest 類首先由Internet ExplorerActiveX對象引入,被稱爲XMLHTTP

後來MozillaNetscapeSafari 和其他瀏覽器也提供了XMLHttpRequest類,不過它們創建XMLHttpRequest類的方法不同。

 

對於Internet Explorer瀏覽器,創建XMLHttpRequest 方法如下:

Ø         xmlhttp_request = new ActiveXObject("Msxml2.XMLHTTP.3.0"); //3.04.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類的方法。

 

對於MozillaNetscapeSafari等瀏覽器,創建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請求方式—GETPOST或任何服務器所支持的您想調用的方式。 按照HTTP規範,該參數要大寫;否則,某些瀏覽器(Firefox)可能無法處理請求。

第二個參數是請求頁面的URL

第三個參數設置請求是否爲異步模式。如果是TRUEJavaScript函數將繼續執行,而不等待服務器響應。這就是"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(你好);

}

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章