Ryan Shang

生死看淡，不服就干

0%

Ajax

发表于 分类于

记录下自己封装的Ajax。

Ajax四步骤：

  1. 创建一个XHR对象
  2. 打开一个链接地址
  3. 监听请求状态
  4. 发送数据
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
let ajax = (options) => {
  // 将传入的参数和默认值合并
  let extend = (_old, _new) => {
    let obj = {};
    for (let key in _old) {
      if (!_old.hasOwnProperty(key)) continue;
      if (!/^(cache|async)$/.test(key)) {
        obj[key] = _new[key] || _old[key];
      } else {
        obj[key] = key in _new ? _new[key] : _old[key];
      }
    }
    return obj;
  };

  // 判断请求的url里是否有?，若有说明已有传输的数据，再添加时以&隔开，若没有?则添加?
  let hasSearch = (url) => url = url.indexOf('?') > -1 ? '&' : '?';

  // 把对象{name:'Ryan',age:20}转个成一个uri格式字符串'name="Ryan"&age=20
  let encodeObjURI = (data) => {
    let str = '';
    for (let key in data) {
      str += `${key}=${encodeURIComponent(data[key])}&`;
    }
    str = str.slice(0, str.length - 1);
    return str;
  };
  let _default = {
    type: 'get',
    url: null,
    async: true,
    cache: true,
    data: null,
    dataType: 'text',
    success: null,
    error: null
  };

  _default = extend(_default, options);
  let { type, url, async, cache, data, dataType, success, error } = _default;

  // 1.创建ajax对象
  let xhr = new XMLHttpRequest();
  // 对get系列方式判断 get|delete|head
  let regGet = /^(get|delete|head)$/i;
  // 对post系列方式进行判断
  let regPost = /^(post|put)$/i;

  if (!regGet.test(type) && !regPost.test(type)) return;
  // 数据存在，则把数据放在url后
  if (data) {
    if (Object.prototype.toString.call(data) === '[object Object]') {
      data = encodeObjURI((data)); // 对象转换成uri格式字符串
    }
    if (regGet.test(type)) {
      url += `${hasSearch(url)}${data}`;
      data = null;
    }
  }
  // 处理缓存，若是get方式并且不需要缓存 cache = false
  if (regGet.test(type) && cache === false) {
    url += `${hasSearch(url)}_=${Math.random()}`;
  }
  // 2.打开一个链接地址
  xhr.open(type, url, async);

  // 3.监听请求
  xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && /^2\d{2}$/.test(xhr.status)) {
      let result = xhr.responseText;
      switch (dataType) {
        case 'json':
          result = 'JSON' in window ? JSON.parse(result) : eval('(' + result + ')');
          break;
        case 'xml':
          result = xhr.responseXML;
          break;
      }
      success && success(result);
    }
    if (xhr.readyState === 4 && /^(4|5)\d{2}$/.test(xhr.status)) {
      error && error(xhr);
    }
  };

  // 4.发送数据
  xhr.send(data); // 只能是字符串，get方式为null，post方式才把数据放在请求体里
};