在实战中可能碰到的几种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