JS XMLHttpRequest入門教程

當前位置：點晴教程→知識管理交流 →『技術文檔交流』

freeflydom

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

在 Javascript 中，XMLHttpRequest 是客戶端的一個 API，它為瀏覽器與服務器通信提供了一個便捷通道。現代瀏覽器都支持 XMLHttpRequest API，如 IE 7+、Firefox、Chrome、Safari 和 Opera。

創建 XMLHttpRequest 對象

XMLHttpRequest 用于在后臺與服務器交換數據。創建 XMLHttpRequest 對象的方法如下：

var xhr = new XMLHttpRequest ();

IE 5.0 版本開始以 ActiveX 組件形式支持 XMLHttpRequest，IE 7.0 版本開始標準化 XMLHttpRequest。不過所有瀏覽器實現的 XMLHttpRequest 對象都提供相同的接口和用法。

示例

下面示例使用工廠模式把定義 XMLHttpRequest 對象進行封裝，這樣只需要調用 creatXHR() 方法就可以返回一個 XMLHttpRequest 對象。

//創建XMLHttpRequest 對象
//參數：無
//返回值：XMLHttpRequest 對象
function createXHR () {
    var XHR = [  //兼容不同瀏覽器和版本得創建函數數組
        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;
    //嘗試調用函數，如果成功則返回XMLHttpRequest對象，否則繼續嘗試
    for (var i = 0; i < XHR.length; i ++) {
        try {
            xhr = XHR[i]();
        } catch(e) {
            continue  //如果發生異常，則繼續下一個函數調用
        }
        break;  //如果成功，則中止循環
    }
    return xhr;  //返回對象實例
}

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

建立連接

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

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

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

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

建立連接后，可以使用 send() 方法發送請求。用法如下：

xhr.send(body);

參數 body 表示將通過該請求發送的數據，如果不傳遞信息，可以設置為 null 或者省略。

發送請求后，可以使用 XMLHttpRequest 對象的 responseBody、responseStream、responseText 或 responseXML 屬等待接收響應數據。

示例

下面示例簡單演示了如何實現異步通信的方法。

var xhr = creatXHR();  //實例化XMLHttpRequest 對象
xhr.open ("GET", "server.txt", false");  //建立連接xhr.send(null);  //發送請求
console.log(xhr.responseText);  //接收數據

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

Hello World  //服務器端腳本

在瀏覽器控制臺會顯示“Hello World”的提示信息。該字符串是從服務器端響應的字符串。

發送 GET 請求

在 Javascript 中，發送 GET 請求簡單、方便，適用于簡單字符串，不適用于大容量或加密數據。實現方法：將包含查詢字符串的 URL 傳入 open() 方法，設置第 1 個參數值為 GET 即可。服務器能夠通過查詢字符串接收用戶信息。

示例

下面示例以 GET 方式向服務器傳遞一條信息 callback=functionName。

<input name="submit" type="button" id="submit" value="向服務器發出請求" />
<script>
    window.onload = function () {  //頁面初始化
        var b = document.getElementsByTagName("input")[0];
        b.onclick = function () {
            var url = "server.php?callback=functionName"；  //設置查詢字符串
            var xhr = createXHR();  //實例化XMLHttpRequest 對象
            xhr.open("GET", url, false);  //建立連接，要求同步響應
            xhr.send(null);  //發送請求
            console.log(xhr.responseText);  //接收數據
        }
    }
</script>

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

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

在瀏覽器中預覽頁面，當單擊提交按鈕時，在控制臺顯示傳遞的參數值。

查詢字符串通過問號?作為前綴附加在 URL 的末尾，發送數據是以連字符&連接的一個或多個名值對。

發送 POST 請求

在 Javascript 中，POST 請求允許發送任意類型、長度的數據，多用于表單提交，以 send() 方法進行傳遞，而不以查詢字符串的方式進行傳遞。POST 字符串與 GET 字符串的格式相同。格式如下：

send("name1=value1&name2=value2...");

示例

使用 POST 方法向服務器傳遞數據。

window.onload = function () {  //頁面初始化
    var b = document.getElementsByTagName("input")[0];
    b.onclick = function () {
        var url = "server.php";  //設置請求的地址
        var xhr = createXHR();  //實例化XMLHttpRequest 對象
        xhr.open("POST", url, false);  //建立連接，要求同步響應
        xhr.setRequestHeader ('Content-type', 'application/x-www-form-urlencoded');  //設置為表單方式提交
        xhr.send("callback=functionName");  //發送請求
        console.log(xhr.responseText);  //接收數據
    }
}

在 open() 方法中，設置第一個參數為 POST，然后使用 setRequestHeader() 方法設置請求消息的內容類型為“application/x-www-form-urlencoded”，它表示傳遞的是表單值，一般使用 POST 發送請求時都必須設置該選項，否則服務器無法識別傳遞過來的數據。

在服務器端設計接收 POST 方式傳遞的數據，并進行響應。

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

異步響應狀態

在 Javascript 中，使用 readyState 屬性可以實時跟蹤異步響應狀態。當該屬性值發生變化時，會觸發 readystatechange 事件，調用綁定的回調函數。readyState 屬性值說明如表所示。

readyState屬性值
返回值	說明
0	未初始化。表示對象已經建立，但是尚未初始化，尚未調用 open() 方法
1	初始化。表示對象已經建立，尚未調用 send() 方法
2	發送數據。表示 send() 方法已經調用，但是當前的狀態及 HTTP 頭未知
3	數據傳送中。已經接收部分數據，因為響應及 HTTP 頭不安全，這時通過 responseBody 和 responseText 獲取部分數據會出現錯誤
4	完成。數據接收完畢，此時可以通過 responseBody 和 responseText 獲取完整的響應數據

如果 readyState 屬性值為 4，則說明響應完畢，那么就可以安全的讀取響應的數據。

考慮到各種特殊情況，更安全的方法是同時監測 HTTP 狀態碼，只有當 HTTP 狀態碼為 200 時，才說明 HTTP 響應順利完成。

示例

下面示例中，修改請求為異步響應請求，然后通過 status 屬性獲取當前的 HTTP 狀態碼。如果 readyState 屬性值為 4，且 status（狀態碼）屬性值為 200，則說明 HTTP 請求和響應過程順利完成，這時可以安全、異步的讀取數據。

window.onload = function () {  //頁面初始化
    var b = document.getElementsByTagName("input")[0];
    b.onclick = function () {
        var url = "server.php";  //設置請求的地址
        var xhr = createXHR();  //實例化XMLHttpRequest對象
        xhr.open("POST", url, true);  //建立間接，要求異步響應
        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');  //設置為表單方式提交
        xhr.onreadystatechange = function () {  //綁定響應狀態事件監聽函數
            if (xhr.readyState == 4) {  //監聽readyState狀態
                if (xhr.status == 200 || xhr.status == 0) {  //監聽HTTP狀態碼
                    console.log(xhr.responseText);  //接收數據
                }
            }
        }
        xhr.send("callback=functionName");  //發送請求
    }
}

中止請求

使用 abort() 方法可以中止正在進行的請求。用法如下：

xhr.onreadystatechange = function () {}; //清理事件響應函數
xhr.abort(); //中止請求

在調用 abort() 方法前，應先清除 onreadystatechange 事件處理函數，因為 IE 和 Mozilla 在請求中止后也會激活這個事件處理函數。如果給 onreadystatechange 屬性設置為 null，則 IE 會發生異常，所以為它設置一個空函數。

獲取和設置頭部消息

HTTP 請求和響應都包含一組頭部消息，獲取和設置頭部消息可以使用下面兩個方法。

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

示例

下面示例將獲取 HTTP 響應的所有頭部消息。

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);

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

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

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

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

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

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

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

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

正在查詢...

點晴ERP是一款針對中小制造業的專業生產管理軟件系統,系統成熟度和易用性得到了國內大量中小企業的青睞。

點晴PMS碼頭管理系統主要針對港口碼頭集裝箱與散貨日常運作、調度、堆場、車隊、財務費用、相關報表等業務管理，結合碼頭的業務特點，圍繞調度、堆場作業而開發的。集技術的先進性、管理的有效性于一體，是物流碼頭及其他港口類企業的高效ERP管理信息系統。

點晴WMS倉儲管理系統提供了貨物產品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產管理,WMS管理系統,標簽打印,條形碼,二維碼管理,批號管理軟件。

點晴免費OA是一款軟件和通用服務都免費，不限功能、不限時間、不限用戶的免費OA協同辦公管理系統。

欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区