原生js封装的ajax方法示例


Posted in Javascript onAugust 02, 2018

本文实例讲述了原生js封装的ajax方法。分享给大家供大家参考,具体如下:

众所周知,框架之间会有冲突,这是源生js就起到作用了,下面介绍一种源生js封装的ajax请求。

function ajax(options) {
  options = options || {};
  options.type = (options.type || "GET").toUpperCase();
  options.dataType = options.dataType || "json";
  var params = formatParams(options.data);
  //创建xhr对象 - 非IE6
  if (window.XMLHttpRequest) {
    var xhr = new XMLHttpRequest();
  } else { //IE6及其以下版本浏览器
    var xhr = new ActiveXObject('Microsoft.XMLHTTP');
  }
  //GET POST 两种请求方式
  if (options.type == "GET") {
    xhr.open("GET", options.url + "?" + params, true);
    xhr.send(null);
  } else if (options.type == "POST") {
    xhr.open("POST", options.url, true);
    //设置表单提交时的内容类型
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    xhr.send(params);
  }
  //接收
  xhr.onreadystatechange = function () {
    if (xhr.readyState == 4) {
      var status = xhr.status;
      if (status >= 200 && status < 300) {
        options.success && options.success(xhr.responseText);
      } else {
        options.fail && options.fail(status);
      }
    }
  }
}
//格式化参数
function formatParams(data) {
  var arr = [];
  for (var name in data) {
    arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));
  }
  arr.push(("v=" + Math.random()).replace(".",""));
  return arr.join("&");
}

调用方法

ajax({
  url: "data.json",
  type: "GET",
  data: {},
  dataType: "json",
  success: function (response) {
    // 此处放成功后执行的代码
     // 解析返回的字符串 转为json对象
    var usingdata = eval("("+response+")").data;
  }
  fail: function (status) {
    // 此处放失败后执行的代码
  }
});

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript内存管理介绍
Mar 13 Javascript
javascript中几个容易混淆的概念总结
Apr 14 Javascript
jquery实现动静态条形统计图
Aug 17 Javascript
JavaScript 常见安全漏洞和自动化检测技术
Aug 21 Javascript
JS实现超简单的鼠标拖动效果
Nov 02 Javascript
浅析bootstrap原理及优缺点
Mar 19 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
Aug 10 Javascript
浅谈angular2 组件的生命周期钩子
Aug 12 Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
Sep 03 Javascript
jQuery实现的简单手风琴效果示例
Aug 29 jQuery
vue自定义tap指令及tap事件的实现
Sep 18 Javascript
vue 父组件中调用子组件函数的方法
Jun 06 Javascript
JS实现根据指定值删除数组中的元素操作示例
Aug 02 #Javascript
详解Angular中通过$location获取地址栏的参数
Aug 02 #Javascript
JavaScript防止全局变量污染的方法总结
Aug 02 #Javascript
微信小程序之自定义组件的实现代码(附源码)
Aug 02 #Javascript
Array数组对象中的forEach、map、filter及reduce详析
Aug 02 #Javascript
利用Blob进行文件上传的完整步骤
Aug 02 #Javascript
vue.js图片转Base64上传图片并预览的实现方法
Aug 02 #Javascript
You might like
php结合js实现点击超链接执行删除确认操作
2014/10/31 PHP
如何解决phpmyadmin导入数据库文件最大限制2048KB
2015/10/09 PHP
Zend Framework入门教程之Zend_Session会话操作详解
2016/12/08 PHP
让jQuery Mobile不显示讨厌loading界面的方法
2014/02/19 Javascript
js实现获取当前时间是本月第几周的方法
2015/08/11 Javascript
js操作数据库实现注册和登陆的简单实例
2016/05/26 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
2016/12/07 Javascript
js实现导航栏中英文切换效果
2017/01/16 Javascript
JS正则替换去空格的方法
2017/03/24 Javascript
angularjs过滤器--filter与ng-repeat配合有奇效
2017/04/20 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
2017/11/27 Javascript
基于vue v-for 多层循环嵌套获取行数的方法
2018/09/26 Javascript
深入剖析JavaScript instanceof 运算符
2019/06/14 Javascript
jquery.pager.js实现分页效果
2019/07/29 jQuery
jQuery事件模型默认行为执行顺序及trigger()与 triggerHandler()比较实例分析
2020/04/30 jQuery
Angular8 简单表单验证的实现示例
2020/06/03 Javascript
JavaScript实现串行请求的示例代码
2020/09/14 Javascript
详解JavaScript中的this指向问题
2021/02/05 Javascript
python爬虫_自动获取seebug的poc实例
2017/08/05 Python
Python Gitlab Api 使用方法
2019/08/28 Python
python3.7+selenium模拟淘宝登录功能的实现
2020/05/26 Python
scrapy处理python爬虫调度详解
2020/11/23 Python
Python+unittest+requests+excel实现接口自动化测试框架
2020/12/23 Python
matplotlib绘制正余弦曲线图的实现
2021/02/22 Python
Haglöfs瑞典官方网站:haglofs火柴棍,欧洲顶级户外品牌
2018/10/18 全球购物
会计专业毕业生自我鉴定
2013/10/29 职场文书
企业管理部经理岗位职责
2013/12/24 职场文书
关于母亲节的感言
2014/02/04 职场文书
党员干部承诺书
2014/03/25 职场文书
小学模范班主任事迹材料
2014/05/13 职场文书
七一建党节演讲稿
2014/09/11 职场文书
工厂标语大全
2014/10/06 职场文书
2016国培研修心得体会
2016/01/08 职场文书
《游戏公平》教学反思
2016/02/20 职场文书
会计工作自我鉴定范文
2019/06/21 职场文书
MySQL GRANT用户授权的实现
2021/06/18 MySQL