# The 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](images/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 發生變化時被觸發，總共觸發了四次。 ## 更多實例 [通過 getAllResponseHeaders() 檢索頭信息](/try/try.php?filename=try_dom_xmlhttprequest_header) 檢索資源（文件）的頭信息。 [通過 getResponseHeader() 檢索指定頭信息](/try/try.php?filename=try_dom_xmlhttprequest_lastmodified) 檢索資源（文件）的指定頭信息。 [檢索 ASP 文件的內容](/try/try.php?filename=try_dom_xmlhttprequest_suggest) 當用戶在輸入字段鍵入字符時，網頁如何與 Web 服務器進行通信。 [從數據庫中檢索內容](/try/try.php?filename=try_dom_xmlhttprequest_database) 網頁如何通過 XMLHttpRequest 對象從數據庫中提取信息。 [檢索 XML 文件的內容](/try/try.php?filename=try_dom_xmlhttprequest_xml) 創建一個 XMLHttpRequest 從 XML 文件中檢索數據并把數據顯示在一個 HTML 表格中。