Ajax请求方法总结

导语:网站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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

比如说,我们写一个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);
  }
})
1
2
3
4
5
6
7
8
9
10
11

返回的内容如下:

get请求

# 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>
1
2
3
4
  • 调用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);
    }
  });
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14

返回的内容如下:

get请求

可以看到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);
})
1
2
3
4
5
6
7
8
9
10
11
12

# 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}
1
2
3
4
5
6
7
8
9
10

# 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();
1
2
3
4
5
6
7
8

# 封装一个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;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

之前案例的请求。

async function getReqData() {  
  let data = await httpReq({
    type: 'get',
    url: 'https://api.github.com',
    data: null,
  })
  console.log(data);
}
getReqData();
1
2
3
4
5
6
7
8
9

返回的内容如下:

get请求

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

分享至:

  • qq
  • qq空间
  • 微博
  • 豆瓣
  • 贴吧