XML DOM – HttpRequest 對象
通過XMLHttpRequest 對象，您可以在不重新加載整個頁面的情況下更新網頁中的某個部分。
XMLHttpRequest 對象
XMLHttpRequest 對像用於幕後與服務器交換數據。
XMLHttpRequest對像是開發者的夢想 ，因為您可以：
- 在不重新加載頁面的情況下更新網頁
- 在頁面已加載後從服務器請求數據
- 在頁面已加載後從服務器接收數據
- 在後台向服務器發送數據
創建XMLHttpRequest 對象
所有現代的瀏覽器（IE7+、Firefox、Chrome、Safari 和Opera）都有一個內建的XMLHttpRequest 對象。
創建XMLHttpRequest 對象的語法
舊版本的Internet Explorer（IE5 和IE6）使用ActiveX 對象：
為了處理所有現代的瀏覽器，包括IE5 和IE6，請檢查瀏覽器是否支持XMLHttpRequest 對象。 如果支持，則創建一個XMLHttpRequest 對象，如果不支持，則創建一個ActiveX 對象：
實例
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
嘗試一下»
發送一個請求到服務器
為了發送一個請求到服務器，我們使用XMLHttpRequest 對象的open() 和send() 方法：
xmlhttp.send();
| 方法 | 描述 |
|---|---|
| open(method,url,async) | 规定请求的类型，URL，请求是否应该进行异步处理。 method：请求的类型：GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步） |
| send(string) | 发送请求到服务器。 string：仅用于 POST 请求 |
GET 或POST？
GET 比POST 簡單並且快速，可用於大多數情況下。
然而，下面的情況下請始終使用POST 請求：
- 緩存的文件不是一個選項（更新服務器上的文件或數據庫）
- 發送到服務器的數據量較大（POST 沒有大小的限制）
- 發送用戶輸入（可以包含未知字符），POST 比GET 更強大更安全
URL - 服務器上的文件
open() 方法的url 參數，是一個在服務器上的文件的地址：
該文件可以是任何類型的文件（如.txt 和.xml），或服務器腳本文件（如.html 和.php，可在發送迴響應之前在服務器上執行動作）。
異步- True 或False?
如需異步發送請求，open() 方法的async 參數必需設置為true：
發送異步請求對於Web 開發人員是一個巨大的進步。 在服務器上執行的許多任務非常費時。
通過異步發送，JavaScript 不需要等待服務器的響應，但可以替換為：
- 等待服務器的響應時，執行其他腳本
- 響應準備時處理響應
Async=true
當使用async=true 時，在onreadystatechange 事件中響應準備時規定一個要執行的函數：
實例
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","xmlhttp_info.txt",true);
xmlhttp.send();
嘗試一下»
Async=false
如需使用async=false，請更改open() 方法的第三個參數為false：
不推薦使用async=false，但如果處理幾個小的請求還是可以的。
請記住，JavaScript 在服務器響應準備之前不會繼續執行。 如果服務器正忙或緩慢，應用程序將掛起或停止。
注意：當您使用async=false時，不要編寫onreadystatechange函數-只需要把代碼放置在send()語句之後即可：
實例
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
嘗試一下»
服務器響應
如需從服務器獲取響應，請使用XMLHttpRequest 對象的responseText 或responseXML 屬性。
| 属性 | 描述 |
|---|---|
| responseText | 获取响应数据作为字符串 |
| responseXML | 获取响应数据作为 XML 数据 |
responseText 屬性
如果來自服務器的響應不是XML，請使用responseText 屬性。
responseText 屬性以字符串形式返迴響應，您可以相應地使用它：
responseXML 屬性
如果來自服務器的響應不是XML，且您想要把它解析為XML 對象，請使用responseXML 屬性：
實例
請求文件cd_catalog.xml並解析響應：
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 事件
當請求被發送到服務器，我們要根據響應執行某些動作。
onreadystatechange 事件在每次readyState 變化時被觸發。
readyState 屬性持有XMLHttpRequest 的狀態。
XMLHttpRequest 對象的三個重要的屬性：
| 属性 | 描述 |
|---|---|
| onreadystatechange | 存储函数（或函数的名称）在每次 readyState 属性变化时被自动调用 |
| readyState | 存放了 XMLHttpRequest 的状态。从 0 到 4 变化： 0：请求未初始化 1：服务器建立连接 2：收到的请求 3：处理请求 4：请求完成和响应准备就绪 |
| status | 200："OK" 404：找不到页面 |
在onreadystatechange 事件中，我們規定當服務器的響應準備處理時會發生什麼。
當readyState 是4 或狀態是200 時，響應準備：
實例
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
嘗試一下»
注意： onreadystatechange事件在每次readyState發生變化時被觸發，總共觸發了四次。
更多實例
通過getAllResponseHeaders()檢索頭信息
檢索資源（文件）的頭信息。
通過getResponseHeader()檢索指定頭信息
檢索資源（文件）的指定頭信息。
檢索ASP文件的內容
當用戶在輸入字段鍵入字符時，網頁如何與Web 服務器進行通信。
從數據庫中檢索內容
網頁如何通過XMLHttpRequest 對像從數據庫中提取信息。
檢索XML文件的內容
創建一個XMLHttpRequest 從XML 文件中檢索數據並把數據顯示在一個HTML 表格中。