XMLHttpRequest 對象
阿新 • • 發佈：2017-11-14
建立 true pen col XML ide doc ech innerhtml 
XMLHttpRequest 對象用於在後臺與服務器交換數據。
什麽是 XMLHttpRequest 對象？
XMLHttpRequest 對象用於在後臺與服務器交換數據。
XMLHttpRequest 對象是開發者的夢想，因為您能夠：
- 在不重新加載頁面的情況下更新網頁
- 在頁面已加載後從服務器請求數據
- 在頁面已加載後從服務器接收數據
- 在後臺向服務器發送數據
所有現代的瀏覽器都支持 XMLHttpRequest 對象。
創建 XMLHttpRequest 對象
所有現代瀏覽器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都內建了 XMLHttpRequest 對象。
通過一行簡單的 JavaScript 代碼，我們就可以創建 XMLHttpRequest 對象。
創建 XMLHttpRequest 對象的語法：
1 xmlhttp=new XMLHttpRequest();
老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 對象：
1 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
XMLHttpRequest對象的屬性：
1 關於異步與同步 2 異步傳輸是面向字符的傳輸，它的單位是字符； 3 同步傳輸是面向比特的傳輸，它的單位是楨，它傳輸的時候要求接受方和發送方的時鐘是保持一致的。
4 XMLHttpRequest對象的屬性。 5 onreadystatechange 每次狀態改變所觸發事件的事件處理程序。 6 responseText 從服務器進程返回數據的字符串形式。 7 responseXML 從服務器進程返回的DOM兼容的文檔數據對象。 8 status 從服務器返回的數字代碼，比如常見的404（未找到）和200（已就緒） 9 statusText 伴隨狀態碼的字符串信息 10 readyState 對象狀態值 11 0 (未初始化) 對象已建立，但是尚未初始化（尚未調用open方法）12 1 (初始化) 對象已建立，尚未調用send方法 13 2 (發送數據) send方法已調用，但是當前的狀態及http頭未知 14 3 (數據傳送中) 已接收部分數據，因為響應及http頭不全，這時通過responseBody和responseText獲取部分數據會出現錯誤， 15 4 (完成) 數據接收完畢,此時可以通過通過responseXml和responseText獲取完整的回應數據 16 Method ：Post 發送數據方式 url send（特屬於post方式） 17 Get 發送數據方式 url
配置實例：
1 !DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 </head> 7 <body> 8 <div id="myTime"></div> 9 <input id="Button1" type="button" value="Get Time" onclick="creatReq();" > 10 11 <script type="text/javascript" language="javascript"> 12 var req; //定義變量，用來創建xmlhttprequest對象 13 function creatReq() //創建xmlhttprequest,ajax開始 14 { 15 var url = "ajaxServer.aspx"; //要請求的服務端地址 16 if(window.XMLHttpRequest) //非IE瀏覽器及IE7(7.0及以上版本),用xmlhttprequest對象創建 17 { 18 req = new XMLHttpRequest(); 19 } 20 else if(window.ActiveXObject) //IE(6.0及以下版本)瀏覽器用activexobject對象創建，如果用戶瀏覽器禁用了ActiveX,可能會失敗。 21 { 22 req = new ActiveXObject("Microsoft.XMLHttp"); 23 } 24 if(req) //成功創建xmlhttprequest 25 { 26 req.open("GET",url, true); //與服務端建立連接(請求方式post或get，地址,true表示異步) 27 req.onreadystatechange = callback; //指定回調函數 28 req.send(null); //發送請求 29 } 30 } 31 function callback() //回調函數，對服務端響應處理，監視response狀態 32 { 33 if(req.readyState == 4) //請求狀態為4表示成功 34 { 35 if(req.status == 200) //http狀態200表示OK 36 { 37 Display(); //所有狀態成功，執行此函數，顯示數據 38 } 39 else // http返回狀態失敗 40 { 41 alert("服務端返回狀態" + req.statusText); 42 } 43 } 44 else //請求狀態還沒有成功，頁面等待 45 { 46 document.getElementById("myTime").innerHTML = "數據加載中..."; 47 } 48 } 49 50 function Display() //接受服務器端返回的數據，對其進行顯示 51 { 52 document.getElementById("MyTime").innerHTML = req.responseText; 53 } 54 </script> 55 </body> 56 </html>View Code
XMLHttpRequest 對象