XMLHttpRequest實(shí)現(xiàn)HTTP通信的示例詳解

更新時(shí)間：2025年07月02日 09:42:03 作者：空名Noname

這篇文章主要為大家詳細(xì)介紹了如何使用XMLHttpRequest實(shí)現(xiàn)HTTP通信,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

由于 QML 的 JavaScript 兼容性，我們可以直接使用 JavaScript 的 XMLHttpRequest 對(duì)象進(jìn)行 HTTP 請(qǐng)求。QML 的 XMLHttpRequest 實(shí)現(xiàn)與標(biāo)準(zhǔn)瀏覽器的實(shí)現(xiàn)非常相似，但有一些限制和特殊行為需要注意。

而QML實(shí)現(xiàn)TCP等其他通信一般就需要借助Qt與C++的關(guān)系了，本文對(duì)此略過

1. XMLHttpRequest對(duì)象詳解

1.1 屬性

readyState：當(dāng)前對(duì)象的狀態(tài)碼，取值如下：
- 0 (UNSENT)：未初始化，尚未調(diào)用 open()。
- 1 (OPENED)：已調(diào)用 open()，但未調(diào)用 send()。
- 2 (HEADERS_RECEIVED)：已接收響應(yīng)頭。
- 3 (LOADING)：正在接收響應(yīng)體。
- 4 (DONE)：請(qǐng)求完成，響應(yīng)數(shù)據(jù)就緒。
status：int，當(dāng)前HTTP請(qǐng)求的狀態(tài)碼（如 200 成功，404 未找到，見3.3）。
statusText：string，HTTP響應(yīng)的狀態(tài)文本（如 “OK”、“Not Found” 等，見3.3）。只有在 readyState 為 DONE 時(shí)才有效。
responseType：string，響應(yīng)內(nèi)容的數(shù)據(jù)類型。
responseText：string，服務(wù)器的響應(yīng)數(shù)據(jù)，以純文本形式表示。僅在 responseType 為 text 或未設(shè)置時(shí)有效
response：var，根據(jù) responseType 解析后的響應(yīng)數(shù)據(jù)（如 JSON 對(duì)象、二進(jìn)制數(shù)據(jù)）。默認(rèn)為 ""（空字符串），在 QML 中可以通過設(shè)置 responseType 來(lái)獲取不同類型的數(shù)據(jù)。
responseURL：string，Qt6.6引入，實(shí)際響應(yīng)的URL，如果請(qǐng)求被重定向，則返回最終的 URL。
responseXML：var，服務(wù)器的響應(yīng)數(shù)據(jù)，以XML文檔形式表示，僅當(dāng)響應(yīng)內(nèi)容為XML格式時(shí)有效。
timeout：int，超時(shí)時(shí)間（以毫秒為單位）。如果設(shè)置，當(dāng)請(qǐng)求超過指定時(shí)間仍未完成時(shí)會(huì)觸發(fā) ontimeout 事件。
withCredentials：bool，表示是否在跨域請(qǐng)求中發(fā)送憑據(jù)（如 Cookies）。僅在支持 CORS 的服務(wù)器上有效。

1.2 方法

void open(method, url, async)：初始化請(qǐng)求。
- method：HTTP 方法（如 GET、POST、PUT）。
- url：請(qǐng)求地址（支持相對(duì)路徑和絕對(duì)路徑）。
- async：是否異步（可省略，默認(rèn)為 true，QML中通常不推薦設(shè)為 false）。
void send(data)：發(fā)送請(qǐng)求。
- data：獲取的請(qǐng)求體內(nèi)容（GET 請(qǐng)求可省略或傳 null，POST 可傳 FormData 或 JSON 字符串）。
void setRequestHeader(header, value)：設(shè)置請(qǐng)求頭（需在 open() 之后、send() 之前調(diào)用）。
void abort()：終止當(dāng)前請(qǐng)求。
string getAllResponseHeaders()：
string getResponseHeader(headerName)：

1.3 事件

onreadystatechange：function，函數(shù)類型，每當(dāng)readyState 在幾個(gè)狀態(tài)中發(fā)生變化時(shí)就會(huì)觸發(fā)，執(zhí)行函數(shù)，用于監(jiān)聽請(qǐng)求狀態(tài)。一般為其指定函數(shù)，用于指定處理各種狀態(tài)變化后的事件。
onerror：function，函數(shù)類型，網(wǎng)絡(luò)錯(cuò)誤時(shí)觸發(fā)（如域名解析失?。?，執(zhí)行函數(shù)。
ontimeout：function，函數(shù)類型，請(qǐng)求超時(shí)時(shí)觸發(fā)（需先設(shè)置 timeout 屬性），執(zhí)行函數(shù)。
onload：function，函數(shù)類型，請(qǐng)求成功完成時(shí)觸發(fā)（readyState === DONE 且 status === 200），執(zhí)行函數(shù)。
onprogress：function，函數(shù)類型，上傳或下載進(jìn)度更新時(shí)觸發(fā)（適用于大文件傳輸），執(zhí)行函數(shù)。

2. XMLHttpRequest對(duì)象的使用

總示例如下：

function postCMD(cmd){
        httpRequest("http://127.0.0.1:7111/track/" + cmd, "POST", null, function(resultS, status){
            if(status === 200){
            }else{
                /// \todo warning message
            }
        })
    }

function httpRequest(serverUrl, method, data, callback){
	var xhr = new XMLHttpRequest();
	xhr.onreadystatechange = function(){
		if (xhr.readyState === XMLHttpRequest.HEADERS_RECEIVED){
        
		}else if(xhr.readyState === XMLHttpRequest.DONE){
    		if(callback){
				callback(xhr.responseText.toString() ,xhr.status)
			}
		}
	}
	xhr.open(method, serverUrl);
	xhr.timeout = 3000;
	xhr.setRequestHeader("Connection", "close");
	if(!data){
    	xhr.send();
    }else{
		xhr.send(data);
	}
}

2.1 使用XMLHttpRequest的流程

創(chuàng)建 XMLHttpRequest 對(duì)象。

調(diào)用 open() 配置請(qǐng)求。

設(shè)置請(qǐng)求頭。（可選）

設(shè)置 responseType。（可選）

監(jiān)聽 onreadystatechange，處理響應(yīng)。（在發(fā)送請(qǐng)求之前配置即可即可）

調(diào)用 void send(data) 方法發(fā)送請(qǐng)求并傳送數(shù)據(jù)。

2.2 配置請(qǐng)求的基本信息和請(qǐng)求頭

使用new創(chuàng)建對(duì)象
使用void open(method, url, async)初始化請(qǐng)求，指定HTTP方法和請(qǐng)求地址。
使用void setRequestHeader(header, value)指定請(qǐng)求頭的key和value，可累積配置。
還可以指定一些其他參數(shù)，如通過設(shè)置timeout屬性來(lái)設(shè)置時(shí)間限制等等。

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://127.0.0.1:12345/");
xhr.setRequestHeader("Content-Type", "application/json");
xhr.setRequestHeader("Authorization", "Bearer your_token_here");
xhr.timeout = 3000;

2.3 監(jiān)聽事件狀態(tài)進(jìn)行對(duì)應(yīng)處理

在需要的時(shí)候?yàn)槭录x值函數(shù)，類似于回調(diào)函數(shù)，讓在對(duì)應(yīng)狀態(tài)發(fā)生變化的時(shí)候觸發(fā)此函數(shù)來(lái)獲得想要的結(jié)果。

一般都會(huì)對(duì)readyState的onreadystatechange事件進(jìn)行監(jiān)聽，以對(duì)請(qǐng)求的狀態(tài)有著整體的把握。并且能在請(qǐng)求結(jié)束的時(shí)候，通過responseText等屬性獲取GET的數(shù)據(jù)等。

xhr.onreadystatechange = function() {
    console.log("當(dāng)前 readyState:", xhr.readyState);
    if (xhr.readyState === XMLHttpRequest.DONE) { // 請(qǐng)求完成
        if (xhr.status === 200) { // 成功響應(yīng)
            console.log("請(qǐng)求成功！");
            console.log("響應(yīng)數(shù)據(jù):", xhr.responseText);
        } else {
            console.error("請(qǐng)求失敗，狀態(tài)碼:", xhr.status);
        }
    }
}

xhr.onerror = function() {
    console.error("網(wǎng)絡(luò)錯(cuò)誤: 無(wú)法連接到服務(wù)器");
}

// 對(duì)于ontimeout、onload、onprogress都是同理

2.4 發(fā)送請(qǐng)求

在配置完成后使用void send(data)方法發(fā)送請(qǐng)求并傳送數(shù)據(jù)。

對(duì)于參數(shù)data，如果是 GET 請(qǐng)求可省略或傳 null，而如果是 POST 可傳 FormData 或 JSON 字符串。

// GET時(shí)候可用
xhr.send();

// 通用
var data = '';
data = "...."; // 數(shù)據(jù)
xhr.send(data);

3. 進(jìn)階用法

3.1 發(fā)送 FormData（表單數(shù)據(jù)）

適用于文件上傳或 multipart/form-data 格式：

 function uploadFile() {
     var xhr = new XMLHttpRequest();
     var formData = new FormData();
     formData.append("file", fileInput.files[0]); // 假設(shè) fileInput 是文件選擇框
     formData.append("comment", "QML 文件上傳測(cè)試");
 
     xhr.open("POST", "https://api.example.com/upload");
     xhr.onreadystatechange = function() {
         if (xhr.readyState === XMLHttpRequest.DONE) {
             console.log("上傳結(jié)果:", xhr.status);
         }
     };
     xhr.send(formData);
 }

3.2 處理二進(jìn)制數(shù)據(jù)（如圖片）

通過設(shè)置 responseType 為 "arraybuffer"，可直接獲取二進(jìn)制數(shù)據(jù)：

 function loadImage() {
     var xhr = new XMLHttpRequest();
     xhr.open("GET", "https://example.com/image.png");
     xhr.responseType = "arraybuffer";
     xhr.onreadystatechange = function() {
         if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
             var byteArray = new Uint8Array(xhr.response);
             var imageData = "data:image/png;base64," + btoa(String.fromCharCode.apply(null, byteArray));
             imageElement.source = imageData; // 顯示圖片
         }
     };
     xhr.send();
 }

3.3 常見請(qǐng)求的狀態(tài)碼

狀態(tài)碼	含義	典型場(chǎng)景
200	請(qǐng)求成功	常規(guī) GET/POST 請(qǐng)求
201	資源已創(chuàng)建	創(chuàng)建新用戶、提交表單
204	請(qǐng)求成功，但無(wú)內(nèi)容	DELETE 請(qǐng)求
301	資源永久移動(dòng)	URL 重寫
302	資源臨時(shí)移動(dòng)	登錄后跳轉(zhuǎn)
304	資源未修改，使用緩存	條件請(qǐng)求
400	請(qǐng)求無(wú)效	表單數(shù)據(jù)錯(cuò)誤
401	未授權(quán)	需要登錄
403	禁止訪問	權(quán)限不足
404	資源不存在	頁(yè)面或 API 路徑錯(cuò)誤
405	方法不被允許	不支持的 HTTP 方法
429	請(qǐng)求過多	觸發(fā)速率限制
500	服務(wù)器內(nèi)部錯(cuò)誤	代碼崩潰或數(shù)據(jù)庫(kù)問題
502	網(wǎng)關(guān)錯(cuò)誤	上游服務(wù)不可用
503	服務(wù)不可用	服務(wù)器維護(hù)或過載
504	網(wǎng)關(guān)超時(shí)	上游服務(wù)響應(yīng)超時(shí)

3.4 跨域請(qǐng)求與 withCredentials

跨域請(qǐng)求是常見的需求，特別是在需要攜帶 Cookies 或認(rèn)證信息時(shí)。通過設(shè)置 withCredentials 屬性為 true，可以在跨域請(qǐng)求中發(fā)送憑據(jù)。

要注意的是，服務(wù)器必須支持 CORS（跨域資源共享），并允許 credentials，如果服務(wù)器未正確配置 CORS，可能會(huì)導(dǎo)致請(qǐng)求失敗。

function makeCORSRequest() {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "https://api.example.com/data", true);
    xhr.withCredentials = true; // 允許跨域請(qǐng)求攜帶憑據(jù)

    xhr.onreadystatechange = function() {
        if (xhr.readyState === XMLHttpRequest.DONE) {
            if (xhr.status === 200) {
                console.log("跨域請(qǐng)求成功:", xhr.responseText);
            } else {
                console.error("跨域請(qǐng)求失敗，狀態(tài)碼:", xhr.status);
            }
        }
    };

    xhr.send();
}

3.5 利用onprogress事件監(jiān)控上傳/下載進(jìn)度

對(duì)于大文件下載，可以通過 onprogress 事件實(shí)時(shí)更新下載進(jìn)度，并顯示給用戶。

function downloadFile(url) {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);

    xhr.onprogress = function(event) {
        if (event.lengthComputable) {
            var percentComplete = (event.loaded / event.total) * 100;
            console.log("下載進(jìn)度:", percentComplete.toFixed(2) + "%");
        } else {
            console.log("無(wú)法計(jì)算總大小，正在下載...");
        }
    };

    xhr.onload = function() {
        if (xhr.status === 200) {
            console.log("文件下載完成！");
        } else {
            console.error("下載失敗，狀態(tài)碼:", xhr.status);
        }
    };

    xhr.onerror = function() {
        console.error("網(wǎng)絡(luò)錯(cuò)誤: 無(wú)法連接到服務(wù)器");
    };

    xhr.send();
}

類似地，對(duì)于大文件上傳，也可以通過 onprogress 事件監(jiān)控上傳進(jìn)度。

function uploadFile(fileInput) {
    var xhr = new XMLHttpRequest();
    var formData = new FormData();
    formData.append("file", fileInput.files[0]);

    xhr.open("POST", "https://api.example.com/upload", true);

    xhr.upload.onprogress = function(event) {
        if (event.lengthComputable) {
            var percentComplete = (event.loaded / event.total) * 100;
            console.log("上傳進(jìn)度:", percentComplete.toFixed(2) + "%");
        } else {
            console.log("無(wú)法計(jì)算總大小，正在上傳...");
        }
    };

    xhr.onload = function() {
        if (xhr.status === 200) {
            console.log("文件上傳成功！");
        } else {
            console.error("上傳失敗，狀態(tài)碼:", xhr.status);
        }
    };

    xhr.onerror = function() {
        console.error("網(wǎng)絡(luò)錯(cuò)誤: 無(wú)法連接到服務(wù)器");
    };

    xhr.send(formData);
}

到此這篇關(guān)于XMLHttpRequest實(shí)現(xiàn)HTTP通信的示例詳解的文章就介紹到這了,更多相關(guān)XMLHttpRequest HTTP通信內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: