XMLHTTPRequest对象实现ajax函数封装

function ajax (options) {
  var defaults = {
    type: 'get',
    url: '',
    data: {},
    header: {
      'Content-Type': 'application/x-www-form-urlencoded'
    },
    success: function () {},
    error: function () {}
  };
  // 用options对象中的属性覆盖defaults对象中的属性，原位操作
  Object.assign(defaults, options);

  var xhr = new XMLHttpRequest();
  var params = '';
  for( var attr in defaults.data){
    params += attr + "=" + defaults.data[attr] + "&";
  }
  params = params.substr(0, params.length - 1);
  if(defaults.type == 'get') {
    defaults.url += "?" + params;
  }
  xhr.open(defaults.type, defaults.url);
  if(defaults.type == 'get') {
    xhr.send();
  }else {
    var contentType = defaults.header['Content-Type'];
    // 如果请求类型为post，必须明确设置报文头的类型
    xhr.setRequestHeader('Content-Type', contentType);
    if(contentType == 'application/json') {
      xhr.send(JSON.stringify(defaults.data));
    }else{
      xhr.send(params);
    }
  }
  xhr.onload = function () {
    if(xhr.status == 200){
      var resHeader = xhr.getResponseHeader('Content-Type');
      var responseText = xhr.responseText;
      if(resHeader.includes('application/json')) {
        responseText = JSON.parse(responseText);
      }
      defaults.success(responseText, xhr);
    }else {
      defaults.error(xhr.responseText, xhr);
    }
  };
  xhr.onerror = function () {
    defaults.error(xhr.responseText);
  };
}

  
 

  
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
 

调用的时候，给ajax函数传一个对象,不写的属性会采取默认值，其中:

• type属性默认值是：‘get’
• url属性默认值是： ‘’
• data属性默认值是：{}
• header属性默认值是: {
  ‘Content-Type’: ‘application/x-www-form-urlencoded’
  }
• success: function () {}
• error: function () {}

例如：

ajax({
  type: 'post',
  url: 'http://localhost/responseData',
  data: {
  	name: 'yibo'
  },
  success: function (res, xhr) {
    console.log(res, xhr);
  }
})

  
 

  
1
  
2
  
3
  
4
  
5
  
6
  
7
  
8
  
9
  
10
 

文章来源: blog.csdn.net，作者：爱玲姐姐，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/jal517486222/article/details/104753728