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 相关文章推荐
javascript 四则运算精度修正函数代码
May 31 Javascript
Jquery下attr和removeAttr的使用方法
Dec 28 Javascript
JavaScript表达式:URL 协议介绍
Mar 10 Javascript
深入了解javascript中的prototype与继承
Apr 14 Javascript
Bootstrap每天必学之导航
Nov 26 Javascript
Angularjs的ng-repeat中去除重复数据的方法
Aug 05 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
Jan 11 Javascript
angularjs获取到My97DatePicker选中的值方法
Oct 02 Javascript
微信小程序实现的图片保存功能示例
Apr 24 Javascript
Angular实现svg和png图片下载实现
May 05 Javascript
jquery实现轮播图特效
Apr 12 jQuery
js实现滚动条自动滚动
Dec 13 Javascript
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
星际争霸教主Flash的ID由来:你永远不会知道他之前的ID是www!
2019/01/18 星际争霸
php 缓存函数代码
2008/08/27 PHP
php 中文和编码判断代码
2010/05/16 PHP
PHP和javascript常用正则表达式及用法实例
2014/07/01 PHP
php中curl使用指南
2015/02/05 PHP
PHP统计数值数组中出现频率最多的10个数字的方法
2015/04/20 PHP
thinkphp中的url跳转用法分析
2016/07/12 PHP
详解php中serialize()和unserialize()函数
2017/07/08 PHP
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
2009/11/24 Javascript
javascript学习笔记(十九) 节点的操作实现代码
2012/06/20 Javascript
js给onclick赋值传参数的两种方法
2013/11/25 Javascript
JavaScript事件委托的技术原理探讨示例
2014/04/17 Javascript
TypeScript 中接口详解
2015/06/19 Javascript
Javascript学习之谈谈JS的全局变量跟局部变量(推荐)
2016/08/28 Javascript
vue webuploader 文件上传组件开发
2017/09/23 Javascript
vue form check 表单验证的实现代码
2018/12/09 Javascript
nodeJS进程管理器pm2的使用
2019/01/09 NodeJs
解决vue项目获取dom元素宽高总是不准确问题
2020/07/29 Javascript
vue使用svg文件补充-svg放大缩小操作(使用d3.js)
2020/09/22 Javascript
[01:50:49]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Aster BO3 第三场 1月24日
2021/03/11 DOTA
python实现linux下使用xcopy的方法
2015/06/28 Python
详解配置Django的Celery异步之路踩坑
2018/11/25 Python
python模块导入的细节详解
2018/12/10 Python
pyqt5 实现在别的窗口弹出进度条
2019/06/18 Python
Python识别html主要文本框过程解析
2020/02/18 Python
python 决策树算法的实现
2020/10/09 Python
使用python画出逻辑斯蒂映射(logistic map)中的分叉图案例
2020/12/11 Python
Sam’s Club山姆会员商店:沃尔玛旗下高端会员制商店
2017/01/16 全球购物
以设计师精品品质提供快速时尚:PopJulia
2018/01/09 全球购物
DNA测试:Orig3n
2019/03/01 全球购物
如何写你的创业计划书
2014/01/07 职场文书
超市重阳节活动方案
2014/02/10 职场文书
思想品德课教学反思
2014/02/10 职场文书
电台编导求职信
2014/05/06 职场文书
AI:如何训练机器学习的模型
2021/04/16 Python
Python 阶乘详解
2021/10/05 Python