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中的undefined 与 null 的区别  补充篇
Mar 17 Javascript
js操作checkbox遇到的问题解决
Jun 29 Javascript
用Javascript来生成ftp脚本的小例子
Jul 03 Javascript
基于JQuery实现的图片自动进行缩放和裁剪处理
Jan 31 Javascript
Jquery 实现checkbox全选方法
Jan 28 Javascript
多种js图片预加载实现方式分享
Feb 19 Javascript
artDialog+plupload实现多文件上传
Jul 19 Javascript
基于jQuery实现弹幕APP
Feb 10 Javascript
详谈$.data()的用法和作用
Feb 13 Javascript
vue2.0获取自定义属性的值
Mar 28 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
Nov 08 Javascript
uni-app实现获取验证码倒计时功能
Nov 01 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学习之输出字符串(echo,print,printf,print_r和var_dump)
2011/04/17 PHP
php使用exec shell命令注入的方法讲解
2013/11/12 PHP
Codeigniter实现多文件上传并创建多个缩略图
2014/06/12 PHP
PHP实现数组根据某个单元字段排序操作示例
2018/08/01 PHP
PHP如何通过date() 函数格式化显示时间
2020/11/13 PHP
php操作redis命令及代码实例大全
2020/11/19 PHP
javascript 写类方式之三
2009/07/05 Javascript
js 操作符汇总
2014/11/08 Javascript
jQuery前端框架easyui使用Dialog时bug处理
2014/12/05 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
2016/05/20 Javascript
jQuery处理XML文件的几种方法
2016/06/14 Javascript
JS清除字符串中重复值的实现方法
2016/08/03 Javascript
AngularJS+Bootstrap实现多文件上传与管理
2016/11/08 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
2017/05/17 Javascript
JS如何设置元素样式的方法示例
2017/08/28 Javascript
彻底搞懂JavaScript中的apply和call方法(必看)
2017/09/18 Javascript
vue2.0设置proxyTable使用axios进行跨域请求的方法
2017/10/19 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
2018/08/10 Javascript
javascript实现函数柯里化与反柯里化过程解析
2019/10/08 Javascript
Python 的 Socket 编程
2015/03/24 Python
python利用高阶函数实现剪枝函数
2018/03/20 Python
django请求返回不同的类型图片json,xml,html的实例
2018/05/22 Python
Pandas读取MySQL数据到DataFrame的方法
2018/07/25 Python
python实现微信定时每天和女友发送消息
2019/04/29 Python
如何在python中实现线性回归
2020/08/10 Python
用css3写出气球样式的示例代码
2017/09/11 HTML / CSS
Melijoe时尚童装德国官网:Melijoe德国
2016/09/03 全球购物
欧洲领先的火车票和大巴票预订平台:Trainline
2018/12/26 全球购物
Ben Sherman官方网站:英国男装品牌
2019/10/22 全球购物
国贸专业个人求职信分享
2013/12/04 职场文书
事业单位请假制度
2014/01/13 职场文书
新春文艺演出主持词
2014/03/27 职场文书
服务承诺书范文
2014/05/19 职场文书
公司活动总结怎么写
2014/06/25 职场文书
年终工作总结范文2014
2014/11/27 职场文书
资料员岗位职责
2015/02/10 职场文书