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 相关文章推荐
jquery文字上下滚动的实现方法
Mar 22 Javascript
js动态设置div的值下例子
Oct 29 Javascript
JavaScript 语言基础知识点总结(思维导图)
Nov 10 Javascript
JS取request值以及自动执行使用示例
Feb 24 Javascript
jQuery函数map()和each()介绍及异同点分析
Nov 08 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
Jan 13 Javascript
JavaScript对象属性检查、增加、删除、访问操作实例
Jul 08 Javascript
js实现横向伸展开的二级导航菜单代码
Aug 28 Javascript
AngularJS中的Directive实现延迟加载
Jan 25 Javascript
jsp 网站引入外部css或者js失效问题解决
Oct 31 Javascript
用户管理的设计_jquery的ajax实现二级联动效果
Jul 13 jQuery
vue实现添加与删除图书功能
Oct 07 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
文件上传类
2006/10/09 PHP
php+mysql实现无限级分类 | 树型显示分类关系
2006/11/19 PHP
Symfony2学习笔记之控制器用法详解
2016/03/17 PHP
基于Laravel 多个中间件的执行顺序详解
2019/10/21 PHP
PJBlog插件 防刷新的在线播放器
2006/10/25 Javascript
javascript 面向对象编程  function是方法(函数)
2009/09/17 Javascript
javascript解析json数据的3种方式
2014/05/08 Javascript
javascript中数组array及string的方法总结
2014/11/28 Javascript
angularjs中的e2e测试实例
2014/12/06 Javascript
angularjs基础教程
2014/12/25 Javascript
Angular2数据绑定详解
2017/04/18 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
2017/08/04 jQuery
node.js 核心http模块,起一个服务器,返回一个页面的实例
2017/09/11 Javascript
浅谈FastClick 填坑及源码解析
2018/03/02 Javascript
详解react native页面间传递数据的几种方式
2018/11/07 Javascript
通过layer实现可输入的模态框的例子
2019/09/27 Javascript
在VUE中实现文件下载并判断状态的方法
2019/11/08 Javascript
Python编程给numpy矩阵添加一列方法示例
2017/12/04 Python
基于Python的PIL库学习详解
2019/05/10 Python
python多线程下信号处理程序示例
2019/05/31 Python
在django中,关于session的通用设置方法
2019/08/06 Python
Selenium自动化测试工具使用方法汇总
2020/06/12 Python
如何基于Python Matplotlib实现网格动画
2020/07/20 Python
Data URI scheme详解和使用实例及图片base64编码实现方法
2014/05/08 HTML / CSS
马来西亚最大的电器网站:Senheng
2017/10/13 全球购物
英国汽车零件购物网站:GSF Car Parts
2019/05/23 全球购物
编写函数,将一个3*3矩阵转置
2013/10/09 面试题
行政文员岗位职责
2013/11/08 职场文书
分公司经理岗位职责
2013/11/11 职场文书
企业贷款委托书格式
2014/09/12 职场文书
2015年社区妇联工作总结
2015/04/21 职场文书
2016感恩母亲节校园广播稿
2015/12/17 职场文书
golang 实现对Map进行键值自定义排序
2021/04/28 Golang
jackson json序列化实现首字母大写,第二个字母需小写
2021/06/29 Java/Android
python神经网络 tf.name_scope 和 tf.variable_scope 的区别
2022/05/04 Python
MySQL批量更新不同表中的数据
2022/05/11 MySQL