XMLHttpRequest 對象 · W3School Xml 教程

# XMLHttpRequest 對象通過 XMLHttpRequest 對象，您可以在不重新加載整個頁面的情況下更新網頁中的某個部分。 ## 嘗試一下 - 實例 [一個簡單的 XMLHttpRequest 實例](/try/try.php?filename=try_dom_xmlhttprequest_first) 創建一個簡單的 XMLHttpRequest，從 TXT 文件中檢索數據。 ``` <!DOCTYPE html> <html> <head> <script> function loadXMLDoc() { if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } 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(); } </script> </head> <body> <h2>Using the XMLHttpRequest object</h2> <div id="myDiv"></div> <button type="button" onclick="loadXMLDoc()">Change Content</button> </body> </html> ``` [通過 getAllResponseHeaders() 檢索頭信息](/try/try.php?filename=try_dom_xmlhttprequest_header) 檢索資源（文件）的頭信息。 ``` <!DOCTYPE html> <html> <head> <script> function loadXMLDoc(url) { if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById('p1').innerHTML=xmlhttp.getAllResponseHeaders(); } } xmlhttp.open("GET",url,true); xmlhttp.send(); } </script> </head> <body> <p id="p1">The getAllResponseHeaders() function returns the header information of a resource, like length, server-type, content-type, last-modified, etc.</p> <button onclick="loadXMLDoc('xmlhttp_info.txt')">Get header information</button> </body> </html> ``` [通過 getResponseHeader() 檢索指定頭信息](/try/try.php?filename=try_dom_xmlhttprequest_lastmodified) 檢索資源（文件）的指定頭信息。 ``` <!DOCTYPE html> <html> <head> <script> function loadXMLDoc(url) { if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById('p1').innerHTML="Last modified: " + xmlhttp.getResponseHeader('Last-Modified'); } } xmlhttp.open("GET",url,true); xmlhttp.send(); } </script> </head> <body> <p id="p1">The getResponseHeader() function is used to return specific header information from a resource, like length, server-type, content-type, last-modified, etc.</p> <button onclick="loadXMLDoc('xmlhttp_info.txt')">Get "Last-Modified" information</button> </body> </html> ``` [檢索 ASP 文件的內容](/try/try.php?filename=try_dom_xmlhttprequest_suggest) 當用戶在輸入字段鍵入字符時，網頁如何與 Web 服務器進行通信。 ``` <!DOCTYPE html> <html> <head> <script> function showHint(str) { if (str.length==0) { document.getElementById("txtHint").innerHTML=""; return; } if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("txtHint").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","gethint.php?q="+str,true); xmlhttp.send(); } </script> </head> <body> <h3>Start typing a name in the input field below:</h3> <form action=""> First name: <input type="text" id="txt1" onkeyup="showHint(this.value)" /> </form> <p>Suggestions: <span id="txtHint"></span></p> </body> </html> ``` [從數據庫中檢索內容](/try/try.php?filename=try_dom_xmlhttprequest_database) 網頁如何通過 XMLHttpRequest 對象從數據庫中提取信息。 ``` <!DOCTYPE html> <html> <head> <script> function showCustomer(str) { if (str=="") { document.getElementById("txtHint").innerHTML=""; return; } if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("txtHint").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","getcustomer.php?q="+str,true); xmlhttp.send(); } </script> </head> <body> <form action=""> <select name="customers" onchange="showCustomer(this.value)"> <option value="">Select a customer:</option> <option value="ALFKI">Alfreds Futterkiste</option> <option value="NORTS ">North/South</option> <option value="WOLZA">Wolski Zajazd</option> </select> </form> <br> <div id="txtHint">Customer info will be listed here...</div> </body> </html> ``` [檢索 XML 文件的內容](/try/try.php?filename=try_dom_xmlhttprequest_xml) 創建一個 XMLHttpRequest 從 XML 文件中檢索數據并把數據顯示在一個 HTML 表格中。 ``` <!DOCTYPE html> <html> <head> <script> function loadXMLDoc(url) { if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { txt="<table border='1'><tr><th>Title</th><th>Artist</th></tr>"; x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD"); for (i=0;i<x.length;i++) { txt=txt + "<tr>"; xx=x[i].getElementsByTagName("TITLE"); { try { txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>"; } catch (er) { txt=txt + "<td>?</td>"; } } xx=x[i].getElementsByTagName("ARTIST"); { try { txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>"; } catch (er) { txt=txt + "<td>?</td>"; } } txt=txt + "</tr>"; } txt=txt + "</table>"; document.getElementById('txtCDInfo').innerHTML=txt; } } xmlhttp.open("GET",url,true); xmlhttp.send(); } </script> </head> <body> <div id="txtCDInfo"> <button onclick="loadXMLDoc('cd_catalog.xml')">Get CD info</button> </div> </body> </html> ``` ## XMLHttpRequest 對象 XMLHttpRequest 對象是用于幕后與服務器交換數據。 XMLHttpRequest 對象是**開發者的夢想**，因為您可以： * 在不重新加載頁面的情況下更新網頁 * 在頁面已加載后從服務器請求數據 * 在頁面已加載后從服務器接收數據 * 在后臺向服務器發送數據 ## XMLHttpRequest 對象方法 | 方法 | 描述 | | --- | --- | | abort() | 取消當前的請求。 | | getAllResponseHeaders() | 返回頭信息。 | | getResponseHeader() | 返回指定的頭信息。 | | open(method,url,async,uname,pswd) | 規定請求的類型，URL，請求是否應該進行異步處理，以及請求的其他可選屬性。 method：請求的類型：GET 或 POST url：文件在服務器上的位置 async：true（異步）或 false（同步） | | send(string) | 發送請求到服務器。 string：僅用于 POST 請求 | | setRequestHeader() | 把標簽/值對添加到要發送的頭文件。 | ## XMLHttpRequest 對象屬性 | 屬性 | 描述 | | --- | --- | | onreadystatechange | 存儲函數（或函數的名稱）在每次 readyState 屬性變化時被自動調用。 | | readyState | 存放了 XMLHttpRequest 的狀態。從 0 到 4 變化： 0：請求未初始化 1：服務器建立連接 2：收到的請求 3：處理請求 4：請求完成和響應準備就緒 | | responseText | 返回作為一個字符串的響應數據。 | | responseXML | 返回作為 XML 數據響應數據。 | | status | 返回狀態數（例如 "404" 為 "Not Found" 或 "200" 為 "OK"）。 | | statusText | 返回狀態文本（如 "Not Found" 或 "OK"）。 |