js如何编写简单的ajax方法库


Posted in Javascript onAugust 02, 2017

本文实例为大家分享了js编写ajax方法库的具体代码,供大家参考,具体内容如下

具体代码

~function(){
  //ajax:实现ajax请求的公共方法;当一个方法传递的参数过多,而且还不固定,我们使用对象统一传值法(把需要传递的参数值都放在一个对象中,一起传递进去即可)
  function ajax(options){
    //把需要使用的参数值设定一个规则和初始值
    var _default = {
      url:"",//请求的地址
      type:"get",//请求的方式
      dataType:"json",//设置请求回来的内容格式
      async:true,//请求是同步还是异步
      data:null,//放在请求主体中的内容(POST)
      getHead:null,//当READY STATE===2的时候执行的回调方法
      success:null//当READY STATE===4的时候执行的回调方法
    };
    //使用用户自己传递进来的值覆盖我们的默认值
    for(var key in options){
      if(options.hasOwnProperty(key)){
        _default[key] = options[key];
      }
    }
    //如果当前的请求方式是get,我们需要在URL的末尾加随机数清楚缓存
    if(_default.type==="get"){
      _default.url.indexOf("?") >=0 ? _default.url += "&" : _default.url += "?";
      _default.url +="_="+Math.random();
    }
    //SEND AJAX
    var xhr = createXHR();
    xhr.open(_default.type,_default.url,_default.async);
    xhr.onreadystatechange = function(){
      if(/^2\d{2}/.test(xhr.status)){
        //想要在READY STATE等于2的时候做一些操作,需要保证AJAX是异步请求
        if(xhr.readyState === 2){
          if(typeof _default.getHead === "function"){
            _default.getHead.call(xhr);
          }
        }
        if(xhr.readyState === 4){
          var val = xhr.responseText;
          //如果传递的参数值是json,说明获取的内容应该是json格式的对象
          if(_default.dataType === "json"){
            val = "JSON" in window ? JSON.parse(val) : eval("("+val+")");
          }
          _default.success && _default.success.call(xhr,val)

        }
      }
    }
    xhr.send(_default.data);
  }
  window.ajax = ajax;
}()

ajax({
  url:"data.txt",
  type:"get",
  dataType:"json",
  async:false,
  getHead:function(){
    //this xhr当前AJAX对象
  },
  success:function(data){
    //this xhr当前AJAX对象
    //data:我们从服务器获取的主体内容
  }

})

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Jquery AJAX 框架的使用方法
Nov 03 Javascript
javascript 处理事件绑定的一些兼容写法
Dec 24 Javascript
javascript重写alert方法的实例代码
Mar 29 Javascript
常用的jQuery前端技巧收集
Dec 24 Javascript
JavaScript学习笔记之JS事件对象
Jan 22 Javascript
JavaScript encodeURI 和encodeURIComponent
Dec 04 Javascript
webpack4.x开发环境配置详解
Aug 04 Javascript
微信小程序canvas拖拽、截图组件功能
Sep 04 Javascript
JavaScript学习笔记之图片库案例分析
Jan 08 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
May 10 Javascript
vue 使用v-for进行循环的实例代码详解
Feb 19 Javascript
基于vue项目设置resolves.alias: '@'路径并适配webstorm
Dec 02 Vue.js
JavaScript实现无刷新上传预览图片功能
Aug 02 #Javascript
基于jquery实现多选下拉列表
Aug 02 #jQuery
基于LayUI分页和LayUI laypage分页的使用示例
Aug 02 #Javascript
使用JavaScript实现链表的数据结构的代码
Aug 02 #Javascript
javascript 取小数点后几位几种方法总结
Aug 02 #Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
Aug 02 #Javascript
jQuery接受后台传递的List的实例详解
Aug 02 #jQuery
You might like
php小经验:解析preg_match与preg_match_all 函数
2013/06/29 PHP
PHP开发制作一个简单的活动日程表Calendar
2016/06/20 PHP
php使用函数pathinfo()、parse_url()和basename()解析URL
2016/11/25 PHP
详解php用curl调用接口方法,get和post两种方式
2017/01/13 PHP
Joomla框架实现字符串截取的方法示例
2017/07/18 PHP
PHP实现通过strace定位故障原因的方法
2018/04/29 PHP
PHP设计模式之数据访问对象模式(DAO)原理与用法实例分析
2019/12/12 PHP
PHP终止脚本运行三种实现方法详解
2020/09/01 PHP
JavaScript前端图片加载管理器imagepool使用详解
2014/12/29 Javascript
Jquery实现弹性滑块滑动选择数值插件
2015/08/08 Javascript
jQuery学习笔记之Ajax用法实例详解
2015/12/01 Javascript
js中利用cookie实现记住密码功能
2020/08/20 Javascript
HTML5 JS压缩图片并获取图片BASE64编码上传
2020/11/16 Javascript
javascript输出AscII码扩展集中的字符方法
2016/12/26 Javascript
jQuery实现选中行变色效果(实例讲解)
2017/07/06 jQuery
小程序组件之仿微信通讯录的实现代码
2018/09/12 Javascript
JavaScript 截取字符串代码实例
2019/09/05 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
2020/07/30 Javascript
深入了解Vue动态组件和异步组件
2021/01/26 Vue.js
解决Mac安装scrapy失败的问题
2018/06/13 Python
python3实现的zip格式压缩文件夹操作示例
2019/08/17 Python
Python数据可视化:顶级绘图库plotly详解
2019/12/07 Python
jupyter notebook快速入门及使用详解
2020/11/13 Python
python中openpyxl和xlsxwriter对Excel的操作方法
2021/03/01 Python
美国演唱会和体育门票购买网站:Ticketnetwork
2018/10/19 全球购物
PHP如何防止SQL注入
2014/05/03 面试题
上海期货面试题
2014/01/31 面试题
大学自我鉴定
2013/12/20 职场文书
优秀员工获奖感言
2014/03/01 职场文书
煤矿安全生产责任书
2014/04/15 职场文书
婚前协议书范本
2014/04/15 职场文书
优秀的个人求职信范文
2014/05/09 职场文书
小学竞选班干部演讲稿
2014/08/20 职场文书
个人学习总结范文
2015/02/15 职场文书
2015年妇幼卫生工作总结
2015/05/23 职场文书
SpringBoot接入钉钉自定义机器人预警通知
2022/07/15 Java/Android