gtgt
0%

手写原生ajax

发表于
手写原生ajax

手写原生 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
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
/**
 *
 * @param {*} option
 * option.type : 请求方式
 * option.url : 请求地址
 * option.timeout : 请求超时时间
 * option.success : 请求成功回调函数
 * option.error : 请求失败回调函数
 *
 */
function Ajax(option) {
  const params = objToString(option.data);

  let xmlHttp, timer;

  if (window.XMLHttpRequest) {
    xmlHttp = new XMLHttpRequest();
  } else {
    xmlHttp = new ActiveXObject();
  }

  // 设置请求方式和地址
  if (option.type.toLowerCase() === "get") {
    xmlHttp.open(option.type, option.url + `?t${str}`, true);
    xmlHttp.send(); // 发送请求
  } else {
    xmlHttp.open(option.type, option.utl, true);
    // 设置请求头
    xmlHttp.setRequestHeader(
      "Content-type",
      "application/x-www-form-urlencoded"
    );
    xmlHttp.send(str);
  }

  // 监听状态变化
  xmlHttp.onreadystatechange = () => {
    clearInterval(timer);
    if (xmlHttp.readyState === 4) {
      if (
        (xmlHttp.status >= 200 && xmlHttp.status < 300) ||
        xmlHttp.status === 304
      ) {
        option.success(xmlHttp);
      } else {
        option.error(xmlHttp);
      }
    }
  };

  // 对象转换成请求参数格式
  function objToString(obj) {
    obj.t = new Date().getTime(); // 兼容IE浏览器的缓存问题
    var res = [];
    for (var key in obj) {
      //需要将key和value转成非中文的形式，因为url不能有中文。使用encodeURIComponent();
      res.push(encodeURIComponent(key) + " = " + encodeURIComponent(obj[key]));
    }
    return res.join("&");
  }

  // 判断是否超时
  if (option.timeout) {
    timer = setInterval(() => {
      xmlHttp.abort(); // 中断请求
      clearInterval(timer);
    }, timeout);
  }
}