导语：网站Ajax技术的出现，使得web开发由1.0走向了2.0时代。并且被谷歌地图和谷歌邮箱应用。后来原生的Ajax请求使用繁琐，便出现了jQuery框架，其中的封装的ajax方法非常方便快捷。之后由于回调地狱的问题出现了promise，一个承诺，一旦状态改变就固定了。之后又出现了generator方法，最后就是同步写法的async await。

目录

• 原生的Ajax技术
• jQuery的ajax方法
• promise
• generator yield
• async await

原生的Ajax技术

原生的Ajax技术，就是new一个实例，然后打开、发送、获取响应内容，详细内容请参考 这篇文章 (opens new window)，这里只是简单总结一下。

例如：以下内容。

// 封装的一个原生ajax请求
function httpReq ({type, url, data, success, failed}) {
  //new一个ajax实例
  var xhr = new XMLHttpRequest() || new ActiveXObject('Microsoft.XMLHTTP');
  //打开一个请求，请求方式，请求地址，是否异步。
  xhr.open(type,url,true);
  //设置请求头
  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  // 接收响应内容
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) { //发送成功
      if (xhr.status === 200) { // 状态200
        //请求成功
        let result = {
          code: this.status,
          msg: 'get_succ',
          data: {
            info: '获取成功!',
            data: JSON.parse(this.response),
          }
        }
        success(result);
      } else {
        // 请求失败
        let result = {
          code: this.status,
          msg: 'get_fail',
          data: {
            info: '获取失败!',
          }
        }
        failed(this.response);
      }
    }
  }
  // post请求时发送的数据
  xhr.send(data);
}

比如说，我们写一个api请求一个url，返回内容，调用上面简单请求封装好的方法，其实类似于jquery的ajax请求.

httpReq({
  type: 'get',
  url: 'https://api.github.com',
  data: null,
  success: function (res) {  
    console.log(res);
  },
  failed: function (err) {  
    console.log(err);
  }
})

返回的内容如下:

jQuery的ajax方法

jQuery的ajax封装方法当时风靡全球，不少开发者为之一振，接下来就回顾一下jQuery的ajax请求方法使用。

jQuery的版本有1.x,2.x,3.x几种，1.x对处理网页兼容性特别友好，可以适用于对网站兼容性要求比较高的网站，2.x特别适合政府、高校使用，一般这类网站都是指定ie版本使用，3.x就比较新了，随便用。

• 引入jQuery文件

可以下载下来放到你的js文件夹下面，也可以使用cdn。

// 本地js文件
<script src="js/jquery.js"></script>
// 使用cdn
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>

• 调用ajax方法

// ajax
$(function () {  
  $.ajax({
    method: 'get',
    url: 'https://api.github.com',
    data: null,
    success: function (res) {  
      console.log(res);
    },
    failed: function (err) {  
      console.log(err);
    }
  });
})

返回的内容如下:

可以看到jQuery直接成功的返回了所请求的内容。

promise

es6发布之后，promise的异步编程方法大行其道，下面就简单说一下promise的请求方法。

let p = new Promise(function(resolve, reject){
  resolve('ok');
  reject('error');
});
p.then((res) => {
  console.log(res);
},(err) => {
  console.log(err);
})
p.catch((err) => {
  console.log(err);
})

generator yield

这个就是一个生成器对象，最后通过next()方法获取状态结果。

例如：

function* print () {
  yield 1;
  yield 2;
  yield 3;
}
let g = print();
console.log(g.next()); // {value: 1, done: false}
console.log(g.next()); // {value: 2, done: false}
console.log(g.next()); // {value: 3, done: false}
console.log(g.next()); // {value: undefined, done: true}

async await

await操作符要等待一个Promise对象，它只能在async函数中使用。

let p = new Promise(function(resolve, reject){
  resolve('ok');
});
async function getData () {
  let data = await p;
  console.log(data); // ok
}
getData();

封装一个ajax

这次可以使用之前的原生ajax方法，加上promise，然后封装成一个新的方法。

function httpReq ({type, url, data}) {
  //new一个ajax实例
  let ajax = new Promise(function(resolve, reject){
    var xhr = new XMLHttpRequest() || new ActiveXObject('Microsoft.XMLHTTP');
    //打开一个请求，请求方式，请求地址，是否异步。
    xhr.open(type,url,true);
    //设置请求头
    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    // 接收响应内容
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4) { //发送成功
        if (xhr.status === 200) { // 状态200
          //请求成功
          let result = {
            code: this.status,
            msg: 'get_succ',
            data: {
              info: '获取成功!',
              data: this.response,
            }
          }
          resolve(result);
        } else {
          // 请求失败
          let result = {
            code: this.status,
            msg: 'get_fail',
            data: {
              info: '获取失败!',
            }
          }
          reject(this.response);
        }
      }
    }
    // post请求时发送的数据
    xhr.send(data);
  })
  return ajax;
}

之前案例的请求。

async function getReqData() {  
  let data = await httpReq({
    type: 'get',
    url: 'https://api.github.com',
    data: null,
  })
  console.log(data);
}
getReqData();

返回的内容如下:

今天的分享总结就到这里。