XMLHttpRequest 物件概述

XMLHttpRequest 物件用於幕後與伺服器交換資料。

XMLHttpRequest 物件是開發者的夢想，因為您可以：

1. 在不重新載入頁面的情況下更新網頁
2. 在頁面已載入後從伺服器請求資料
3. 在頁面已載入後從伺服器接收資料
4. 在後臺向伺服器傳送資料

所有現代的瀏覽器（IE7+、Firefox、Chrome、Safari 和 Opera）都有一個內建的 XMLHttpRequest 物件。

建立 XMLHttpRequest 物件的語法

xmlhttp=new XMLHttpRequest();

舊版本的 Internet Explorer（IE5 和 IE6）使用 ActiveX 物件：

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

為了處理所有現代的瀏覽器，包括 IE5 和 IE6，請檢查瀏覽器是否支援 XMLHttpRequest 物件。如果支援，則建立一個 XMLHttpRequest 物件，如果不支援，則建立一個 ActiveX 物件：

例項

if (window.XMLHttpRequest)
{
  // IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行程式碼
  xmlhttp=new XMLHttpRequest();
}
else
{
  // IE6, IE5 瀏覽器執行程式碼
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

為了傳送一個請求到伺服器，我們使用 XMLHttpRequest 物件的 open() 和 send() 方法：

xmlhttp.open("GET","xmlhttp_info.txt",true);
xmlhttp.send();

方法	描述
open( method,url,async)	規定請求的型別，URL，請求是否應該進行非同步處理。 method：請求的型別：GET 或 POST url：檔案在伺服器上的位置 async：true（非同步）或 false（同步）
send( string)	傳送請求到伺服器。 string：僅用於 POST 請求

GET 比 POST 簡單並且快速，可用於大多數情況下。

然而，下面的情況下請始終使用 POST 請求：

1. 快取的檔案不是一個選項（更新伺服器上的檔案或資料庫）
2. 傳送到伺服器的資料量較大（POST 沒有大小的限制）
3. 傳送使用者輸入（可以包含未知字元），POST 比 GET 更強大更安全

open() 方法的 url 引數，是一個在伺服器上的檔案的地址：

xmlhttp.open("GET","xmlhttp_info.txt",true);

該檔案可以是任何型別的檔案（如 .txt 和 .xml），或伺服器 檔案（如.html 和 .php，可在傳送迴響應之前在伺服器上執行動作）。

如需非同步傳送請求，open() 方法的 async 引數必需設定為 true：

xmlhttp.open("GET","xmlhttp_info.txt",true);

傳送非同步請求對於 Web 開發人員是一個巨大的進步。在伺服器上執行的許多工非常費時。

透過非同步傳送，JavaScript 不需要等待伺服器的響應，但可以替換為：

1. 等待伺服器的響應時，執行其他
2. 響應準備時處理響應

當使用 async=true 時，在 onreadystatechange 事件中響應準備時規定一個要執行的函式：

例項

xmlhttp.onreadystatechange=function()
{
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  }
}
xmlhttp.open("GET","xmlhttp_info.txt",true);
xmlhttp.send();

如需使用 async=false，請更改 open() 方法的第三個引數為 false：

xmlhttp.open("GET","xmlhttp_info.txt",false);

不推薦使用 async=false，但如果處理幾個小的請求還是可以的。

請記住，JavaScript 在伺服器響應準備之前不會繼續執行。如果伺服器正忙或緩慢，應用程式將掛起或停止。

注意：當您使用 async=false 時，不要編寫 onreadystatechange 函式 - 只需要把程式碼放置在 send() 語句之後即可：

例項

xmlhttp.open("GET","xmlhttp_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

如需從伺服器獲取響應，請使用 XMLHttpRequest 物件的 responseText 或 responseXML 屬性。

屬性	描述
responseText	獲取響應資料作為字串
responseXML	ResponseXML 屬性返回 XML 文件物件，可使用 DOM 節點樹的方法和屬性來檢查和解析該物件。

如果來自伺服器的響應不是 XML，請使用 responseText 屬性。

responseText 屬性以字串形式返回響應，您可以相應地使用它：

例項

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

如果來自伺服器的響應是 XML，且您想要把它解析為 XML 物件，請使用 responseXML 屬性：

例項
請求檔案 cd_catalog.xml 並解析響應：

xmlDoc=xmlhttp.responseXML;var txt="";x=xmlDoc.getElementsByTagName("ARTIST");for (i=0;i<x.length;i++){
  txt=txt + x[i].childNodes[0].nodeValue + "";}document.getElementById("myDiv").innerHTML=txt;

當請求被髮送到伺服器，我們要根據響應執行某些動作。

onreadystatechange 事件在每次 readyState 變化時被觸發。

readyState 屬性持有 XMLHttpRequest 的狀態。

XMLHttpRequest 物件的三個重要的屬性：

屬性	描述
onreadystatechange	儲存函式（或函式的名稱）在每次 readyState 屬性變化時被自動呼叫
readyState	存放了 XMLHttpRequest 的狀態。從 0 到 4 變化： 0：請求未初始化 1：伺服器建立連線 2：收到的請求 3：處理請求 4：請求完成和響應準備就緒
status	200："OK" 404：找不到頁面

在 onreadystatechange 事件中，我們規定當伺服器的響應準備處理時會發生什麼。

當 readyState 是 4 或狀態是 200 時，響應準備：

例項

xmlhttp.onreadystatechange=function()
{
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
  }
}

注意：onreadystatechange 事件在每次 readyState 發生變化時被觸發，總共觸發了四次。