XMLHttpRequest 對象

時間 2019-11-30

標籤 xmlhttprequest 對象简体版

原文原文鏈接

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

什麼是 XMLHttpRequest 對象？

XMLHttpRequest 對象用於在後臺與服務器交換數據。javascript

XMLHttpRequest 對象是開發者的夢想，由於您可以：html

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

全部現代的瀏覽器都支持 XMLHttpRequest 對象。java

建立 XMLHttpRequest 對象

全部現代瀏覽器 (IE7+、Firefox、Chrome、Safari 以及 Opera) 都內建了 XMLHttpRequest 對象。ajax

經過一行簡單的 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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。