如何實現一個前端Jquery的Ajax

這期內容當中小編將會給大家帶來有關如何實現一個前端Jquery的Ajax，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

一步步手寫ajax

在web頁面中與后端通信的順序一般都是客戶端向服務器發起請求，然后服務器再回復客戶端，用于通信的工具就是ajax。如果你喜歡足球，你肯定知道荷甲聯賽中也有一支豪門足球俱樂部叫阿賈克斯，名字一毛一樣。ajax就像電話一樣，將頁面和服務器聯系在一起，基本用法如下：

圖1

從圖1中我們可以看出$.ajax是一個函數，它的參數是一個對象，那么我們可以像如下這樣定義：

var $ = {}; // 模擬jquery對象 $.ajax = function(options){     // 實現邏輯 }

接下來我們就開始寫函數里面的邏輯。

圖2

如圖2，ajax的關鍵在于XMLHttpRequest對象，它提供了對http協議的安全訪問接口，這里使用了它的兩個方法和一個事件：

1）open方法的第一個參數是請求類型：get、post、head等，第二個參數是請求的接口地址，第三個參數表示ajax請求是異步（true）還是同步（false），如果是異步，在ajax發送完請求后js會繼續執行，不會等待服務器響應，我們一般選擇異步，提高頁面的渲染效率；

2）send方法只有一個參數，表示向服務器發送的參數，一般是對象；

3）onreadystatechange是一個事件，它可以監聽從請求開始到結束整個過程的狀態，狀態保存在xhr的readyState屬性中。

readyState狀態：

• 0代表未初始化，open方法還未執行；

• 1代表正在加載，open已被執行但send還未被執行；

• 2代表已經加載完畢，send已被執行，請求已被發送；

• 3代表正在等待服務器響應；

• 4代表響應已經完成。

從上面readyState狀態我們可以看出，ajax只需要4的情況，其他狀態其實都是失??！

另外，xhr的status屬性代表服務器返回的狀態碼，根據我們的經驗，狀態碼在400以上都是有問題的，要么是服務端問題，要么就是客戶端問題！300到400之間好像都和重定向有關系，但是有一個除外——304，如果你了解瀏覽器緩存，你肯定知道它和協商緩存有關系，其實它代表請求成功！另外200以下的狀態都需要請求者繼續操作，也不符合要求！總結一下，可用的狀態碼就是200到300之間，加一個304！

好了，經過上面的分析，我們繼續完善onreadystatechange事件的處理函數：

圖3

如圖3，在事件處理函數中我們寫了兩個方法ajaxSuccess和ajaxError，它們分別執行ajax參數對象傳入的success和error這兩個函數屬性。我們知道ajax對象參數中還一個屬性叫complete，這是一個方法，無論請求成功與否，它都會被執行，所以它在ajaxSuccess和ajaxError中都需要被調用執行一次。xhr.responseText代表服務器返回的數據，xhr.statusText代表狀態碼對應的狀態信息。

接下來我們還需要設置請求頭，可以用xhr.setRequestHeader來完成，如下：

圖4

圖4中，我們對兩個比較特殊的請求頭做了默認設置（Accept和Content-type），其中當我們用post類型向服務器發送請求并且帶有參數，此時content-type需要設置為application/x-www-form-urlencoded，其他的請求頭可以通過ajax的對象參數headers屬性傳入。注意setRequestHeader方法需要在open方法之后調用！

在有些場景下，我們需要在發送請求前做一些邏輯判斷，如果不滿足條件我們需要阻止請求的發送，為了滿足需求，我們需要在ajax調用open方法之前添加一個鉤子！

圖5

圖5中我們通過beforeSend函數的執行結果判斷是否需要取消請求！

寫到這里其實還有一步沒做，那就超時邏輯，比如在網絡不好的情況下，我們不能讓頁面一直處于loading狀態，需要設置一個超時時間，超過這個時間就代表ajax請求失??！開發超時的需求，我們最容易想到的是利用定時器setTimeout，現在我們補上！

圖6

如圖6，在超時的情況下，我們將onreadystatechange事件處理函數置為一個空函數并且放棄這次請求，然后執行error函數，另外在正常的onreadystatechange事件處理邏輯中我們需要及時清除這個定時器！

寫到這里，一個簡單的ajax就已經開發完了，現在直接把demo拿去使用也是沒有問題的！

上述就是小編為大家分享的如何實現一個前端Jquery的Ajax了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。