原生js使用XMLHTTPRequest对象实现ajax函数封装

举报
楚楚冻人玥玥仙女 发表于 2021/11/18 23:44:04 2021/11/18
【摘要】 XMLHTTPRequest对象实现ajax函数封装 function ajax (options) { var defaults = { type: 'get', u...

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

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200