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 相关文章推荐
JavaScript在IE中“意外地调用了方法或属性访问”
Nov 19 Javascript
js鼠标左右键 键盘值小结
Jun 11 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
Feb 26 Javascript
浅谈JavaScript字符串拼接
Jun 25 Javascript
JavaScript中Null与Undefined的区别解析
Jun 30 Javascript
JavaScript forEach()遍历函数使用及介绍
Jul 08 Javascript
js时间戳转为日期格式的方法
Dec 28 Javascript
jQuery为动态生成的select元素添加事件的方法
Aug 29 Javascript
AngularJs 国际化(I18n/L10n)详解
Sep 01 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
May 16 Javascript
layui use 定义js外部引用函数的方法
Sep 26 Javascript
详解如何使用Node.js实现热重载页面
May 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
自己动手,丰衣足食 - 短波框形天线制作
2021/03/01 无线电
一个php作的文本留言本的例子(三)
2006/10/09 PHP
php线性表顺序存储实现代码(增删查改)
2012/02/16 PHP
Yii2框架RESTful API 格式化响应,授权认证和速率限制三部分详解
2016/11/10 PHP
redis查看连接数及php模拟并发创建redis连接的方法
2016/12/15 PHP
thinkphp3.2实现跨控制器调用其他模块的方法
2017/03/14 PHP
老生常谈PHP面向对象之解释器模式
2017/05/17 PHP
PHP设计模式之观察者模式定义与用法示例
2018/08/04 PHP
php7 错误处理机制修改实例分析
2020/05/25 PHP
比较全面的event对像在IE与FF中的区别 推荐
2009/09/21 Javascript
javascript或asp实现的判断身份证号码是否正确两种验证方法
2009/11/26 Javascript
Extjs优化(一)删除冗余代码提高运行速度
2013/04/15 Javascript
js中 计算两个日期间的工作日的简单实例
2016/08/08 Javascript
自定义事件解决重复请求BUG的问题
2017/07/11 Javascript
react redux入门示例
2018/04/19 Javascript
Node.js之readline模块的使用详解
2019/03/25 Javascript
python中ASCII码和字符的转换方法
2018/07/09 Python
Python面向对象之接口、抽象类与多态详解
2018/08/27 Python
Python读取YUV文件,并显示的方法
2018/12/04 Python
Django如何开发简单的查询接口详解
2019/05/17 Python
Python3 列表,数组,矩阵的相互转换的方法示例
2019/08/05 Python
Python的bit_length函数来二进制的位数方法
2019/08/27 Python
使用Tensorflow将自己的数据分割成batch训练实例
2020/01/20 Python
Python 读取xml数据,cv2裁剪图片实例
2020/03/10 Python
python Paramiko使用示例
2020/09/21 Python
Python classmethod装饰器原理及用法解析
2020/10/17 Python
东芝官网商城:还原日式美学,打造美好生活
2018/12/27 全球购物
维也纳通行证:Vienna PASS
2019/07/18 全球购物
小学运动会班级口号
2014/06/09 职场文书
中班下学期幼儿评语
2014/12/30 职场文书
教代会闭幕词
2015/01/28 职场文书
2015年计生协会工作总结
2015/04/24 职场文书
2015婚礼主持词开场白
2015/05/28 职场文书
婚宴新娘致辞
2015/07/28 职场文书
《蚂蚁和蝈蝈》教学反思
2016/02/22 职场文书
争做文明公民倡议书
2019/06/24 职场文书