建站
咨詢
售后
建站咨詢
新聞中心
這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)如何實(shí)現(xiàn)一個(gè)前端Jquery的Ajax，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
創(chuàng)新互聯(lián)是專業(yè)的合水網(wǎng)站建設(shè)公司，合水接單;提供成都網(wǎng)站制作、成都做網(wǎng)站、外貿(mào)營(yíng)銷網(wǎng)站建設(shè),網(wǎng)頁(yè)設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行合水網(wǎng)站開發(fā)網(wǎng)頁(yè)制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛(ài)的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來(lái)合作!
一步步手寫ajax
在web頁(yè)面中與后端通信的順序一般都是客戶端向服務(wù)器發(fā)起請(qǐng)求，然后服務(wù)器再回復(fù)客戶端，用于通信的工具就是ajax。如果你喜歡足球，你肯定知道荷甲聯(lián)賽中也有一支豪門足球俱樂(lè)部叫阿賈克斯，名字一毛一樣。ajax就像電話一樣，將頁(yè)面和服務(wù)器聯(lián)系在一起，基本用法如下：
圖1
從圖1中我們可以看出$.ajax是一個(gè)函數(shù)，它的參數(shù)是一個(gè)對(duì)象，那么我們可以像如下這樣定義：
var $ = {}; // 模擬jquery對(duì)象 $.ajax = function(options){ // 實(shí)現(xiàn)邏輯 }接下來(lái)我們就開始寫函數(shù)里面的邏輯。
圖2
如圖2，ajax的關(guān)鍵在于XMLHttpRequest對(duì)象，它提供了對(duì)http協(xié)議的安全訪問(wèn)接口，這里使用了它的兩個(gè)方法和一個(gè)事件：
1）open方法的第一個(gè)參數(shù)是請(qǐng)求類型：get、post、head等，第二個(gè)參數(shù)是請(qǐng)求的接口地址，第三個(gè)參數(shù)表示ajax請(qǐng)求是異步（true）還是同步（false），如果是異步，在ajax發(fā)送完請(qǐng)求后js會(huì)繼續(xù)執(zhí)行，不會(huì)等待服務(wù)器響應(yīng)，我們一般選擇異步，提高頁(yè)面的渲染效率；
2）send方法只有一個(gè)參數(shù)，表示向服務(wù)器發(fā)送的參數(shù)，一般是對(duì)象；
3）onreadystatechange是一個(gè)事件，它可以監(jiān)聽從請(qǐng)求開始到結(jié)束整個(gè)過(guò)程的狀態(tài)，狀態(tài)保存在xhr的readyState屬性中。
readyState狀態(tài)：
0代表未初始化，open方法還未執(zhí)行；
1代表正在加載，open已被執(zhí)行但send還未被執(zhí)行；
2代表已經(jīng)加載完畢，send已被執(zhí)行，請(qǐng)求已被發(fā)送；
3代表正在等待服務(wù)器響應(yīng)；
4代表響應(yīng)已經(jīng)完成。
從上面readyState狀態(tài)我們可以看出，ajax只需要4的情況，其他狀態(tài)其實(shí)都是失敗！
另外，xhr的status屬性代表服務(wù)器返回的狀態(tài)碼，根據(jù)我們的經(jīng)驗(yàn)，狀態(tài)碼在400以上都是有問(wèn)題的，要么是服務(wù)端問(wèn)題，要么就是客戶端問(wèn)題！300到400之間好像都和重定向有關(guān)系，但是有一個(gè)除外——304，如果你了解瀏覽器緩存，你肯定知道它和協(xié)商緩存有關(guān)系，其實(shí)它代表請(qǐng)求成功！另外200以下的狀態(tài)都需要請(qǐng)求者繼續(xù)操作，也不符合要求！總結(jié)一下，可用的狀態(tài)碼就是200到300之間，加一個(gè)304！
好了，經(jīng)過(guò)上面的分析，我們繼續(xù)完善onreadystatechange事件的處理函數(shù)：
圖3
如圖3，在事件處理函數(shù)中我們寫了兩個(gè)方法ajaxSuccess和ajaxError，它們分別執(zhí)行ajax參數(shù)對(duì)象傳入的success和error這兩個(gè)函數(shù)屬性。我們知道ajax對(duì)象參數(shù)中還一個(gè)屬性叫complete，這是一個(gè)方法，無(wú)論請(qǐng)求成功與否，它都會(huì)被執(zhí)行，所以它在ajaxSuccess和ajaxError中都需要被調(diào)用執(zhí)行一次。xhr.responseText代表服務(wù)器返回的數(shù)據(jù)，xhr.statusText代表狀態(tài)碼對(duì)應(yīng)的狀態(tài)信息。
接下來(lái)我們還需要設(shè)置請(qǐng)求頭，可以用xhr.setRequestHeader來(lái)完成，如下：
圖4
圖4中，我們對(duì)兩個(gè)比較特殊的請(qǐng)求頭做了默認(rèn)設(shè)置（Accept和Content-type），其中當(dāng)我們用post類型向服務(wù)器發(fā)送請(qǐng)求并且?guī)в袇?shù)，此時(shí)content-type需要設(shè)置為application/x-www-form-urlencoded，其他的請(qǐng)求頭可以通過(guò)ajax的對(duì)象參數(shù)headers屬性傳入。注意setRequestHeader方法需要在open方法之后調(diào)用！
在有些場(chǎng)景下，我們需要在發(fā)送請(qǐng)求前做一些邏輯判斷，如果不滿足條件我們需要阻止請(qǐng)求的發(fā)送，為了滿足需求，我們需要在ajax調(diào)用open方法之前添加一個(gè)鉤子！
圖5
圖5中我們通過(guò)beforeSend函數(shù)的執(zhí)行結(jié)果判斷是否需要取消請(qǐng)求！
寫到這里其實(shí)還有一步?jīng)]做，那就超時(shí)邏輯，比如在網(wǎng)絡(luò)不好的情況下，我們不能讓頁(yè)面一直處于loading狀態(tài)，需要設(shè)置一個(gè)超時(shí)時(shí)間，超過(guò)這個(gè)時(shí)間就代表ajax請(qǐng)求失?。￠_發(fā)超時(shí)的需求，我們最容易想到的是利用定時(shí)器setTimeout，現(xiàn)在我們補(bǔ)上！
圖6
如圖6，在超時(shí)的情況下，我們將onreadystatechange事件處理函數(shù)置為一個(gè)空函數(shù)并且放棄這次請(qǐng)求，然后執(zhí)行error函數(shù)，另外在正常的onreadystatechange事件處理邏輯中我們需要及時(shí)清除這個(gè)定時(shí)器！
寫到這里，一個(gè)簡(jiǎn)單的ajax就已經(jīng)開發(fā)完了，現(xiàn)在直接把demo拿去使用也是沒(méi)有問(wèn)題的！
上述就是小編為大家分享的如何實(shí)現(xiàn)一個(gè)前端Jquery的Ajax了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
網(wǎng)站題目：如何實(shí)現(xiàn)一個(gè)前端Jquery的Ajax
網(wǎng)頁(yè)網(wǎng)址：http://www.dlmjj.cn/article/ihcodh.html
