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 指导方针
Apr 05 Javascript
让图片旋转任意角度及JQuery插件使用介绍
Mar 20 Javascript
jQuery Masonry瀑布流插件使用详解
Nov 17 Javascript
JavaScript动态改变表格单元格内容的方法
Mar 30 Javascript
jQuery动画效果实现图片无缝连续滚动
Jan 12 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
Jun 14 Javascript
解析JavaScript中的字符串类型与字符编码支持
Jun 24 Javascript
基于Vue2的移动端开发环境搭建详解
Nov 03 Javascript
js设置文字颜色的方法示例
Dec 30 Javascript
JS逻辑运算符短路操作实例分析
Jul 09 Javascript
Node.js如何对SQLite的async/await封装详解
Feb 14 Javascript
基于AngularJS拖拽插件ngDraggable.js实现拖拽排序功能
Apr 02 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获取客户端电脑屏幕参数的方法
2015/01/09 PHP
CodeIgniter分页类pagination使用方法示例
2016/03/28 PHP
PHP实现冒泡排序的简单实例
2016/05/26 PHP
PHP防止图片盗用(盗链)的方法小结
2016/11/11 PHP
DWZ+ThinkPHP开发时遇到的问题分析
2016/12/12 PHP
yii2.0框架数据库操作简单示例【添加,修改,删除,查询,打印等】
2020/04/13 PHP
javascript监听鼠标滚轮事件浅析
2014/06/05 Javascript
jQuery中[attribute*=value]选择器用法实例
2014/12/31 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
2015/08/30 Javascript
AngularJS 中使用Swiper制作滚动图不能滑动的解决方法
2016/11/15 Javascript
浅谈js算法和流程控制
2016/12/29 Javascript
canvas实现图像截取功能
2017/02/06 Javascript
JavaScript设计模式之构造函数模式实例教程
2018/07/02 Javascript
微信小程序实现顶部下拉菜单栏
2018/11/04 Javascript
vue-cli3全面配置详解
2018/11/14 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
2019/05/07 Javascript
layui实现数据表格table分页功能(ajax异步)
2019/07/27 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
2020/07/23 Javascript
JavaScript实现4位随机验证码的生成
2021/01/28 Javascript
详解Python3.1版本带来的核心变化
2015/04/07 Python
在Linux系统上通过uWSGI配置Nginx+Python环境的教程
2015/12/25 Python
Python Sqlite3以字典形式返回查询结果的实现方法
2016/10/03 Python
Python正则表达式如何进行字符串替换实例
2016/12/28 Python
Python 多进程和数据传递的理解
2017/10/09 Python
python生成随机图形验证码详解
2017/11/08 Python
Python处理文本换行符实例代码
2018/02/03 Python
python中append函数用法讲解
2020/12/11 Python
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
2019/01/23 HTML / CSS
什么是数据抽象
2016/11/26 面试题
自考生毕业自我鉴定
2013/10/10 职场文书
热爱祖国演讲稿
2014/05/04 职场文书
个人查摆问题自查报告
2014/10/16 职场文书
计算机专业自荐信
2015/03/05 职场文书
农业项目投资意向书
2015/05/09 职场文书
2015年高三班主任工作总结
2015/05/21 职场文书
《家世》读后感:看家训的力量
2019/12/30 职场文书