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 相关文章推荐
[原创]保存的js无法执行的解决办法
Feb 25 Javascript
Save a File Using a File Save Dialog Box
Jun 18 Javascript
Javascript 面向对象(三)接口代码
May 23 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
Feb 10 Javascript
JavaScript学习笔记之JS函数
Jan 22 Javascript
Angular ng-repeat 对象和数组遍历实例
Sep 14 Javascript
mvc 、bootstrap 结合分布式图简单实现分页
Oct 10 Javascript
JavaScript调试之console.log调试的一个小技巧分享
Aug 07 Javascript
Javascript中的getter和setter初识
Aug 17 Javascript
微信小程序获取手机网络状态的方法【附源码下载】
Dec 08 Javascript
微信小程序中的video视频实现 自定义播放按钮、封面图、视频封面上文案
Jan 02 Javascript
对vue生命周期的深入理解
Dec 03 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
世界第一个无线广播电台 KDKA
2021/03/01 无线电
str_replace只替换一次字符串的方法
2013/04/09 PHP
简单介绍PHP的责任链编程模式
2015/08/11 PHP
laravel Validator ajax返回错误信息的方法
2019/09/29 PHP
window.open的功能全解析
2006/10/10 Javascript
网站如何做到完全不需要jQuery也可以满足简单需求
2013/06/27 Javascript
简单的代码实现jquery定时器
2014/01/03 Javascript
JavaScript cookie的设置获取删除详解
2014/02/11 Javascript
JS运动基础框架实例分析
2015/03/03 Javascript
JavaScript输出当前时间Unix时间戳的方法
2015/04/06 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
2016/01/19 Javascript
javascript实现根据函数名称字符串动态执行函数的方法示例
2016/12/28 Javascript
jquery实现一个全局计时器(商城可用)
2017/06/30 jQuery
angular学习之从零搭建一个angular4.0项目
2017/07/10 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
2018/05/07 Javascript
Vue 组件修改根实例的数据的方法
2019/04/02 Javascript
Vue函数式组件-你值得拥有
2019/05/09 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
2019/12/22 Javascript
vue ssr+koa2构建服务端渲染的示例代码
2020/03/23 Javascript
js实现点击按钮随机生成背景颜色
2020/09/05 Javascript
[01:01:29]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第一场
2018/04/05 DOTA
python实现的系统实用log类实例
2015/06/30 Python
python 获取等间隔的数组实例
2019/07/04 Python
python读取Excel表格文件的方法
2019/09/02 Python
python调用HEG工具批量处理MODIS数据的方法及注意事项
2020/02/18 Python
如何提高python 中for循环的效率
2020/04/15 Python
ROSEFIELD手表荷兰官方网上商店:北欧极简设计女士腕表品牌
2018/01/24 全球购物
Rag & Bone官网:瑞格布恩高级成衣
2018/04/19 全球购物
德国家具折扣店:POCO
2020/02/28 全球购物
通用C#笔试题附答案
2016/11/26 面试题
本科生详细的自我评价
2013/09/19 职场文书
新娘父亲婚礼致辞
2014/01/16 职场文书
2014年社区重阳节活动策划方案
2014/09/16 职场文书
学生会招新宣传语
2015/07/13 职场文书
CAD实训总结范文
2015/08/03 职场文书
vue router 动态路由清除方式
2022/05/25 Vue.js