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 相关文章推荐
让网页根据不同IE版本显示不同的内容
Feb 08 Javascript
10款新鲜出炉的 jQuery 插件(Ajax 插件,有幻灯片、图片画廊、菜单等)
Jun 08 Javascript
js浮点数精确计算(加、减、乘、除)
Dec 26 Javascript
jQuery实现下拉框左右选择的简单实例
Feb 22 Javascript
前端框架Vue.js构建大型应用浅析
Sep 12 Javascript
jQuery实现立体式数字滚动条增加效果
Dec 21 Javascript
Web纯前端“旭日图”实现元素周期表
Mar 10 Javascript
js 简易版滚动条实例(适用于移动端H5开发)
Jun 26 Javascript
最后说说Vue2 SSR 的 Cookies 问题
May 25 Javascript
小程序图片剪裁加旋转的示例代码
Jul 10 Javascript
Vue开发之封装上传文件组件与用法示例
Apr 25 Javascript
vue点击按钮实现简单页面的切换
Sep 08 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
Windows下部署Apache+PHP+MySQL运行环境实战
2012/08/31 PHP
php生成酷炫的四个字符验证码
2016/04/22 PHP
PHP容器类的两种实现方式示例
2019/07/24 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
2013/04/02 Javascript
jquery each的几种常用的使用方法示例
2014/01/21 Javascript
javascript中定义类的方法详解
2015/02/10 Javascript
jquery实现键盘左右翻页特效
2015/04/30 Javascript
jQuery随手笔记之常用的jQuery操作DOM事件
2015/11/29 Javascript
AngularJS实用开发技巧(推荐)
2016/07/13 Javascript
JS轮播图中缓动函数的封装
2020/11/25 Javascript
jQuery ajax实现省市县三级联动
2021/03/07 Javascript
bootstrap选项卡扩展功能详解
2017/06/14 Javascript
vue基于mint-ui实现城市选择三级联动
2020/06/30 Javascript
angular将html代码输出为内容的实例
2018/09/30 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
2019/05/05 Javascript
Vue实现根据hash高亮选项卡
2019/05/27 Javascript
javascript实现获取中文汉字拼音首字母
2020/05/19 Javascript
[45:17]DOTA2-DPC中国联赛定级赛 Phoenix vs DLG BO3第三场 1月9日
2021/03/11 DOTA
Django实现图片上传功能步骤解析
2020/04/22 Python
python爬虫调度器用法及实例代码
2020/11/30 Python
Python urlopen()参数代码示例解析
2020/12/10 Python
CSS3与动画有关的属性transition、animation、transform对比(史上最全版)
2017/08/18 HTML / CSS
澳大利亚潮流尖端的快时尚品牌:Cotton On
2016/09/26 全球购物
大专毕业生简历的自我评价
2013/10/20 职场文书
小小的船教学反思
2014/02/21 职场文书
环境监测与治理技术专业求职信
2014/07/06 职场文书
寒暑假实习证明书模板
2014/11/29 职场文书
大学生旷课检讨书1000字
2015/02/19 职场文书
父亲节寄语大全
2015/02/27 职场文书
拾金不昧通报表扬范文
2015/05/05 职场文书
少先队入队仪式主持词
2015/07/04 职场文书
期中考试后的感想
2015/08/07 职场文书
2016年寒假家长评语
2015/10/10 职场文书
苹果电脑mac os中货币符号快捷输入
2022/02/17 杂记
MySQL为数据表建立索引的原则详解
2022/03/03 MySQL