JS XMLHttpRequest入門教程
當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流
→『 技術(shù)文檔交流 』
在 Javascript 中，XMLHttpRequest 是客戶端的一個(gè) API，它為瀏覽器與服務(wù)器通信提供了一個(gè)便捷通道?，F(xiàn)代瀏覽器都支持 XMLHttpRequest API，如 IE 7+、Firefox、Chrome、Safari 和 Opera。創(chuàng)建 XMLHttpRequest 對(duì)象XMLHttpRequest 用于在后臺(tái)與服務(wù)器交換數(shù)據(jù)。創(chuàng)建 XMLHttpRequest 對(duì)象的方法如下：var xhr = new XMLHttpRequest (); IE 5.0 版本開始以 ActiveX 組件形式支持 XMLHttpRequest，IE 7.0 版本開始標(biāo)準(zhǔn)化 XMLHttpRequest。不過所有瀏覽器實(shí)現(xiàn)的 XMLHttpRequest 對(duì)象都提供相同的接口和用法。 示例下面示例使用工廠模式把定義 XMLHttpRequest 對(duì)象進(jìn)行封裝，這樣只需要調(diào)用 creatXHR() 方法就可以返回一個(gè) XMLHttpRequest 對(duì)象。 //創(chuàng)建XMLHttpRequest 對(duì)象 //參數(shù)：無 //返回值：XMLHttpRequest 對(duì)象 function createXHR () { var XHR = [ //兼容不同瀏覽器和版本得創(chuàng)建函數(shù)數(shù)組 function () { return new XMLHttpRequest () }, function () { return new ActiveXObject ("Msxml2.XMLHTTP") }, function () { return new ActiveXObject ("Msxml3.XMLHTTP") }, function () { return new ActiveXObject ("Microsoft.XMLHTTP") } ]; var xhr = null; //嘗試調(diào)用函數(shù)，如果成功則返回XMLHttpRequest對(duì)象，否則繼續(xù)嘗試 for (var i = 0; i < XHR.length; i ++) { try { xhr = XHR[i](); } catch(e) { continue //如果發(fā)生異常，則繼續(xù)下一個(gè)函數(shù)調(diào)用 } break; //如果成功，則中止循環(huán) } return xhr; //返回對(duì)象實(shí)例 } 建立連接在 Javascript 中，使用 XMLHttpRequest 對(duì)象的 open() 方法可以建立一個(gè) HTTP 請(qǐng)求。用法如下：xhr.open(method, url, async, username, password); 其中 xhr 表示 XMLHttpRequest 對(duì)象，open() 方法包含 5 個(gè)參數(shù)，說明如下：
建立連接后，可以使用 send() 方法發(fā)送請(qǐng)求。用法如下： xhr.send(body); 參數(shù) body 表示將通過該請(qǐng)求發(fā)送的數(shù)據(jù)，如果不傳遞信息，可以設(shè)置為 null 或者省略。發(fā)送請(qǐng)求后，可以使用 XMLHttpRequest 對(duì)象的 responseBody、responseStream、responseText 或 responseXML 屬等待接收響應(yīng)數(shù)據(jù)。 示例下面示例簡(jiǎn)單演示了如何實(shí)現(xiàn)異步通信的方法。 var xhr = creatXHR(); //實(shí)例化XMLHttpRequest 對(duì)象
xhr.open ("GET", "server.txt", false"); //建立連接xhr.send(null); //發(fā)送請(qǐng)求
console.log(xhr.responseText); //接收數(shù)據(jù)Hello World //服務(wù)器端腳本 發(fā)送 GET 請(qǐng)求在 Javascript 中，發(fā)送 GET 請(qǐng)求簡(jiǎn)單、方便，適用于簡(jiǎn)單字符串，不適用于大容量或加密數(shù)據(jù)。實(shí)現(xiàn)方法：將包含查詢字符串的 URL 傳入 open() 方法，設(shè)置第 1 個(gè)參數(shù)值為 GET 即可。服務(wù)器能夠通過查詢字符串接收用戶信息。示例下面示例以 GET 方式向服務(wù)器傳遞一條信息 callback=functionName。 <input name="submit" type="button" id="submit" value="向服務(wù)器發(fā)出請(qǐng)求" /> <script> window.onload = function () { //頁面初始化 var b = document.getElementsByTagName("input")[0]; b.onclick = function () { var url = "server.php?callback=functionName"； //設(shè)置查詢字符串 var xhr = createXHR(); //實(shí)例化XMLHttpRequest 對(duì)象 xhr.open("GET", url, false); //建立連接，要求同步響應(yīng) xhr.send(null); //發(fā)送請(qǐng)求 console.log(xhr.responseText); //接收數(shù)據(jù) } } </script> <?php echo $_GET["callback"]; ?> 查詢字符串通過問號(hào) ?作為前綴附加在 URL 的末尾，發(fā)送數(shù)據(jù)是以連字符&連接的一個(gè)或多個(gè)名值對(duì)。發(fā)送 POST 請(qǐng)求在 Javascript 中，POST 請(qǐng)求允許發(fā)送任意類型、長(zhǎng)度的數(shù)據(jù)，多用于表單提交，以 send() 方法進(jìn)行傳遞，而不以查詢字符串的方式進(jìn)行傳遞。POST 字符串與 GET 字符串的格式相同。格式如下：send("name1=value1&name2=value2..."); 示例使用 POST 方法向服務(wù)器傳遞數(shù)據(jù)。 window.onload = function () { //頁面初始化 var b = document.getElementsByTagName("input")[0]; b.onclick = function () { var url = "server.php"; //設(shè)置請(qǐng)求的地址 var xhr = createXHR(); //實(shí)例化XMLHttpRequest 對(duì)象 xhr.open("POST", url, false); //建立連接，要求同步響應(yīng) xhr.setRequestHeader ('Content-type', 'application/x-www-form-urlencoded'); //設(shè)置為表單方式提交 xhr.send("callback=functionName"); //發(fā)送請(qǐng)求 console.log(xhr.responseText); //接收數(shù)據(jù) } } 在服務(wù)器端設(shè)計(jì)接收 POST 方式傳遞的數(shù)據(jù)，并進(jìn)行響應(yīng)。 <?php echo $_POST["callback"]; ?> 異步響應(yīng)狀態(tài)在 Javascript 中，使用 readyState 屬性可以實(shí)時(shí)跟蹤異步響應(yīng)狀態(tài)。當(dāng)該屬性值發(fā)生變化時(shí)，會(huì)觸發(fā) readystatechange 事件，調(diào)用綁定的回調(diào)函數(shù)。readyState 屬性值說明如表所示。
考慮到各種特殊情況，更安全的方法是同時(shí)監(jiān)測(cè) HTTP 狀態(tài)碼，只有當(dāng) HTTP 狀態(tài)碼為 200 時(shí)，才說明 HTTP 響應(yīng)順利完成。 示例下面示例中，修改請(qǐng)求為異步響應(yīng)請(qǐng)求，然后通過 status 屬性獲取當(dāng)前的 HTTP 狀態(tài)碼。如果 readyState 屬性值為 4，且 status（狀態(tài)碼）屬性值為 200，則說明 HTTP 請(qǐng)求和響應(yīng)過程順利完成，這時(shí)可以安全、異步的讀取數(shù)據(jù)。 window.onload = function () { //頁面初始化 var b = document.getElementsByTagName("input")[0]; b.onclick = function () { var url = "server.php"; //設(shè)置請(qǐng)求的地址 var xhr = createXHR(); //實(shí)例化XMLHttpRequest對(duì)象 xhr.open("POST", url, true); //建立間接，要求異步響應(yīng) xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); //設(shè)置為表單方式提交 xhr.onreadystatechange = function () { //綁定響應(yīng)狀態(tài)事件監(jiān)聽函數(shù) if (xhr.readyState == 4) { //監(jiān)聽readyState狀態(tài) if (xhr.status == 200 || xhr.status == 0) { //監(jiān)聽HTTP狀態(tài)碼 console.log(xhr.responseText); //接收數(shù)據(jù) } } } xhr.send("callback=functionName"); //發(fā)送請(qǐng)求 } } 中止請(qǐng)求使用 abort() 方法可以中止正在進(jìn)行的請(qǐng)求。用法如下：xhr.onreadystatechange = function () {}; //清理事件響應(yīng)函數(shù) 在調(diào)用 abort() 方法前，應(yīng)先清除 onreadystatechange 事件處理函數(shù)，因?yàn)?IE 和 Mozilla 在請(qǐng)求中止后也會(huì)激活這個(gè)事件處理函數(shù)。如果給 onreadystatechange 屬性設(shè)置為 null，則 IE 會(huì)發(fā)生異常，所以為它設(shè)置一個(gè)空函數(shù)。 獲取和設(shè)置頭部消息HTTP 請(qǐng)求和響應(yīng)都包含一組頭部消息，獲取和設(shè)置頭部消息可以使用下面兩個(gè)方法。
示例下面示例將獲取 HTTP 響應(yīng)的所有頭部消息。 var xhr = createXHR(); var url = "server.txt"; xhr.open("GET", url, true); xhr.onreadystatechange = function () { if (xhr.readyState == 4 && xhr.status == 200) { console.log(xhr.getAllResponseHeaders()); } } xhr.send(null); console.log(xhr.getResponseHeader("Content-Type"));xhr.setResponseHeader("Header-name", "value");xhr.setResponseHeader("Content-Type", "application/x-www-form-urlencoded");http://c.biancheng.net/view/5995.html 該文章在 2023/5/11 11:08:34 編輯過 |
相關(guān)文章
正在查詢... 
|
400 186 1886
