## AJAX - 創建XMLHttpRequest對象
XMLHttpRequest 是 AJAX 的基礎。
XMLHttpRequest 術語縮寫為XHR，中文可以解釋為可擴展超文本傳輸請求。
XMLHttpRequest 對象可以在不向服務器提交整個頁面的情況下，實現局部更新網頁。
XMLHttpRequest的對象用于客戶端和服務器之間的異步通信。
它執行以下操作：
1. 在后臺從客戶端發送數據
2. 從服務器接收數據
3. 更新網頁而不重新加載。
## XMLHttpRequest 對象
所有現代瀏覽器均支持 XMLHttpRequest 對象（IE5 和 IE6 使用 ActiveXObject）。
XMLHttpRequest 用于在后臺與服務器交換數據。這意味著可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。
## 創建 XMLHttpRequest 對象
* * *
所有現代瀏覽器（IE7+、Firefox、Chrome、Safari 以及 Opera）均內建 XMLHttpRequest 對象。
創建 XMLHttpRequest 對象的語法：
~~~
variable=new XMLHttpRequest();
~~~
老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 對象：
~~~
variable=new ActiveXObject("Microsoft.XMLHTTP");
~~~
為了應對所有的現代瀏覽器，包括 IE5 和 IE6，請檢查瀏覽器是否支持 XMLHttpRequest 對象。如果支持，則創建 XMLHttpRequest 對象。如果不支持，則創建 ActiveXObject ：:
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tryrun 1</title>
</head>
<body>
<div id="view">
<p>點擊下面的按鈕，將 Ajax 請求回來的數據更新在該文本內</p>
</div>
<button type="button" id="btn">發起 Ajax 請求</button>
<script>
document.getElementById("btn").onclick = ajaxRequest;
function ajaxRequest () {
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://www.w3cschool.cn/statics/demosource/ajax_info.txt", true);
xhr.send();
xhr.onreadystatechange = function(){
if (xhr.readyState === 4 && xhr.status === 200) {
document.getElementById("view").innerHTML = xhr.responseText;
}
}
}
</script>
</body>
```
## XMLHttpRequest對象的屬性
XMLHttpRequest對象的常見屬性如下：
| 屬性| 描述 |
| --- | --- |
| onreadystatechange| 存儲函數（或函數名），每當readyState的屬性改變時，就會調用該函數。|
| readyState | 存有的XMLHttpRequest的狀態從0到4發生變化。 0：請求未初始化 ；1：服務器連接已建立 ； 2：請求已接收 ； 3：請求處理中； 4：請求已完成，且響應已就緒 |
| reponseText | 以文本形式返回響應。 |
| responseXML| 以XML格式返回響應 |
| status | 將狀態返回為數字（例如，“Not Found”為404，“OK”為200） |
| statusText | 以字符串形式返回狀態（例如，“Not Found”或“OK”） |
### XMLHttpRequest對象的方法
XMLHttpRequest對象的重要方法如下：
| 方法 | 描述 |
| --- | --- |
| abort() | 取消當前請求 |
| getAllResponseHeaders() | 以字符串形式返回完整的HTTP標頭集。 |
| getResponseHeader( headerName ) | 返回指定HTTP標頭的值。 |
| void open（method，URL） | 打開指定獲取或交的方法和URL的請求。 |
| void open（method，URL，async） |與上面相同，但指定異步或不。 |
| void open（method，URL，async，userName，password） | 與上面相同，但指定用戶名和密碼。 |
| void send（content） | 發送獲取請求。 |
| setRequestHeader（?label，value） | 將標簽/值對添加到要發送的HTTP標頭。 |
