javascript实现简单的ajax封装示例


Posted in Javascript onDecember 28, 2016

本文实例讲述了javascript实现简单的ajax功能封装。分享给大家供大家参考,具体如下:

function ajax(obj){
    var xhr = (function (){//获取xhr对象,为了兼容ie6所以进行了重新封装
  if(typeof XMLHttpRequest !='undefined') {
    return new XMLHttpRequest();
  }else if(typeof ActiveXObject !='undefined') {
    var version = [
      'MSXML2.XMLHttp6.0',
      'MSXML2.XMLHttp3.0',
      'MSXML2.XMLHttp'
    ]
    for(var i in version) {
      try{
        return new ActiveXObject(version[i]);
        break;
      }catch(e){
      //捕获错误进行然后跳出继续循环
      }
    }
  }else{
    throw new Error("您的系统或浏览器不支持XHR对象!");
  }
})();//获取xhr对象
    //默认true开启异步(异步和同步的主要区别是异步在请求的时候后面的脚本可以继续运行,同步的话必须运行完ajax然后才能运行其后面的脚本)
    if(obj.async === true) {
      xhr.onreadystatechange = function() {
        if(xhr.readyState ==4) {
          callback(xhr.responseText);
        }
      }
    }
  var arr=[] ;
  for(var i in obj.data) {arr.push(encodeURIComponent(i)+'='+encodeURIComponent(obj.data[i]));}
  obj.data = arr.join('&');  //这一步要注意一下,不管是get/post 方式提交都必须要对传进来的obj.data进行格式化 最后转化成的格式name=zhang&age=26&wedding=no
  if(obj.method === 'get') {//通过get方式请求的
      obj.url = obj.url.indexOf('?') ==-1 ? obj.url+'?rand='+Math.random()+'&'+obj.data : obj.url+'rand='+Math.random()+'&'+obj.data;
      xhr.open(obj.method,obj.url,obj.async);
      xhr.send(null);
  }
  if(obj.method === 'post') {//通过post方式请求的
      obj.url =obj.url+'?rand='+Math.random();
      xhr.open(obj.method,obj.url,obj.async);
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');//这是对请求头部的类型重设,post的请求必须要重设;
      xhr.send(obj.data);
  }
  //false开启同步
  if(obj.async === false) {callback(xhr.responseText);}
  function callback (returnTxt) {
      if(xhr.status == 200){
        obj.success(returnTxt);
      }else {
      alert('获取数据错误!错误代号:' + xhr.status + ',错误信息:' + xhr.statusText);
    }
  }
}

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js获取url参数的使用扩展实例
Dec 29 Javascript
jQuery.extend()的实现方式详解及实例
Jun 29 Javascript
JS实现网页标题随机显示名人名言的方法
Nov 03 Javascript
jquery单击事件和双击事件冲突解决方案
Mar 02 Javascript
javascript特殊日历控件分享
Mar 07 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
Dec 26 Javascript
js 用于检测类数组对象的函数方法
May 02 Javascript
在vue项目中使用sass的配置方法
Mar 20 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
Apr 26 jQuery
微信jssdk逻辑在vue中的运用详解
Nov 14 Javascript
详解小程序开发经验:多页面数据同步
May 18 Javascript
怎么使用javascript深度拷贝一个数组
Jun 06 Javascript
前端面试知识点锦集(JavaScript篇)
Dec 28 #Javascript
一句jQuery代码实现返回顶部效果(简单实用)
Dec 28 #Javascript
Web前端框架bootstrap实战【第一次接触使用】
Dec 28 #Javascript
hovertree插件实现二级树形菜单(简单实用)
Dec 28 #Javascript
jQuery如何跳转到另一个网页 就这么简单
Dec 28 #Javascript
基于JS设计12306登录页面
Dec 28 #Javascript
JS实现搜索框文字可删除功能
Dec 28 #Javascript
You might like
外媒评选出10支2020年最受欢迎的Dota2战队
2021/03/05 DOTA
PHP与SQL注入攻击[三]
2007/04/17 PHP
CodeIgniter上传图片成功的全部过程分享
2013/08/12 PHP
Jquery 数据选择插件Pickerbox使用介绍
2012/08/24 Javascript
jquery监听div内容的变化具体实现思路
2013/11/04 Javascript
node.js中的fs.readdir方法使用说明
2014/12/17 Javascript
jQuery CSS3自定义美化Checkbox实现代码
2016/05/12 Javascript
最棒的Angular2表格控件
2016/08/10 Javascript
利用原生js和jQuery实现单选框的勾选和取消操作的方法
2016/09/04 Javascript
JS返回只包含数字类型的数组实例分析
2016/12/16 Javascript
Vue学习笔记之表单输入控件绑定
2017/09/05 Javascript
利用VS Code开发你的第一个AngularJS 2应用程序
2017/12/15 Javascript
Vue form表单动态添加组件实战案例
2019/09/02 Javascript
浅谈Vue3 Composition API如何替换Vue Mixins
2020/04/29 Javascript
JavaScript this关键字指向常用情况解析
2020/09/02 Javascript
JavaScript实现缓动动画
2020/11/25 Javascript
Vue 组件注册全解析
2020/12/17 Vue.js
python 自动化将markdown文件转成html文件的方法
2016/09/23 Python
Python基于scapy实现修改IP发送请求的方法示例
2017/07/08 Python
Tensorflow 自带可视化Tensorboard使用方法(附项目代码)
2018/02/10 Python
tensorflow构建BP神经网络的方法
2018/03/12 Python
Python3内置模块random随机方法小结
2019/07/13 Python
python读取csv文件指定行的2种方法详解
2020/02/13 Python
如何在Python 游戏中模拟引力
2020/03/27 Python
浅析python 定时拆分备份 nginx 日志的方法
2020/04/27 Python
Python urllib2运行过程原理解析
2020/06/04 Python
详解pandas中利用DataFrame对象的.loc[]、.iloc[]方法抽取数据
2020/12/13 Python
HTML5 b和i标记将被赋予真正的语义
2009/07/16 HTML / CSS
日常奢侈品,轻松购物:Verishop
2019/08/20 全球购物
学雷锋活动总结范文
2014/04/25 职场文书
多媒体编辑专业毕业生求职信
2014/06/13 职场文书
行政执法作风整顿剖析材料
2014/10/11 职场文书
考研复习计划
2015/01/19 职场文书
《蚂蚁和蝈蝈》教学反思
2016/02/22 职场文书
Matplotlib可视化之添加让统计图变得简单易懂的注释
2021/06/11 Python
MySQL REVOKE实现删除用户权限
2021/06/18 MySQL