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 相关文章推荐
关于COOKIE个数与大小的问题
Jan 17 Javascript
javascript学习笔记(九) js对象 设计模式
Jun 19 Javascript
为JS扩展Array.prototype.indexOf引发的问题探讨及解决
Apr 24 Javascript
利用JQuery制作符合Web标准的QQ弹出消息
Jan 14 Javascript
jquery控制select的text/value值为选中状态
Jun 03 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
Jun 01 Javascript
JavaScript中的prototype原型学习指南
May 09 Javascript
简单模拟node.js中require的加载机制
Oct 27 Javascript
js实现可输入可选择的select下拉框
Dec 21 Javascript
JS解决IOS中拍照图片预览旋转90度BUG的问题
Sep 13 Javascript
Angular HMR(热模块替换)功能实现方法
Apr 04 Javascript
Vue3配置axios跨域实现过程解析
Nov 25 Vue.js
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操作文件方法问答
2007/03/16 PHP
深入解析Session是否必须依赖Cookie
2013/08/02 PHP
PHP实现根据浏览器跳转不同语言页面代码
2013/08/02 PHP
常见php数据文件缓存类汇总
2014/12/05 PHP
自定义min版smarty模板引擎MinSmarty.class.php文件及用法
2016/05/20 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
基于jquery的页面划词搜索JS
2010/09/14 Javascript
JavaScript的document对象和window对象详解
2010/12/30 Javascript
js数组操作常用方法
2014/05/08 Javascript
浅谈js的setInterval事件
2014/12/05 Javascript
node.js中的url.format方法使用说明
2014/12/10 Javascript
javascript jquery对form元素的常见操作详解
2016/06/12 Javascript
微信开发 JS-SDK 6.0.2 经常遇到问题总结
2016/12/08 Javascript
利用Ionic2 + angular4实现一个地区选择组件
2017/07/27 Javascript
微信小程序 按钮滑动的实现方法
2017/09/27 Javascript
使用layui实现的左侧菜单栏以及动态操作tab项方法
2019/09/10 Javascript
javascript实现计算器功能
2020/03/30 Javascript
JS实现购物车基本功能
2020/11/08 Javascript
Python图算法实例分析
2016/08/13 Python
Python 关于反射和类的特殊成员方法
2017/09/14 Python
python实现数据库跨服务器迁移
2018/04/12 Python
python3+PyQt5重新实现QT事件处理程序
2018/04/19 Python
python判断所输入的任意一个正整数是否为素数的两种方法
2019/06/27 Python
一行Python代码制作动态二维码的实现
2019/09/09 Python
学生如何注册Pycharm专业版以及pycharm的安装
2020/09/24 Python
美国二手复古奢侈品包包购物网站:LXRandCo
2019/06/18 全球购物
校园活动策划书范文
2014/01/10 职场文书
魅力教师事迹材料
2014/01/10 职场文书
销售经理岗位职责
2014/03/16 职场文书
卫生院艾滋病宣传活动小结
2014/07/09 职场文书
党支部考察鉴定意见
2015/06/02 职场文书
总经理年会致辞
2015/07/29 职场文书
医务人员岗前培训心得体会
2016/01/08 职场文书
2019年大学毕业生个人自我鉴定范文大全
2019/03/21 职场文书
pycharm代码删除恢复的方法
2021/06/26 Python
SQL中的三种去重方法小结
2021/11/01 SQL Server