1. 簡介
web程序最初的目的就是將信息（數據）放到公共的服務器，讓所有網絡用戶都可以通過瀏覽器訪問，在此之前，讓瀏覽器發出對服務端的請求，獲取服務端的數據有以下幾種方式，例如地址欄輸入地址、回車、刷新、特定元素的href或src屬性、表單提交等，這些方案都是我們很難通過代碼的方式進行編程（對服務端發出請求並接收服務端返回的響應）。
Ajax（Asynchronous JavaScript and XML）最早出現在2005年的Google Suggest，是在瀏覽器端進行網絡編程（發送請求、接收響應）的技術方案，它使我們可以通過JavaScript直接獲取服務端最新的內容而不必重新加載頁面，讓web更能接近桌面應用的用戶體驗。簡單來說，Ajax就是瀏覽器提供的一套API，可以通過JavaScript調用，從而實現通過代碼控制請求與響應，實現網絡編程。
2. 概覽
（1）onreadystatechange事件
xhr.onload = function() {}等價於readyState == 4時xhr.onreadystatechange = function() {}的調用，這是HTML5中提供的XMLHTTPRequest version 2.0 定義的，但可能會有兼容問題。
由於onreadystatechange事件是在xhr對象狀態變化時觸發（不單是在得到響應時），也就是意味着這個事件會被觸發多次，所以需要readyState記錄每個狀態。
| readyState | 狀態描述 | 說明 |
|---|---|---|
| 0 | unsent | 代理（xhr）被創建，但尚未調用open（）方法 |
| 1 | opened | open（）方法已經被調用，建立了連接 |
| 2 | headers_received | send（）方法已經被調用，並且已經可以獲取狀態行和響應頭 |
| 3 | loading | 響應頭下載中，responseText屬性可能已經包含部分數據 |
| 4 | done | 響應體下載完成，可以直接使用responseText |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript">
// Ajax是一套API，核心提供的類型：XMLHTTPRequest
// 1. 安裝瀏覽器（用戶代理），xhr類似於瀏覽器的作用（發送請求接收響應）
// 2. 打開瀏覽器，輸入網址
// 3. 敲回車鍵，開始請求
// 4. 等待響應
// 5. 看結果
var xhr = new XMLHttpRequest();
// xhr.readyState == 0; 初始化，請求代理對象
xhr.open('GET', 'http://localhost/time.php'); // 相對定位'./time.php'
// xhr.readyState == 1, open方法已經調用，建立一個與服務器端特定端口的連接
xhr.send();
// 因爲響應需要時間，所以無法通過返回值的方式返回響應
// console.log(xhr.send()); // undefined
// 客戶端不知道服務端何時才能返回響應，所以Ajax API採用事件的機制（類似通知）
// 狀態改變觸發
xhr.onreadystatechange = function() {
console.log(this.readyState);
// this.readyState == 2, 已經接收到了響應報文的響應頭
// 此時this.getAllResponseHeaders()可以獲得數據，但還沒有拿到體，即this.responseText沒有數據
// this.readyState == 3, 正在下載響應報文的響應體，有可能爲空，有可能不完整，在此時處理響應體不可靠
// this.readyState == 4, 下載完成
// this.status響應狀態碼，this.statusText響應狀態描述，this.responseText文本形式，this.responseXML
// this.response獲得大結果會根據this.responseType改變，this.responseText獲取的是字符串形式的響應體
// this.getResponseHeader('Content-Type')指定響應頭，this.getAllResponseHeaders()全部響應頭
if(this.readyState != 4) return;
console.log(this.responseText);
}
</script>
</head>
<body>
</body>
</html>
time.php
<?php
echo time();
（2）遵循http
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script type="text/javascript">
var xhr = new XMLHttpRequest();
xhr.open('POST', './add.php'); // 設置請求行
xhr.setRequestHeader('Foo', 'Bar'); // 設置一個請求頭
// 一旦請求體是urlencoded格式的內容，需在請求頭中設置
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('key1=value1&key2=value2'); // 以urlencoded格式設置請求體
</script>
</head>
<body>
</body>
</html>
add.php
<?php
var_dump($_POST);