深入了解XMLHTTP請求

一、XMLHTTP概述

XMLHTTP是JavaScript中用於在後台和服務器交換數據的對象。它使得Web開發人員能夠在用戶與頁面交互時，部分更新頁面，無需整個頁面刷新。XMLHTTP被廣泛應用於AJAX技術，用於實現無需刷新的異步數據交換。

二、XMLHTTP的工作原理

XMLHTTP對象在JavaScript中使用，幾乎可以在任何現代瀏覽器中使用。它通過open()、send()和setRequestHeader()等方法與服務器進行交互，然後將響應返回到頁面中。以下是XMLHTTP對象的流程：

// 創建XMLHTTP對象
var xmlhttp = new XMLHttpRequest();

// 使用open()方法打開一個HTTP連接
xmlhttp.open('GET', 'example.txt', true);

// 使用setRequestHeader()方法設置Header信息
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

// 是否監控XMLHTTP對象的狀態
xmlhttp.onreadystatechange = function() {
  if(xmlhttp.readyState === 4 && xmlhttp.status === 200) {
    document.getElementById('myDiv').innerHTML = xmlhttp.responseText;
  }
};

// 使用send()方法發送請求
xmlhttp.send();

在這個流程中，XMLHTTP對象首先通過new XMLHttpRequest()方法進行實例化。然後使用open()方法打開一個HTTP連接。如果HTTP方法是GET，只需指定URL即可；如果HTTP方法是POST，則需要在open()方法中傳遞URL和true（異步請求）。之後，可以使用setRequestHeader()方法設置Header信息，例如請求頭部應該包括Content-Type是application/x-www-form-urlencoded。最後使用send()方法發送請求。

當響應返回到頁面時，調用onreadystatechange()方法進行通知。在onreadystatechange()事件處理程序中，需要檢查XMLHTTP對象的狀態。如果readyState的值為4，表示響應已經接收完畢，並且status為200，表示請求已經成功。

三、XMLHTTP請求的類型

XMLHTTP請求可以是以下類型。

1. GET請求

使用GET方式向服務器發送數據，URL會附帶在HTTP的頭部中，並且不會被隱藏。可以像下面的代碼一樣使用：

xmlhttp.open('GET', 'example.txt', true);
xmlhttp.send();

2. POST請求

POST請求向服務器發送數據，但是數據不會顯示在URL中，而是包含在HTTP請求的消息體中。可以使用setRequestHeader()方法設置Content-Type頭部，並使用send()方法將數據發送到服務器，如下所示：

xmlhttp.open('POST', 'example.php', true);
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttp.send('name=value');

3. HEAD請求

HEAD請求只返回HTTP頭部信息，而不會返回HTTP主體信息。可以使用open(‘HEAD’, url, async)打開HEAD請求，如下所示：

xmlhttp.open('HEAD', 'example.txt', true);
xmlhttp.send();

四、處理XMLHTTP響應

在XMLHTTP對象發送請求後，需要在JavaScript代碼中處理服務器響應。XMLHTTP對象可以使用以下屬性和方法來處理響應：

1. responseText屬性

responseText屬性返回作為響應主體接收到的文本。注意，如果響應內容是二進制數據，responseText屬性將返回空字符串。例如，可以使用下面的代碼將響應結果渲染到頁面中：

xmlhttp.onreadystatechange = function() {
  if(xmlhttp.readyState === 4 && xmlhttp.status === 200) {
    document.getElementById('myDiv').innerHTML = xmlhttp.responseText;
  }
};

2. responseXML屬性

responseXML屬性將響應作為XML DOM對象返回。例如，可以使用下面的代碼獲取XML DOM對象：

xmlhttp.onreadystatechange = function() {
  if(xmlhttp.readyState === 4 && xmlhttp.status === 200) {
    var xmlDoc = xmlhttp.responseXML;
  }
};

3. status屬性

status屬性返回服務器響應的HTTP狀態代碼（如200表示成功）。狀態碼是一種三位數字，有不同的含義。以下是狀態代碼的一些常見示例，其中200表示成功返回：
1xx：信息性響應
2xx：成功響應
3xx：重定向
4xx：客戶端錯誤
5xx：服務器錯誤

4. statusText屬性

statusText屬性返回服務器響應的HTTP狀態的文本表示形式。例如，200狀態的statusText屬性值是“OK”。

五、XMLHTTP錯誤的處理

在使用XMLHTTP時，可能會發生許多錯誤，如404（未找到）和500（內部服務器錯誤）。可以使用try-catch語句捕獲這些錯誤。以下是捕獲XMLHTTP錯誤的示例代碼：

try {
  xmlhttp = new XMLHttpRequest();
  xmlhttp.open('GET', 'example.txt', true);
  xmlhttp.send();
} catch(error) {
  document.write('An error occurred: ' + error.message);
}

在以上代碼中，首先嘗試生成XMLHTTP對象，然後調用open()和send()方法。如果發生錯誤，將顯示錯誤信息。例如，如果發生網絡錯誤，將在頁面上顯示警告。

XMLHTTP對象還有其他常用的方法和事件，可用於在Web頁面中與服務器交互。了解XMLHTTP對象並熟練使用它將不可避免地成為現代Web開發人員的基本技能之一。