常见的原生js封装ajax

2024-05-28 0 899

请看以下案例:

function ajax(options) {
  var xhr = null;
  var type = 'GET';
  var params = formsParams(options.data);

  if(typeof options.type != 'undefined'){
    type = options.type.toUpperCase();
  }

  //创建对象
  if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest();
  } else {
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
  }
  if (typeof options.async == "undefined") {
    options.async = true;
  }

  // 处理请求成功的回调函数
  xhr.onload = function(){
    if (xhr.status >= 200 && xhr.status < 300) {
      if (typeof options.datatype == "undefined" || options.datatype == "json") {
        if(typeof options.success === 'function'){
          options.success(JSON.parse(xhr.responseText));
        }
      } else {
        if(typeof options.success === 'function'){
          options.success(xhr.responseText);
        }
      }
    } else {
      if(typeof options.error === 'function'){
        options.error(xhr.statusText);
      }
    }
  }

  // 处理请求错误的回调函数
  xhr.onerror = function() {
    if(typeof options.error === 'function'){
      options.error(xhr.statusText);
    }
  }

  // 设置请求头部
  if (options.headers) {
    for (var header in options.headers) {
      xhr.setRequestHeader(header, options.headers[header]);
    }
  }

  // 设置请求方法、URL、是否异步、发送请求
  if (type == "GET") {
    xhr.open(type, options.url + "?" + params, options.async);
    xhr.send(null);
  } else if (type == "POST") {
    xhr.open(type, options.url, options.async);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send(params);
  }

  function formsParams(data) {
    var arr = [];
    for (var prop in data) {
      arr.push(prop + "=" + data[prop]);
    }
    return arr.join("&");
  }
}

// 使用
ajax({
    url: "api.php",// 请求地址
    type: "POST",// 请求方式
    async: true,// 同步:false,异步:true,默认为true
    datatype: "json",// 返回数据的格式,"json","text",默认为json
    headers: {},// 设置请求头部,{"token": "123456"}
    data: {// post数据
        code: "s2sdd",
        link: location.href
    },
    success: function (res) {// 处理请求成功
        console.log(res);
    },
    error: function (res) {// 处理请求错误
        console.log(res);
    }
})

郑重声明:
1.本站所有源代码资源数据均来自互联网,如无特殊说明或标注,版权归原作者所有,我们仅提供测试使用,请在下载后24小时内删除
2.下载后请第一时间查杀后门以及病毒文件,本站已经安全检测过,不能保证查的彻底。
3.任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。
4.如若本站内容侵犯了原作者的合法权益,可联系我们进行删除
5.源码功能,完整性,搭建问题,使用操作等特殊问题,由于时间成本关系,本站客服不免费解答,请见谅。
6.本站搭建成功,你未能搭建起来,请按说明,检查环境是否匹配,或者下载本站其他源码测试。未标测试和附带说明的源码请自行研究。
7.我们不作任何承诺,也不保证100%可用,本站也尽最大能力搜集一些完整的源码进行整理测试发布.购买或者下载后,不支持任何退款理由,感谢理解!
8.本站所有资源都来自互联网,我们只负责整理分享,如果您的要求非常高,请找专业的网站开发公司!

521源码 学习教程 常见的原生js封装ajax https://www.111685.com/shipinsucai/shipin/7075.html

Avatar photo

一个只做精品源码资源整合的搬运工!

常见问题
  • 资源,源代码均来自网络,某一套代码完整性功能并未满足您,请勿责怪,下载其他尝试,部分残缺的源码,只适合学习用,本站不做任何源码部署相关问题。
查看详情
  • 最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议重新下载即可!
查看详情

相关文章

发表评论
暂无评论