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操作table示例(个人心得)
Nov 29 Javascript
JS计算网页停留时间代码
Apr 28 Javascript
AngularJS中的Directive自定义一个表格
Jan 25 Javascript
javascript RegExp 使用说明
May 21 Javascript
js中的eval()函数把含有转义字符的字符串转换成Object对象的方法
Dec 02 Javascript
Ajax基础知识详解
Feb 17 Javascript
JS通过调用微信API实现微信支付功能的方法示例
Jun 29 Javascript
bootstrap-table实现服务器分页的示例 (spring 后台)
Sep 01 Javascript
uni-app之APP和小程序微信授权方法
May 09 Javascript
JS+CSS+HTML实现“代码雨”类似黑客帝国文字下落效果
Mar 17 Javascript
js观察者模式的弹幕案例
Nov 23 Javascript
ES6字符串的扩展实例
Dec 21 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
php开发工具之vs2005图解
2008/01/12 PHP
Gregarius中文日期格式问题解决办法
2008/04/22 PHP
shopex中集成的站长统计功能的代码简单分析
2011/08/11 PHP
php常用字符串比较函数实例汇总
2014/11/24 PHP
laravel如何开启跨域功能示例详解
2017/08/31 PHP
PHP中通过getopt解析GNU C风格命令行选项
2019/11/18 PHP
div浮层,滚动条移动,位置保持不变的4种方法汇总
2013/12/11 Javascript
使用typeof方法判断undefined类型
2014/09/09 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
41个Web开发者必须收藏的JavaScript实用技巧
2016/07/22 Javascript
探讨跨域请求资源的几种方式(总结)
2016/12/02 Javascript
JavaScript使用readAsDataUrl方法预览图片
2017/05/10 Javascript
详解NODEJS基于FFMPEG视频推流测试
2017/11/17 NodeJs
详解NodeJs开发微信公众号
2018/05/25 NodeJs
利用chrome浏览器进行js调试并找出元素绑定的点击事件详解
2021/01/30 Javascript
Vue.js实现开发购物车功能的方法详解
2019/02/22 Javascript
vue中利用Promise封装jsonp并调取数据
2019/06/18 Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
2019/08/29 Javascript
Vue自定义表单内容检查rules实例
2020/10/30 Javascript
python获取文件后缀名及批量更新目录下文件后缀名的方法
2014/11/11 Python
Python解惑之整数比较详解
2017/04/24 Python
python简单图片操作:打开\显示\保存图像方法介绍
2017/11/23 Python
对python过滤器和lambda函数的用法详解
2019/01/21 Python
python实现视频分帧效果
2019/05/31 Python
pycharm修改文件的默认打开方式的步骤
2019/07/29 Python
CSS3实现苹果手机解锁的字体闪亮效果示例
2021/01/05 HTML / CSS
微信小程序canvas实现水平、垂直居中效果
2020/02/05 HTML / CSS
美国领先的水果篮送货公司和新鲜水果供应商:The Fruit Company
2018/02/13 全球购物
管理学专业个人求职信范文
2013/09/21 职场文书
个人实用的自我评价范文
2013/11/23 职场文书
英文道歉信
2015/01/20 职场文书
幼儿园开学家长寄语(2016秋季)
2015/12/03 职场文书
2016学习全国教书育人楷模先进事迹心得体会
2016/01/21 职场文书
面试被问select......for update会锁表还是锁行
2021/11/11 MySQL
PYTHON 使用 Pandas 删除某列指定值所在的行
2022/04/28 Python
教你如何用cmd快速登录服务器
2022/06/10 Servers