Ajax執行原理及實現
阿新 • • 發佈：2020-12-08
Ajax執行原理及實現
Ajax應用場景
- 頁面上拉載入更多資料
- 列表資料無重新整理分頁
- 表單項離開焦點資料驗證
- 搜尋框提示文字下拉列表
Ajax實現步驟
//建立ajax物件
var xhr = new XMLHttpRequest();
//告訴ajax要向哪傳送請求，以什麼方式傳送
//1)請求方式 2)請求地址
xhr.open('get','http://localhost:3000/first');
//傳送請求
xhr.send();
//獲取伺服器端響應到客戶端的資料
xhr.onload = function(){
console.log(xhr.responseText);
}
伺服器端響應的資料格式
在真實的專案中，伺服器大多數情況下會以JSON物件作為響應資料的格式。當客戶端拿到響應資料時，要將JSON資料和HTML字串進行拼接，然後將拼接的結果展示在頁面上。
在http請求與相應的過程中，無論是請求引數還是響應內容，如果是物件型別，最終都會被轉換為物件字串進行傳輸。
JSON.parse() //將json字串轉換為json物件
請求引數傳遞
- GET請求方式
xhr.open('get', 'http://www.example.com?name=zs&password=123');
- POST請求方式
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') xhr.send('name=zs&password=123')
請求引數的格式
- application/x-www-form-urlencoded
name=zs&age=18&sex=男
2.application/json
{name:'zs', age:'18', sex:'男'}
在請求頭中指定Content-Type屬性的值是application/json，告訴伺服器當前請求引數的格式是json。
JSON.stringify()//將json物件轉換為json字串
獲取伺服器端的響應
Ajax狀態碼
在建立ajax物件，配置ajax物件，傳送請求，以及接受完伺服器端響應資料，這個過程中的每一個步驟都會對應一個數值，這個數值就是ajax狀態碼
0：請求未初始化（還沒有呼叫open()）
1：請求已經建立，但是還沒有傳送（還沒有呼叫send()）
2：請求已經發送
3：請求正在處理中，通常響應中已經有部分資料可以用了
4：響應已經完成，可以獲取並使用伺服器的響應了
xhr.readyState //獲取Ajax狀態碼
onreadystatechange事件
兩種獲取伺服器端響應方式的區別
| 區別描述 | onload事件 | onreadystatechange事件 |
|---|---|---|
| 是否相容IE低版本 | 不相容 | 相容 |
| 是否需要判斷Ajax狀態碼 | 不需要 | 需要 |
| 被呼叫次數 | 一次 | 多次 |
Ajax錯誤處理
- 網路暢通，伺服器能接收到請求，伺服器返回的結果不是預期結果
可以判斷伺服器端返回的狀態碼，分別進行處理。xhr.status獲取http狀態碼
- 網路暢通，伺服器端沒有接收到請求，返回404狀態碼
檢查請求地址是否錯誤
- 網路暢通，伺服器端能接收到請求，伺服器端返回500狀態碼
伺服器端錯誤，找後端程式設計師進行溝通
- 網路中斷，請求無法傳送到伺服器端
會觸發xhr物件下面的onerror事件，在onerror事件處理函式中對錯誤進行處理
Ajax狀態碼與http狀態碼的區別
Ajax狀態碼：表示Ajax請求的過程狀態，ajax物件返回的
http狀態碼：表示請求的處理結果，是伺服器端返回的
低版本IE瀏覽器的快取問題
問題：在低版本的IE瀏覽器中，Ajax請求有嚴重的快取問題，即在請求地址不發生變化的情況下，只有第一次請求會真正傳送到伺服器端，後續的請求都會從瀏覽器的快取中獲取結果。及時伺服器端的資料更新了，客戶端依然拿到的是快取中的舊資料。
解決方案：在請求地址的後面加請求引數，保證每一次請求中的請求引數的值不相同。
xhr.open('get', 'http://www.example.com?t='+Math.random());