◆ 應用場景：
Ajax是瀏覽器提供的一套方法，可以實現頁面無刷新更新數據，提高用戶瀏覽網站應用的體驗。可以運用在如下場景：
- 頁面上拉加載更多數據
- 列表數據無刷新分頁
- 表單項離開焦點數據驗證
- 搜索框提示文字下拉列表
◆ Ajax 運行原理：
Ajax 相當於瀏覽器發送請求與接收響應的代理人，以實現在不影響用戶瀏覽頁面的情況下，局部更新頁面數據，從而提高用戶體驗。
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-GvoXWqc6-1578366228715)(en-resource://database/6292:1)]
◆ Ajax 的實現步驟：
- 創建 Ajax 對象
var xhr = new XMLHttpRequest();
- 提供Ajax 請求地址和請求方式
xhr.open('get', 'http://www.example.com');
- 發送請求
xhr.send();
- 獲取服務器端返回給客戶端的響應數據
xhr.onloan() = function(){
console.log(xhr.responseText);
}
在真實的項目中，服務器端大多數情況下會以 JSON 對象作爲響應數據的格式。當客戶端拿到響應數據時，要將 JSON 數據和 HTML 字符串進行拼接，然後將拼接的結果展示在頁面中。
JSON.parse() // 將 json 字符串轉換爲json對象
注：在 http 請求與響應的過程中，無論是請求參數還是響應內容，如果是對象類型，最終都會被轉換爲對象字符串進行傳輸。
◆ 請求參數傳遞：
- GET請求方式：
xhr.open('get', 'http://www.example.com?name=zhangsan&age=20');
- POST請求方式：
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
xhr.send('name=zhangsan&age=20');
◆ 請求參數的格式：
- application/x-www-form-urlencoded
使用’&'拼接數據
// 創建ajax對象
var xhr = new XMLHttpRequest();
// 告訴Ajax對象要向哪發送請求，以什麼方式發送請求
// 1)請求方式 2)請求地址
xhr.open('post', 'http://localhost:3000/post');
// 通過請求頭告訴服務器端客戶端向服務器端傳遞的請求參數的格式是什麼
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
params='zhangsan&age=20&sex=男'
// 發送請求
xhr.send(params);
// 獲取服務器端響應的數據
xhr.onload = function () {
console.log(xhr.responseText)
}
- application/json
// 創建ajax對象
var xhr = new XMLHttpRequest();
// 告訴Ajax對象要向哪發送請求，以什麼方式發送請求
// 1)請求方式 2)請求地址
xhr.open('post', 'http://localhost:3000/json');
// 通過請求頭告訴服務器端客戶端向服務器端傳遞的請求參數的格式是什麼
xhr.setRequestHeader('Content-Type', 'application/json');
{name: 'zhangsan', age: '20', sex: '男'}
// JSON.stringify() 將json對象轉換爲json字符串
// 發送請求
xhr.send(JSON.stringify({name: 'lisi', age:50}));
// 獲取服務器端響應到客戶端的數據
xhr.onload = function (){
console.log(xhr.responseText)
}
在請求頭中指定 Content-Type 屬性的值是 application/json，告訴服務器端當前請求參數的格式是 json。
JSON.stringify() // 將json對象轉換爲json字符串
注：get 請求是不能提交 json 對象數據格式的，傳統網站的表單提交也是不支持 json 對象數據格式的。
◆ Ajax狀態碼：
在創建ajax對象，配置ajax對象，發送請求，以及接收完服務器端響應數據，這個過程中的每一個步驟都會對應一個數值，這個數值就是ajax狀態碼。
0：請求未初始化(還沒有調用open())
1：請求已經建立，但是還沒有發送(還沒有調用send())
2：請求已經發送
3：請求正在處理中，通常響應中已經有部分數據可以用了
4：響應已經完成，可以獲取並使用服務器的響應了
獲取Ajax狀態碼
xhr.readyState
◆ onreadystatechange 事件：
當 Ajax 狀態碼發生變化時將自動觸發該事件。
xhr.onreadystatechange = function () { }
◆ 獲取服務器端的響應：
在事件處理函數中可以獲取 Ajax 狀態碼並對其進行判斷，當狀態碼爲 4 時就可以通過 xhr.responseText 獲取服務器端的響應數據了。
// 當Ajax狀態碼發生變化時
xhr.onreadystatechange = function () {
// 判斷當Ajax狀態碼爲4時
if (xhr.readyState == 4) {
// 獲取服務器端的響應數據
console.log(xhr.responseText);
}
}
使用onload事件：
// 獲取服務器端響應到客戶端的數據
xhr.onload = function (){
// 將JSON字符串轉換爲JSON對象
var responseText = JSON.parse(xhr.responseText);
// 在控制檯輸出處理結果
console.log(responseText)
}
◆ onload事件和onreadystatechange事件的區別：
| 區別描述 | onload事件 | onreadystatechange事件 |
|---|---|---|
| 是否兼容IE低版本 | 不兼容 | 兼容 |
| 是否需要判斷Ajax狀態碼 | 不需要 | 需要 |
| 被調用次數 | 一次 | 多次 |
◆ Ajax錯誤處理：
-
網絡暢通，服務器端能接收到請求，服務器端返回的結果不是預期結果。
可以判斷服務器端返回的狀態碼，分別進行處理。xhr.status 獲取http狀態碼 -
網絡暢通，服務器端沒有接收到請求，返回404狀態碼。
檢查請求地址是否錯誤。 -
網絡暢通，服務器端能接收到請求，服務器端返回500狀態碼。
服務器端錯誤，找後端程序員進行溝通。 -
網絡中斷，請求無法發送到服務器端。
會觸發xhr對象下面的onerror事件，在onerror事件處理函數中對錯誤進行處理。
示例：
var btn = document.getElementById('btn');
btn.onclick = function () {
// 1.創建ajax對象
var xhr = new XMLHttpRequest();
// 2.告訴Ajax對象要向哪發送請求，以什麼方式發送請求
// 1)請求方式 2)請求地址
xhr.open('get', 'http://localhost:3000/error');
// 3.發送請求
xhr.send();
// 4.獲取服務器端響應到客戶端的數據
xhr.onload = function (){
// xhr.status 獲取http狀態碼
console.log(xhr.responseText);
if (xhr.status == 400) {
alert('請求出錯')
}
}
// 當網絡中斷時會觸發onerrr事件
xhr.onerror = function () {
alert('網絡中斷, 無法發送Ajax請求')
}
}
// Ajax狀態碼: 表示Ajax請求的過程狀態 ajax對象返回的
// Http狀態碼: 表示請求的處理結果 是服務器端返回的