JS XMLHttpRequest入門教程

當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流 →『技術(shù)文檔交流』

freeflydom

2023年5月11日 11:8 本文熱度 804

在 Javascript 中，XMLHttpRequest 是客戶端的一個(gè) API，它為瀏覽器與服務(wù)器通信提供了一個(gè)便捷通道。現(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í)例
}

在上面代碼中，首先定義一個(gè)數(shù)組，收集各種創(chuàng)建 XMLHttpRequest 對(duì)象的函數(shù)。第 1 個(gè)函數(shù)是標(biāo)準(zhǔn)用法，其他函數(shù)主要針對(duì) IE 瀏覽器的不同版本嘗試創(chuàng)建 ActiveX 對(duì)象。然后設(shè)置變量 xhr 為 null，表示為空對(duì)象。接著遍歷工廠內(nèi)所有函數(shù)并嘗試執(zhí)行它們，為了避免發(fā)生異常，把所有調(diào)用函數(shù)放在 try 中執(zhí)行，如果發(fā)生錯(cuò)誤，則在 catch 中捕獲異常并執(zhí)行 continue 命令，返回繼續(xù)執(zhí)行，避免拋出異常。如果創(chuàng)建成功，則中止循環(huán)，返回 XMLHttpRequest 對(duì)象。

建立連接

在 Javascript 中，使用 XMLHttpRequest 對(duì)象的 open() 方法可以建立一個(gè) HTTP 請(qǐng)求。用法如下：

xhr.open(method, url, async, username, password);

其中 xhr 表示 XMLHttpRequest 對(duì)象，open() 方法包含 5 個(gè)參數(shù)，說明如下：

method：HTTP 請(qǐng)求方法，必須參數(shù)，值包括 POST、GET 和 HEAD，大小寫不敏感。
url：請(qǐng)求的 URL 字符串，必須參數(shù)，大部分瀏覽器僅支持同源請(qǐng)求。
async：指定請(qǐng)求是否為異步方式，默認(rèn)為 true。如果為 false，當(dāng)狀態(tài)改變時(shí)會(huì)立即調(diào)用 onreadystatechange 屬性指定的回調(diào)函數(shù)。
username：可選參數(shù)，如果服務(wù)器需要驗(yàn)證，該參數(shù)指定用戶名，如果未指定，當(dāng)服務(wù)器需要驗(yàn)證時(shí)，會(huì)彈出驗(yàn)證窗口。
password：可選參數(shù)，驗(yàn)證信息中的密碼部分，如果用戶名為空，則該值將被忽略。

建立連接后，可以使用 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ù)

在服務(wù)器端（server.txt）中輸入下面的字符串。

Hello World  //服務(wù)器端腳本

在瀏覽器控制臺(tái)會(huì)顯示“Hello World”的提示信息。該字符串是從服務(wù)器端響應(yīng)的字符串。

發(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>

在服務(wù)器端文件（server.php）中輸入下面的代碼，獲取查詢字符串中 callback 的參數(shù)值，并把該值響應(yīng)給客戶端。

<?php
    echo $_GET["callback"];
?>

在瀏覽器中預(yù)覽頁面，當(dāng)單擊提交按鈕時(shí)，在控制臺(tái)顯示傳遞的參數(shù)值。

查詢字符串通過問號(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ù)
    }
}

在 open() 方法中，設(shè)置第一個(gè)參數(shù)為 POST，然后使用 setRequestHeader() 方法設(shè)置請(qǐng)求消息的內(nèi)容類型為“application/x-www-form-urlencoded”，它表示傳遞的是表單值，一般使用 POST 發(fā)送請(qǐng)求時(shí)都必須設(shè)置該選項(xiàng)，否則服務(wù)器無法識(shí)別傳遞過來的數(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 屬性值說明如表所示。

readyState屬性值
返回值	說明
0	未初始化。表示對(duì)象已經(jīng)建立，但是尚未初始化，尚未調(diào)用 open() 方法
1	初始化。表示對(duì)象已經(jīng)建立，尚未調(diào)用 send() 方法
2	發(fā)送數(shù)據(jù)。表示 send() 方法已經(jīng)調(diào)用，但是當(dāng)前的狀態(tài)及 HTTP 頭未知
3	數(shù)據(jù)傳送中。已經(jīng)接收部分?jǐn)?shù)據(jù)，因?yàn)轫憫?yīng)及 HTTP 頭不安全，這時(shí)通過 responseBody 和 responseText 獲取部分?jǐn)?shù)據(jù)會(huì)出現(xiàn)錯(cuò)誤
4	完成。數(shù)據(jù)接收完畢，此時(shí)可以通過 responseBody 和 responseText 獲取完整的響應(yīng)數(shù)據(jù)

如果 readyState 屬性值為 4，則說明響應(yīng)完畢，那么就可以安全的讀取響應(yīng)的數(shù)據(jù)。

考慮到各種特殊情況，更安全的方法是同時(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ù)
xhr.abort(); //中止請(qǐng)求

在調(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è)方法。

getAllResponseHeaders()：獲取響應(yīng)的 HTTP頭部消息。
getResponseHeader("Header-name")：獲取指定的 HTTP 頭部消息。

示例

下面示例將獲取 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);

如果要獲取指定的某個(gè)頭部消息，可以使用 getResponseHeader() 方法，參數(shù)為獲取頭部的名稱。例如，獲取 Content-Type 頭部的值，可以這樣設(shè)計(jì)。

console.log(xhr.getResponseHeader("Content-Type"));

除了可以獲取這些頭部消息外，還可以使用 setResponseHeader() 方法在發(fā)送請(qǐng)求中設(shè)置各種頭部消息。用法如下：

xhr.setResponseHeader("Header-name", "value");

其中 Header-name 表示頭部消息的名稱，value 表示消息的具體值。例如，使用 POST 方法傳遞表單數(shù)據(jù)，可以設(shè)置如下頭部消息。

xhr.setResponseHeader("Content-Type", "application/x-www-form-urlencoded");

http://c.biancheng.net/view/5995.html

該文章在 2023/5/11 11:08:34 編輯過

相關(guān)文章

正在查詢...

點(diǎn)晴ERP是一款針對(duì)中小制造業(yè)的專業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國(guó)內(nèi)大量中小企業(yè)的青睞。

點(diǎn)晴PMS碼頭管理系統(tǒng)主要針對(duì)港口碼頭集裝箱與散貨日常運(yùn)作、調(diào)度、堆場(chǎng)、車隊(duì)、財(cái)務(wù)費(fèi)用、相關(guān)報(bào)表等業(yè)務(wù)管理，結(jié)合碼頭的業(yè)務(wù)特點(diǎn)，圍繞調(diào)度、堆場(chǎng)作業(yè)而開發(fā)的。集技術(shù)的先進(jìn)性、管理的有效性于一體，是物流碼頭及其他港口類企業(yè)的高效ERP管理信息系統(tǒng)。

點(diǎn)晴WMS倉儲(chǔ)管理系統(tǒng)提供了貨物產(chǎn)品管理,銷售管理,采購(gòu)管理,倉儲(chǔ)管理,倉庫管理,保質(zhì)期管理,貨位管理,庫位管理,生產(chǎn)管理,WMS管理系統(tǒng),標(biāo)簽打印,條形碼,二維碼管理,批號(hào)管理軟件。

點(diǎn)晴免費(fèi)OA是一款軟件和通用服務(wù)都免費(fèi)，不限功能、不限時(shí)間、不限用戶的免費(fèi)OA協(xié)同辦公管理系統(tǒng)。

狠狠色丁香婷婷综合尤物/久久精品综合一区二区三区/中国有色金属学报/国产日韩欧美在线观看 - 国产一区二区三区四区五区tv