首頁 / 前端開發 / Javascript / 詳解如何實作前端jquery中的ajax方法，看這一篇就夠了
詳解如何實作前端jquery中的ajax方法，看這一篇就夠了
2020-4-13
952
前言
這篇文章主要聊一聊如何手寫一個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