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高级程序设计》阅读笔记(一) ECMAScript基础
Feb 27 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
Jan 13 Javascript
深入理解JavaScript程序中内存泄漏
Mar 17 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
Jun 28 Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
Sep 24 Javascript
node.js + socket.io 实现点对点随机匹配聊天
Jun 30 Javascript
使用node.js对音视频文件加密的实例代码
Aug 30 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
Sep 30 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
Dec 19 Javascript
详解Vue.js v-for不支持IE9的解决方法
Dec 29 Javascript
微信小程序中如何计算距离某个节日还有多少天
Jul 15 Javascript
bootstrap实现嵌套模态框的实例代码
Jan 10 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
php的闭包(Closure)匿名函数初探
2016/02/14 PHP
PHP5.6新增加的可变函数参数用法分析
2017/08/25 PHP
js left,right,mid函数
2008/06/10 Javascript
Js数组的操作push,pop,shift,unshift等方法详细介绍
2012/12/28 Javascript
优化Jquery,提升网页加载速度
2013/11/14 Javascript
JavaScript实现找出字符串中第一个不重复的字符
2014/09/03 Javascript
使用jQuery实现验证上传图片的格式与大小
2014/12/03 Javascript
jquery带动画效果幻灯片特效代码
2015/08/27 Javascript
使用jQuery处理AJAX请求的基础学习教程
2016/05/10 Javascript
JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
2016/06/02 Javascript
Google 地图类型详解及示例代码
2016/08/06 Javascript
详解如何在React组件“外”使用父组件的Props
2018/01/12 Javascript
JavaScript实现淘宝京东6位数字支付密码效果
2018/08/18 Javascript
tweenjs缓动算法的使用实例分析
2019/08/26 Javascript
JQuery+drag.js上传图片并且实现图片拖曳
2020/11/18 jQuery
[59:26]DOTA2上海特级锦标赛D组资格赛#1 EG VS VP第二局
2016/02/28 DOTA
使用Python的urllib2模块处理url和图片的技巧两则
2016/02/18 Python
详解Python的Twisted框架中reactor事件管理器的用法
2016/05/25 Python
python解决方案:WindowsError: [Error 2]
2016/08/28 Python
用Python设计一个经典小游戏
2017/05/15 Python
python实现媒体播放器功能
2018/02/11 Python
python flask中静态文件的管理方法
2018/03/20 Python
PyTorch学习笔记之回归实战
2018/05/28 Python
解决.ui文件生成的.py文件运行不出现界面的方法
2019/06/19 Python
Python替换月份为英文缩写的实现方法
2019/07/15 Python
基于Python实现ComicReaper漫画自动爬取脚本过程解析
2019/11/11 Python
CSS3打造百度贴吧的3D翻牌效果示例
2017/01/04 HTML / CSS
.NET面试问题集
2015/12/08 面试题
房地产融资计划书
2014/01/10 职场文书
出国签证在职证明
2014/01/16 职场文书
集中整治工作方案
2014/05/01 职场文书
毕业生面试求职信
2014/06/23 职场文书
教师批评与自我批评剖析材料
2014/10/16 职场文书
Django对接elasticsearch实现全文检索的示例代码
2021/08/02 Python
win10识别不了U盘怎么办 win10系统读取U盘失败的解决办法
2022/08/05 数码科技
Docker容器harbor私有仓库部署和管理
2022/08/05 Servers