AJAX基礎
- 1. 概述
- 2. 快速上手
-
- 2.1. readyState
-
- 2.1.1. 時間軸
- 2.2. 遵循 HTTP
-
- 小案例：設定http請求頭
- 參考連結：
Web 程式最初的目的就是将資訊（資料）放到公共的伺服器，讓所有網絡使用者都可以通過浏覽器通路。
在此之前，我們可以通過以下幾種方式讓浏覽器發出對服務端的請求，獲得服務端的資料：
- 位址欄輸入位址，回車，重新整理
- 特定元素的 href 或 src 屬性
- 表單送出
這些方案都是我們無法通過或者很難通過代碼的方式進行程式設計（對服務端送出請求并且接受服務端傳回的響應），如果我們可以通過 JavaScript 直接發送網絡請求，那麼 Web 的可能就會更多，随之能夠實作的功能也會更多，至少不再是“單機遊戲”。
AJAX（Asynchronous JavaScript and XML），最早出現在 2005 年的 Google Suggest，是在浏覽器端進行網絡程式設計（發送請求、接收響應）的技術方案，它使我們可以通過 JavaScript 直接擷取服務端最新的内容而不必重新加載頁面。讓 Web 更能接近桌面應用的使用者體驗。
說白了，AJAX 就是浏覽器提供的一套 API，可以通過 JavaScript 調用，進而實作通過代碼控制請求與響應。實作網絡程式設計。
能力不夠 API 湊。
2. 快速上手
使用 AJAX 的過程可以類比平常我們通路網頁過程
// 1. 建立一個 XMLHttpRequest 類型的對象 —— 相當于打開了一個浏覽器
var xhr = new XMLHttpRequest()
// 2. 打開與一個網址之間的連接配接 —— 相當于在位址欄輸入通路位址
xhr.open('GET', './time.php')
// 3. 通過連接配接發送一次請求 —— 相當于回車或者點選通路發送請求
xhr.send(null)
// 4. 指定 xhr 狀态變化事件處理函數 —— 相當于處理網頁呈現後的操作
xhr.onreadystatechange = function () {
// 通過 xhr 的 readyState 判斷此次請求的響應是否接收完成
if (this.readyState === 4) {
// 通過 xhr 的 responseText 擷取到響應的響應體
console.log(this)
}
}
由于 readystatechange 事件是在 xhr 對象狀态變化時觸發（不單是在得到響應時），也就意味着這個事件會被觸發多次，是以我們有必要了解每一個狀态值代表的含義：
| readyState | 狀态描述 | 說明 |
|---|---|---|
| UNSENT | 代理（XHR）被建立，但尚未調用 open() 方法。 | |
| 1 | OPENED | open() 方法已經被調用，建立了連接配接。 |
| 2 | HEADERS_RECEIVED | send() 方法已經被調用，并且已經可以擷取狀态行和響應頭。 |
| 3 | LOADING | 響應體下載下傳中， responseText 屬性可能已經包含部分資料。 |
| 4 | DONE | 響應體下載下傳完成，可以直接使用 responseText 。 |
var xhr = new XMLHttpRequest()
console.log(xhr.readyState)
// => 0
// 初始化 請求代理對象
xhr.open('GET', 'time.php') console.log(xhr.readyState)
// => 1
// open 方法已經調用，建立一個與服務端特定端口的連接配接
xhr.send()
xhr.addEventListener('readystatechange', function () {
switch (this.readyState) {
case 2:
// => 2
// 已經接受到了響應封包的響應頭
// 可以拿到頭
// console.log(this.getAllResponseHeaders()) console.log(this.getResponseHeader('server')) // 但是還沒有拿到體console.log(this.responseText)
break
case 3:
// => 3
// 正在下載下傳響應封包的響應體，有可能響應體為空，也有可能不完整
// 在這裡處理響應體不保險（不可靠）console.log(this.responseText) break
case 4:
// => 4
// 一切 OK （整個響應封包已經完整下載下傳下來了）
// 這裡處理響應體console.log(this.responseText) break
}
})
通過了解每一個狀态值的含義得出一個結論：一般我們都是在 readyState 值為 4 時，執行響應的後續邏輯。
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
// 後續邏輯......
}
}
本質上 XMLHttpRequest 就是 JavaScript 在 Web 平台中發送 HTTP 請求的手段，是以我們發送出去的請求任然是HTTP 請求，同樣符合 HTTP 約定的格式：
<?php
var_dump($_POST);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>遵循HTTP協定</title>
</head>
<body>
<script>
var xhr = new XMLHttpRequest()
xhr.open('POST', '/add.php') // 設定請求行
xhr.setRequestHeader('Foo', 'Bar') // 設定一個請求頭
// 一旦你的請求體是 urlencoded 格式的内容，一定要設定請求頭中 Content-Type 'application/x-www-form-urlencoded'
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.send('key1=value1&key2=value2') // 以 urlencoded 格式設定請求體
</script>
</body>
</html>