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控制上传文件的大小
Oct 26 Javascript
Z-Blog中用到的js代码
Mar 15 Javascript
jQuery使用一个按钮控制图片的伸缩实现思路
Apr 19 Javascript
js网页版计算器的简单实现
Jul 02 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
Mar 26 Javascript
javascript中加var和不加var的区别 你真的懂吗
Jan 06 Javascript
聊一聊jQuery插件uploadify使用方法
Aug 24 Javascript
js生成随机颜色方法代码分享(三种)
Dec 29 Javascript
Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
Jan 26 Javascript
用vuex写了一个购物车H5页面的示例代码
Dec 04 Javascript
Vuex新手的理解与使用详解
May 31 Javascript
结合axios对项目中的api请求进行封装操作
Sep 21 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
利用js调用后台php进行数据处理原码
2006/10/09 PHP
建立文件交换功能的脚本(一)
2006/10/09 PHP
php5 图片验证码实现代码
2009/12/11 PHP
获取URL文件名后缀
2013/10/24 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(三)
2014/06/23 PHP
PHP网站自动化配置的实现方法(必看)
2017/05/27 PHP
用cssText批量修改样式
2009/08/29 Javascript
return false;和e.preventDefault();的区别
2010/07/11 Javascript
学习javascript,实现插入排序实现代码
2011/07/31 Javascript
showModelDialog弹出文件下载窗口的使用示例
2013/11/19 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
2014/01/09 Javascript
jquery跟js初始化加载的多种方法及区别介绍
2014/04/02 Javascript
jquery操作checkbox示例分享
2014/07/21 Javascript
理解JS事件循环
2016/01/07 Javascript
浅析JS操作DOM的一些常用方法
2016/05/13 Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
2017/02/23 Javascript
react-navigation之动态修改title的内容
2018/09/26 Javascript
微信小程序rich-text富文本用法实例分析
2019/05/20 Javascript
NodeJS 文件夹拷贝以及删除功能
2019/09/03 NodeJs
JavaScript实现HSL拾色器
2020/05/21 Javascript
实例讲解React 组件生命周期
2020/07/08 Javascript
解析Python中的二进制位运算符
2015/05/13 Python
一键搞定python连接mysql驱动有关问题(windows版本)
2016/04/23 Python
python调用百度语音REST API
2018/08/30 Python
详解Python 调用C# dll库最简方法
2019/06/20 Python
在python中实现调用可执行文件.exe的3种方法
2019/07/07 Python
对Django项目中的ORM映射与模糊查询的使用详解
2019/07/18 Python
Numpy数组的广播机制的实现
2020/11/03 Python
python 模拟登陆github的示例
2020/12/04 Python
伦敦一家领先的精品零售商:IRIS Fashion
2019/05/24 全球购物
Servlet面试题库
2015/07/18 面试题
实习自我鉴定
2013/12/15 职场文书
医院护士的求职信
2014/01/03 职场文书
科技活动周标语
2014/10/08 职场文书
数据分析数据库ClickHouse在大数据领域应用实践
2022/04/03 MySQL
Win11开始菜单添加休眠选项
2022/04/19 数码科技