所有現代瀏覽器有一個內置的XMLHttpRequest對象從服務器請求數據。
所有主要的瀏覽器都有一個內置的XML解析器來訪問和操作XML。
XMLHttpRequest對象
XMLHttpRequest對象可用於從Web服務器請求數據。
XMLHttpRequest對象是a developers dream ，因為你可以：
- 更新網頁無需重新加載頁面
- 從服務器請求數據 - 在頁面加載後，
- 從服務器接收數據 - 在頁面加載後，
- 將數據發送到服務器 - 在後台
XMLHttpRequest的實例
當鍵入在下面的輸入字段的字符，一個XMLHttpRequest被發送到服務器，以及一些名稱建議返回(from the server) ：
例
Start typing a name in the input field below:
Suggestions:
發送一個XMLHttpRequest
所有現代瀏覽器有一個內置的XMLHttpRequest對象。
使用它的一個共同JavaScript語法看起來像這樣：
例
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
// Action to be performed when the
document is read;
}
};
xhttp.open("GET", " filename ", true);
xhttp.send(); 試一試» 創建XMLHttpRequest對象
在上面的例子中的第一行創建一個XMLHttpRequest OBJET：
var xhttp = new XMLHttpRequest();
onreadystatechange事件
readyState屬性持有了XMLHttpRequest的狀態。
onreadystatechange事件被觸發每次readyState的變化。
在一台服務器的請求，readyState的從0到4的變化：
0：請求未初始化
1：服務器連接建立
2：接收到的請求
3：請求處理
4：請求完成和響應準備就緒
在onreadystatechange屬性，指定一個函數來執行當readyState變化：
xhttp.onreadystatechange = function()
當readyState為4和狀態為200，則響應已準備就緒：
if (xhttp.readyState == 4 && xhttp.status == 200)
XMLHttpRequest的屬性和方法
| 方法 | 描述 |
|---|---|
| new XMLHttpRequest() | 創建一個新的XMLHttpRequest對象 |
| open( method, url, async ) | 指定請求的類型 method ：請求的類型：GET或POST url ：文件位置 async ：真(asynchronous)或false (synchronous) |
| send() | 發送一個請求給服務器(used for GET) |
| send( string ) | 發送一個請求字符串到服務器(used for POST) |
| onreadystatechange | 被調用的函數當readyState屬性改變 |
| readyState | 了XMLHttpRequest的狀態 0：請求未初始化 1：服務器連接建立 2：接收到的請求 3：請求處理 4：請求完成和響應準備就緒 |
| status | 200：OK 404：找不到頁面 |
| responseText | 響應數據作為串 |
| responseXML | 響應數據為XML數據 |
跨域訪問
出於安全原因，現代的瀏覽器不允許跨域訪問。
這意味著這兩個網頁並嘗試加載XML文件，必須位於同一服務器上。
在w3ii的示例位於w3ii域中的所有Open XML文件。
如果你想用上面的例子在自己的網頁之一，您加載XML文件必須位於你自己的服務器上。
responseText屬性
responseText屬性返回響應作為一個字符串。
如果您想使用響應為文本字符串，請使用responseText屬性：
responseXML屬性
responseXML屬性返回響應作為XML DOM對象。
如果您想使用響應作為XML DOM對象，請使用responseXML屬性：
例
請求文件cd_catalog.xml和使用響應作為XML DOM對象：
xmlDoc = xmlhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
txt += x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("demo").innerHTML = txt; 試一試» GET或POST？
GET是簡單和較POST更快，並能在大多數情況下被使用。
然而，始終使用POST請求時：
- 緩存的文件不是一個選項(update a file or database on the server)
- 發送大量的數據到服務器（POST沒有大小限制）
- 發送用戶輸入(which can contain unknown characters) ，POST是更強大和安全比GET
網址 - 上的文件服務器
該的URL參數open()方法，是一個地址到服務器上的文件：
xmlhttp.open("GET", "xmlhttp_info.txt", true);
該文件可以是任何類型的文件，如.txt和.xml或類似的.asp和.PHP（可發送回響應之前在服務器上執行的操作）服務器的腳本文件。
異步 - 真或假？
要異步發送請求，的async參數open()方法，已被設置為true：
xmlhttp.open("GET", "xmlhttp_info.txt", true);
發送異步請求是Web開發人員一個巨大的進步。 許多的服務器上執行的任務是非常耗時。
通過異步發送，JavaScript的不必等待服務器的響應，而是可以：
- 執行其他腳本在等待服務器響應
- 處理時的響應的響應是就緒
異步=真
當使用異步=真實，指定一個功能，當響應是onreadystatechange事件準備執行：
例
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("demo").innerHTML = xmlhttp.responseText;
}
};
xmlhttp.open("GET", "xmlhttp_info.txt", true);
xmlhttp.send(); 試一試» 異步= FALSE
要使用異步=假，更改第三個參數open()方法為false：
xmlhttp.open("GET", "xmlhttp_info.txt", false);
使用異步=虛假不建議，但對於一些小的請求，這可能是好的。
請記住，JavaScript就無法繼續執行，直到服務器響應準備。 如果服務器太忙或太慢，應用程序將掛起或停止。
Note:當您使用異步=虛假的，不寫一個函數的onreadystatechange -只要把代碼後send()語句：
例
xmlhttp.open("GET", "xmlhttp_info.txt", false);
xmlhttp.send();
document.getElementById("demo").innerHTML = xmlhttp.responseText; 試一試» XML解析器
所有現代瀏覽器有一個內置的XML解析器。
XML文檔對象模型(the XML DOM)含有大量的方法來訪問和編輯XML。
然而，可被訪問的XML文檔之前，它必須被加載到一個XML DOM對象。
XML解析器可以讀取明文，並轉換成一個XML DOM對象。
解析文本字符串
這個例子解析文本字符串轉換為XML DOM對象，並提取從中用JavaScript的信息：
例
<html>
<body>
<p id="demo"></p>
<script>
var text, parser,
xmlDoc;
text = "<bookstore><book>" +
"<title>Everyday
Italian</title>" +
"<author>Giada De Laurentiis</author>" +
"<year>2005</year>" +
"</book></bookstore>";
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
document.getElementById("demo").innerHTML =
xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
</script>
</body>
</html>
試一試» 舊的瀏覽器(IE5 and IE6)
Internet Explorer中的舊版本(IE5 and IE6)不支持XMLHttpRequest對象。
為了處理IE5和IE6，檢查瀏覽器是否支持XMLHttpRequest對象，否則創建的ActiveXObject：
例
if (window.XMLHttpRequest) {
// code for modern browsers
xmlhttp = new XMLHttpRequest();
}
else {
// code for old IE browsers
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} 試一試» Internet Explorer中的舊版本(IE5 and IE6)不支持的DOMParser對象。
為了處理IE5和IE6，檢查瀏覽器支持的DOMParser對象，否則創建的ActiveXObject：
例
if (window.DOMParser) {
// code for modern browsers
parser = new DOMParser();
xmlDoc = parser.parseFromString(text,"text/xml");
}
else {
// code for old IE browsers
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = false;
xmlDoc.loadXML(text);
}
試一試» 
更多示例
檢索與報頭信息getAllResponseHeaders()
檢索資源的頭信息(file) 。
檢索特定的頭信息與getResponseHeader()
檢索資源的特定頭信息(file) 。
檢索一個ASP文件的內容
如何網頁可以同時輸入字段的用戶類型字符的Web服務器通信。
從數據庫中檢索內容
如何網頁可以從XMLHttpRequest對象的數據庫獲取信息。
檢索XML文件的內容
創建一個XMLHttpRequest來檢索XML文件中的數據，並在一個HTML表格中顯示的數據。