1.什麼是 AJAX ？

AJAX = 非同步 JavaScript 和 XML。

AJAX 是一種用於建立快速動態網頁的技術。

通過在後臺與伺服器進行少量資料交換，AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。

而傳統的網頁（不使用 AJAX）如果需要更新內容，必需過載整個網頁面。

AJAX它使我們可以通過 JavaScript 直接獲取服務端最新的內容而不必重新載入
頁面。讓 Web 更能接近桌面應用的使用者體驗。

說白了，AJAX 就是瀏覽器提供的一套 API，我們可以通過 JavaScript 呼叫，從而實現通過程式碼控制請求與響應。實現網路程式設計。

2.快速上手

使用Ajax是非常容易的，我們可以類比我們平時使用瀏覽器一樣，一般需要 4個步驟就可以獲取到後端響應過來的內容。

//步驟1： 建立一個 XMLHttpRequest 型別的物件 ———— 相當於我們平時開啟一個瀏覽器
var xhr = new XMLHttpRequest();
//步驟2:  open開啟一個與網址之間的聯絡 ———— 相當於在位址列輸入網址訪問
xhr.open('GET','./time.php');
//步驟3:  send通過連線傳送一次請求 ———— 相當於回車或者點選訪問傳送請求
xhr.send(null);
//步驟4:  指定 xhr 狀態發生變化的時候的處理函式 ———— 相當於處理網頁呈現後的操作 
xhr.onreadystatechange = function () {
// 通過 xhr 的 readyState 判斷此次請求的響應是否接收完成
	if (xhr.readyState === 4 && xhr.status=== 200) { //如果是請求已完成，並且響應已就緒
	// 通過 xhr 的 responseText 獲取到響應的響應體
	console.log(this)
    }
}

這樣就完成Ajax的全部操作啦。

2.1 AJAX工作流程圖

2.2 readyState 和status

由於 readystatechange 事件是在 xhr 物件狀態變化時觸發（不單是在得到響應時），也就意味著這個事件會被觸發多次，所以我們有必要了解每一個狀態值代表的含義：

註釋：onreadystatechange 事件被觸發 5 次（0 - 4），對應著 readyState 的每個變化。

通過了解每一個狀態值的含義，我們可以得出，在readyState等於4的時候就已經完成請求了，所以我們一般都會進行判斷是否等於4，這樣才能完整得拿到響應內容。

3. 具體用法

3.1 GET 請求

通常在一次 GET 請求過程中，引數傳遞都是通過 URL 地址中的 ? 引數傳遞。

var xhr = new XMLHttpRequest()
// GET 請求傳遞引數通常使用的是問號傳參
// 這裡可以在請求地址後面加上引數，從而傳遞資料到服務端
xhr.open('GET', './delete.php?id=1')
// 一般在 GET 請求時無需設定響應體，可以傳 null 或者乾脆不傳
xhr.send(null)
xhr.onreadystatechange = function () {
if (this.readyState === 4 && status === 200) {
console.log(this.responseText)
}
}
// 一般情況下 URL 傳遞的都是引數性質的資料，而 POST 一般都是業務資料

3.2. POST 請求

POST 請求過程中，都是採用請求體承載需要提交的資料.

var xhr = new XMLHttpRequest()
// open 方法的第一個引數的作用就是設定請求的 method
xhr.open('POST', './add.php')
// 設定請求頭中的 Content‐Type 為 application/x‐www‐form‐urlencoded
// 標識此次請求的請求體格式為 urlencoded 以便於服務端接收資料
xhr.setRequestHeader('Content‐Type', 'application/x‐www‐form‐urlencoded')
// 需要提交到服務端的資料可以通過 send 方法的引數傳遞
// 格式：key1=value1&key2=value2
xhr.send('key1=value1&key2=value2')
xhr.onreadystatechange = function () {
if (this.readyState === 4) {
console.log(this.responseText)
}
}

3.3選擇GET還是POST？

與 POST 相比，GET 更簡單也更快，並且在大部分情況下都能用。

然而，在以下情況中，請使用 POST 請求：

1. 無法使用快取檔案（更新伺服器上的檔案或資料庫）
2. 向伺服器傳送大量資料（POST 沒有資料量限制）
3. 傳送包含未知字元的使用者輸入時，POST 比 GET 更穩定也更可靠

3.4 同步與非同步

在open方法中有三個引數，其中第3個引數就是設定Ajax是通過非同步進行請求還是同步請求，它是一個bool值，不填寫時，預設為true。採用非同步方式執行。如果需要同步執行可以通過傳遞 false 實現。

那到底什麼是同步還是非同步呢？我們通過生活的小例子進行講解。

同步：當你排隊去買彩票時候，你就只能排隊買彩票，中途不能做其它的事情，只能幹愣著，等待完成才能執行下一步。

非同步：在你買彩票排隊的時候，你可以去做一些其它的事情，比如玩手機，玩遊戲，而不是等待

console.log('before ajax')
var xhr = new XMLHttpRequest()
// 預設第三個引數為 true 意味著採用非同步方式執行
xhr.open('GET', './time.php', true)
xhr.send(null)
xhr.onreadystatechange = function () {
	if (this.readyState === 4) {
	// 這裡的程式碼最後執行
	console.log('request done')
	}
}
console.log('after ajax')

如果採用同步方式執行，則程式碼會卡死在 xhr.send() 這一步：

console.log('before ajax')
var xhr = new XMLHttpRequest()
// 同步方式
xhr.open('GET', './time.php', false)
// 同步方式 執行需要 先註冊事件再呼叫 send，否則 readystatechange 無法觸發
xhr.onreadystatechange = function () {
	if (this.readyState === 4) {
	// 這裡的程式碼最後執行
	console.log('request done')
	}
}
xhr.send(null)
console.log('after ajax')

不推薦使用 async=false，但是對於一些小型的請求，也是可以的。

請記住，JavaScript 會等到伺服器響應就緒才繼續執行。如果伺服器繁忙或緩慢，應用程式會掛起或停止。

當您使用 async=false 時，一定在傳送請求 send() 之前註冊 readystatechange （不管同步或者非同步）——— 為了讓這個事件可以更加可靠（一定觸發），一定是先註冊！

xmlhttp.open("GET","test1.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

下一章我們將繼續講解響應資料格式的處理和封裝，如果該文章對您有所幫助，記得點個贊再走喲~謝謝

---

如果您也正在學習前端的路上，記得關注該博主，學習更多關於前端的知識~

博主主頁 Poetic Code