玩轉AJAX之三:淺探XMLHttpRequest對象

一、認識XMLHttpRequest對象

我覺的學東西第一就是要對學的東西首先有個片段是認識，再次加深了解并掌握。是以先簡單介紹該對象。XMLHttpRequest是JavaScript中的一個對象，它是用來聯系伺服器與用戶端之間通信的橋梁。比如向伺服器送出請求、接受伺服器傳回的資料等等。

二、怎麼建立XMLHttpRequest對象

在我們對該對象有所了解後，接下來就是怎麼使用了，該步驟非常簡單，但要程式跑的健壯可要費點功夫。一般的簡單建立一個XMLHttpRequest對象就如示例程式[3-1]中的代碼。

//[示例3-1]
//建立XMLHttpRequest對象
<script language="javascript" type="text/javascript"> 
var Ajax=new XMLHttpRequest(); 
</script>      

讀者看到這，不知是否考慮上面的代碼的相容性。比如在IE浏覽器能跑起來嗎？等等

三、建立XMLHttpRequest對象相容多種浏覽器

如果讀者是位喜歡理論與實踐想結合的，想必現在可能已經把上面的代碼調試了一番。

上面的代碼存在不健壯性，隻能在單一個浏覽器成功運作，下面我們一起看看示例程式[3-2]

//[示例3-2]
//建立相容性健壯的XMLHttpRequet對象
try 
{
   Ajax= new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
   try
   {
     Ajax = new ActiveXObject("Microsoft.XMLHTTP");
   }  
   catch(e1)
   {
     Ajax = new XMLHttpRequest();
   }  
}      

這段代碼就把多種浏覽器的産品進行過濾建立，進而達到多浏覽器相容的效果。

四、送出請求

現在，我們通過以上的代碼已經有了一個XMLHttpRequest對象，接着下來我就可以操作這對象送出請求了。使用該對象送出請求可以走以下步驟[示例3-3]：

//[示例3-3]
1、Ajax.open("Get/POST","URL","true/flase");
2、Ajax.onreadystatechange=result;
3、Ajax.send(null);
      

這就是通過XMLHttpRequest對象送出請求的步驟，其中主要說明3點。

第一步中的true/false表示是否異步發送,既然使用AJAX技術追求的是異步重新整理肯定參數是true。

第二步中的result這是一個回掉方法，主要用來處理傳回的消息。

第三步中的null是根據第一步中的url來改變的。是用來傳遞參數的。

五、處理響應

當我們通過XMLHttpRequest對象送出請求後，伺服器就傳回了一些資訊，這些資訊都在回掉方法裡進行處理。[示例3-4]

//[示例3-4]
if (Ajax.readyState == 4) 
{
    alert(Ajax.responseText);
}
      

4表示這次請求完成，于是就把伺服器傳回的消息呈現給使用者。這隻是個簡單的示範，在實際應用中，這個方法中的代碼比現在的代碼量要多的我們難以想象。

六、總結

以上小節就是本篇文章講述的内容，其實2-5小節是整個XMLHttpRequest對象完成的流程。讀者看這裡如果覺的還是有點糊塗，腦袋還是有點暈忽忽不必着急，下篇詳細介紹XMLHttpRequest對象的細節知識。