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基础资料整理3 正则
Dec 06 Javascript
人人网javascript面试题 可以提前实现下
Jan 05 Javascript
jQuery基本选择器选择元素使用介绍
Apr 18 Javascript
js判断输入是否为数字的具体实例
Aug 03 Javascript
javascript中String对象的slice()方法分析
Dec 20 Javascript
bootstrap table 服务器端分页例子分享
Feb 10 Javascript
js友好的时间返回函数
Aug 24 Javascript
浅谈JS的基础类型与引用类型
Sep 13 Javascript
BootStrap中按钮点击后被禁用按钮的最佳实现方法
Sep 23 Javascript
Bootstrap Modal对话框如何在关闭时触发事件
Dec 02 Javascript
Angular2整合其他插件的方法
Jan 20 Javascript
JavaScript日期库date-fn.js使用方法解析
Sep 09 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 调试环境(IIS+PHP+MYSQL)
2007/01/10 PHP
SWFUpload与CI不能正确上传识别文件MIME类型解决方法分享
2011/04/18 PHP
深入php常用函数的使用汇总
2013/06/08 PHP
php事务处理实例详解
2014/07/11 PHP
php发送与接收流文件的方法
2015/02/11 PHP
PHP脚本监控Nginx 502错误并自动重启php-fpm
2015/05/13 PHP
使用php实现网站验证码功能【推荐】
2017/02/09 PHP
php 调用百度sms来发送短信的实现示例
2018/11/02 PHP
给事件响应函数传参数的四种方式小结
2013/12/05 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
2014/06/24 Javascript
JavaScript的null和undefined区别示例介绍
2014/09/15 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
2015/01/23 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
2015/02/17 Javascript
JavaScript采用递归算法计算阶乘实例
2015/08/04 Javascript
JS实现的文字与图片定时切换效果代码
2015/10/06 Javascript
jQuery中常用动画效果函数(日常整理)
2016/09/17 Javascript
BootStrap树状图显示功能
2016/11/24 Javascript
nodejs 实现钉钉ISV接入的加密解密方法
2017/01/16 NodeJs
详解easyui基于 layui.laydate日期扩展组件
2018/07/18 Javascript
webpack的CSS加载器的使用
2018/09/11 Javascript
Vue项目路由刷新的实现代码
2019/04/17 Javascript
laypage.js分页插件使用方法详解
2019/07/27 Javascript
浅谈鸿蒙 JavaScript GUI 技术栈
2020/09/17 Javascript
Python httplib模块使用实例
2015/04/11 Python
Python使用urllib模块对URL网址中的中文编码与解码实例详解
2020/02/18 Python
Pycharm及python安装详细步骤及PyCharm配置整理(推荐)
2020/07/31 Python
css3 transform导致子元素固定定位变成绝对定位的方法
2020/03/06 HTML / CSS
中国电子产品外贸网站:MiniIntheBox
2017/02/06 全球购物
请编程遍历页面上所有 TextBox 控件并给它赋值为 string.Empty
2015/12/03 面试题
有趣的广告词
2014/03/18 职场文书
技术岗位竞聘演讲稿
2014/05/16 职场文书
2015年大学生工作总结
2015/04/21 职场文书
本科毕业论文致谢怎么写
2015/05/14 职场文书
幼儿园园长工作总结2015
2015/05/25 职场文书
孙振耀退休感言
2015/08/01 职场文书
互联网的下一个风口:新的独角兽将诞生
2019/08/02 职场文书