XMLHttpRequest 對象

什麼是 XMLHttpRequest 對象？

• 在不重新加載頁面的情況下更新網頁
• 在頁面已加載後從服務器請求數據
• 在頁面已加載後從服務器接收數據
• 在後臺向服務器發送數據

創建 XMLHttpRequest 對象

通過一行簡單的 JavaScript 代碼，我們就可以創建 XMLHttpRequest 對象。

在所有現代瀏覽器中（包括 IE 7）：

xmlhttp=new XMLHttpRequest();

在 Internet Explorer 5 和 6 中：

xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

實例:

<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
  {// code for all new browsers
  xmlhttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  {// code for IE5 and IE6
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlhttp!=null)
  {
  xmlhttp.onreadystatechange=state_Change;
  xmlhttp.open("GET",url,true);
  xmlhttp.send(null);
  }
else
  {
  alert("Your browser does not support XMLHTTP.");
  }
}

function state_Change()
{
if (xmlhttp.readyState==4)
  {// 4 = "loaded"
  if (xmlhttp.status==200)
    {// 200 = OK
    // ...our code here...
    }
  else
    {
    alert("Problem retrieving XML data");
    }
  }
}
</script>

 

註釋：onreadystatechange 是一個事件句柄。它的值 (state_Change) 是一個函數的名稱，當 XMLHttpRequest 對象的狀態發生改變時，會觸發此函數。狀態從 0 (uninitialized) 到 4 (complete) 進行變化。僅在狀態爲 4 時，我們才執行代碼。

 

爲什麼使用 Async=true ？

我們的實例在 open() 的第三個參數中使用了 "true"。

該參數規定請求是否異步處理。

True 表示腳本會在 send() 方法之後繼續執行，而不等待來自服務器的響應。

onreadystatechange 事件使代碼複雜化了。但是這是在沒有得到服務器響應的情況下，防止代碼停止的最安全的方法。

通過把該參數設置爲 "false"，可以省去額外的 onreadystatechange 代碼。如果在請求失敗時是否執行其餘的代碼無關緊要，那麼可以使用這個參數。