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 混合的构造函数和原型方式,动态原型方式
Dec 07 Javascript
基于jquery点击自以外任意处,关闭自身的代码
Feb 10 Javascript
超简单JS二级、多级联动的简单实例
Feb 18 Javascript
js实现简单的购物车有图有代码
May 26 Javascript
fckeditor粘贴Word时弹出窗口取消的方法
Oct 30 Javascript
如何在MVC应用程序中使用Jquery
Nov 17 Javascript
ExpressJS入门实例
Jan 14 Javascript
js鼠标单击和双击事件冲突问题的快速解决方法
Jul 11 Javascript
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
Jan 24 Javascript
EasyUI创建人员树的实例代码
Sep 15 Javascript
微信小程序中上传图片并进行压缩的实现代码
Aug 28 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
May 14 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 file_exists 检查文件或目录是否存在的函数
2010/05/10 PHP
YII2 实现多语言配置的方法分享
2017/01/11 PHP
php 策略模式原理与应用深入理解
2019/09/25 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
Jquery实现视频播放页面的关灯开灯效果
2013/05/27 Javascript
JavaScript判断表单为空及获取焦点的方法
2016/02/12 Javascript
使用JQuery实现智能表单验证功能
2016/03/08 Javascript
Bootstrap3 datetimepicker控件使用实例
2016/12/13 Javascript
Js实现中国公民身份证号码有效性验证实例代码
2017/05/03 Javascript
详解webpack解惑:require的五种用法
2017/06/09 Javascript
在 Angular中 使用 Lodash 的方法
2018/02/11 Javascript
vue中如何去掉空格的方法实现
2018/11/09 Javascript
Vue项目打包部署到iis服务器的配置方法
2019/10/14 Javascript
JS+CSS实现随机点名(实例代码)
2019/11/04 Javascript
vue移动端使用canvas签名的实现
2020/01/15 Javascript
封装一下vue中的axios示例代码详解
2020/02/16 Javascript
如何HttpServletRequest文件对象并储存
2020/08/14 Javascript
Python 序列化 pickle/cPickle模块使用介绍
2014/11/30 Python
shelve  用来持久化任意的Python对象实例代码
2016/10/12 Python
Python语言描述最大连续子序列和
2017/12/05 Python
对pandas中iloc,loc取数据差别及按条件取值的方法详解
2018/11/06 Python
Python数据库小程序源代码
2019/09/15 Python
HTML5的结构和语义(2):结构
2008/10/17 HTML / CSS
1688平价精选商城:阿里集团旗下,工厂出厂价格直销
2017/04/24 全球购物
美国在线面料商店:Online Fabric Store
2018/07/26 全球购物
会计电算化专业毕业生自荐信
2013/12/20 职场文书
英语自我评价范文
2014/01/24 职场文书
闭幕式主持词
2014/04/02 职场文书
同志主要表现材料
2014/08/21 职场文书
德育标兵事迹材料
2014/08/24 职场文书
党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
2015年中职班主任工作总结
2015/05/25 职场文书
2019年朋友圈经典励志语录50条
2019/07/05 职场文书
python实现批量提取指定文件夹下同类型文件
2021/04/05 Python
git stash(储藏)的用法总结
2022/06/25 Servers
Valheim服务器 Mod修改安装教程 【ValheimPlus】
2022/12/24 Servers