在實戰中可能碰到的幾種ajax請求方法詳解

前言

最近在做一個針對單個節點測速的功能頁面，測速的邏輯是，測上傳速度時，前端傳5m數據給server，記錄上傳和返回數據的時間，測下載速度時，從server下載1m的數據，記錄下載和下載成功的時間，上傳和下載用的是ajax同步以避免客戶端帶寬阻塞的問題，并進行3次取平均值。在開發過程過，因為ajax同步異步的問題，走了不少彎路，特地也把之前遇到的業務邏輯整理匯總一下。

ajax請求方法如下

一、普通的ajax，async即同步異步處理，success之后，會有data返回值，status請求狀態，xhr封裝的是請求頭，但要注意是的是，并不是所有的請求頭信息都能獲取到的，比如center-length就獲取不到

二、有時候碰到的業務邏輯是這樣的，請求2依賴請求1的返回結果，請求3依賴請求2的返回結果，如果用回調的方式寫，會很冗長，解決的方法有兩個，首先來看ES5的解決辦法

(1)ES5的解決辦法，用ajax同步，默認的ajax是異步的，即多個請求同時執行，改成同步后，ajax一個一個的執行，這樣ajax2就能取到ajax1的返回結果了

(2)ES6的解決辦法，用promise的then方法，效果和上面的一樣，ajax會按順序執行，并且后面的ajax會拿到前一個ajax的返回值，這樣寫起來，代碼看起來會很流暢

三、jsonp跨域，動態添加script標簽實現跨域，注意這里有一個callback需要跟server協商好

function switchEngineRoomAjax(api,statusChanged){ 
 var api = api; 
 var statusChanged = statusChanged; 
 var url = api + "?method=setStatus" + "&status=" + statusChanged; 
 
 $.ajax({ 
 type: "GET", 
 url: url, 
 dataType: "jsonp", 
 jsonp: "callback",// 這里的callback是給后端接收用的，前端通過動態添加script標簽，完成回調 
 success: function(res){ 
 if (res.code == 0) { 
 console.log('更改狀態 jsonp獲取數據成功！'); 
 } 
 else{ 
 } 
 } 
 }); 
};

四、還會碰上這種業務邏輯，ajax1 ajax2 ajax3三個異步請求，不一定哪個先返回數據，都請求成功后，執行一個回調 function，需要注意的是，單獨的ajax也需要是new的promise

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com