XMLHttpRequest 對象

XMLHttpRequest 對象

---

經過 XMLHttpRequest 對象，您能夠在不從新加載整個頁面的狀況下更新網頁中的某個部分。

---

XMLHttpRequest 對象

XMLHttpRequest 對象用於幕後與服務器交換數據。

XMLHttpRequest 對象是開發者的夢想，由於您能夠：

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

---

建立 XMLHttpRequest 對象

全部現代的瀏覽器（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)
 {// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
 }
 else
 {// code for 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？

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

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

• 緩存的文件不是一個選項（更新服務器上的文件或數據庫）
• 發送到服務器的數據量較大（POST 沒有大小的限制）
• 發送用戶輸入（能夠包含未知字符），POST 比 GET 更強大更安全

---

URL - 服務器上的文件

open() 方法的 url 參數，是一個在服務器上的文件的地址：

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

該文件能夠是任何類型的文件（如 .txt 和 .xml），或服務器腳本文件（如.html 和 .php，可在發送迴響應以前在服務器上執行動做）。

---

異步 - True 或 False?

如需異步發送請求，open() 方法的 async 參數必需設置爲 true：

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

發送異步請求對於 Web 開發人員是一個巨大的進步。在服務器上執行的許多任務很是費時。

經過異步發送，JavaScript 不須要等待服務器的響應，但能夠替換爲：

• 等待服務器的響應時，執行其餘腳本
• 響應準備時處理響應

---

Async=true

當使用 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

如需使用 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	獲取響應數據做爲 XML 數據

 

---

responseText 屬性

若是來自服務器的響應不是 XML，請使用 responseText 屬性。

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

實例

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

 

---

responseXML 屬性

若是來自服務器的響應不是 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 事件

當請求被髮送到服務器，咱們要根據響應執行某些動做。

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 發生變化時被觸發，總共觸發了四次。