XMLHttpRequest對象的詳解

XMLHttpRequest對象是JavaScript中實現與伺服器進行HTTP通信的重要介面，同時也是AJAX技術的核心。XMLHttpRequest對象通過使用HTTP協議在瀏覽器和伺服器之間交換數據，實現非同步刷新數據，而不需要刷新整個頁面。本文將從多個方面對XMLHttpRequest對象做詳細的闡述。

一、XMLHttpRequest對象的創建與基本屬性

XMLHttpRequest對象通過創建一個新的XMLHttpRequest實例來使用。創建XMLHttpRequest對象的方法有兩種：使用構造函數XMLHttpRequest()和使用ActiveXObject兼容IE瀏覽器。創建一個XMLHttpRequest對象的示例代碼如下：

var xmlhttp;
if (window.XMLHttpRequest) {
  // 兼容 IE7+, Firefox, Chrome, Opera, Safari 瀏覽器
  xmlhttp = new XMLHttpRequest();
} else {
  // 兼容 IE6, IE5 瀏覽器
  xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

使用XMLHttpRequest對象的基本屬性如下：

• onreadystatechange：當readyState屬性改變時觸發的事件
• readyState：請求的狀態。狀態有0（初始化XMLHttpRequest對象）、1（XMLHttpRequest對象正常打開）、2（已發送一個請求，但未接收到響應）、3（已接收到部分響應數據，仍在等待剩餘的響應數據）、4（已完成響應的所有操作）
• status：響應的HTTP狀態碼
• statusText：HTTP狀態的文本描述
• responseText / responseXML：響應內容的文本/ XML對象

二、XMLHttpRequest對象發送請求及響應處理

創建XMLHttpRequest對象實例並設置請求的url、請求方式和請求的傳遞參數後，我們需要發送請求並處理伺服器響應。常見的請求方式有GET和POST方法，其中GET方式的請求參數附在請求url後面，而POST則是放在請求體中。XMLHttpRequest對象的發送請求和處理響應的示例代碼如下：

xmlhttp.open("GET", "url", true);
// 判斷狀態並處理響應
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    // 處理響應內容
    console.log(this.responseText);
  }
};
xmlhttp.send();

三、XMLHttpRequest對象的進度事件

XMLHttpRequest對象除了可以發送請求和接收伺服器響應外，還可以監聽請求的進度事件，可以用來獲取當前請求的狀態、上傳和下載的進度百分比。XMLHttpRequest對象的進度事件包含5種類型：loadstart、progress、abort、error和load，分別表示請求開始、數據正在上傳或下載、請求被取消、請求失敗和請求已完成。XMLHttpRequest對象的進度事件示例代碼如下：

// 請求開始
xmlhttp.onloadstart = function(e) {
  console.log('loadstart', e);
};

// 接收伺服器響應數據
xmlhttp.onprogress = function(e) {
  if (e.lengthComputable) {
    console.log('progress:' + Math.round(e.loaded / e.total * 100) + '%');
  } else {
    console.log('progress:' + e.loaded);
  }
};

// 請求被取消
xmlhttp.onabort = function(e) {
  console.log('abort', e);
};

// 請求失敗
xmlhttp.onerror = function(e) {
  console.log('error', e);
};

// 請求完成
xmlhttp.onload = function(e) {
  console.log('load', e);
};

四、XMLHttpRequest對象的跨域請求

XMLHttpRequest對象的跨域請求是指JavaScript代碼在訪問不同域名的伺服器資源時，由於瀏覽器的同源策略限制，默認情況下只能獲取同一域名下的數據。為了解決這個問題，我們需要使用XMLHttpRequest對象的跨域請求功能。常用的跨域請求方式有代理伺服器、JSONP和CORS。其中CORS是現代瀏覽器支持的一種跨域請求方式。XMLHttpRequest對象的跨域請求示例代碼如下：

var xmlhttp = new XMLHttpRequest();
url = 'http://example.com/sample.json';
xmlhttp.open('GET', url, true);
xmlhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    console.log(this.responseText);
  }
};
xmlhttp.send();

五、XMLHttpRequest對象的安全考慮

XMLHttpRequest對象在使用時需要注意安全性問題。其中XMLHttpRequest對象不能跨域請求cookies，否則會被拒絕。我們可以使用XMLHttpRequest對象的withCredentials屬性來支持跨域請求cookies。XMLHttpRequest對象在通過GET方式發送請求時，請求的url中不能包含敏感信息，否則會導致瀏覽器將該信息暴露出去。同時，XMLHttpRequest對象可以通過設置請求頭中的Content-Type屬性來支持上傳文件。XMLHttpRequest對象的安全響應示例代碼如下：

//信任任何來源
Access-Control-Allow-Origin: *

//請求方式
Access-Control-Allow-Methods: *

//自定義請求頭
Access-Control-Allow-Headers: *

//可以攜帶cookies
Access-Control-Allow-Credentials: true

結語

本文從五個方面對XMLHttpRequest對象進行了詳細的闡述，包括XMLHttpRequest對象的創建與基本屬性、XMLHttpRequest對象發送請求及響應處理、XMLHttpRequest對象的進度事件、XMLHttpRequest對象的跨域請求和XMLHttpRequest對象的安全考慮。希望通過本篇文章對XMLHttpRequest對象有更為深入的了解，為前端開發的實踐提供幫助。