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 触发HTML元素绑定的函数
Sep 11 Javascript
统计出现最多的字符次数的js代码
Dec 03 Javascript
editable.js 基于jquery的表格的编辑插件
Oct 24 Javascript
jquery解决图片路径不存在执行替换路径
Feb 06 Javascript
七个很有意思的PHP函数
May 12 Javascript
AngularJS directive返回对象属性详解
Mar 28 Javascript
javascript事件模型介绍
May 31 Javascript
weui框架实现上传、预览和删除图片功能代码
Aug 24 Javascript
Angular-UI Bootstrap组件实现警报功能
Jul 16 Javascript
JavaScript设计模式之工厂模式和抽象工厂模式定义与用法分析
Jul 26 Javascript
vue 解决在微信内置浏览器中调用支付宝支付的情况
Nov 09 Javascript
vue实现滑动解锁功能
Mar 03 Vue.js
前端面试知识点锦集(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数组排序函数合集 以及它们之间的联系分析
2013/06/27 PHP
js 目录列举函数
2008/11/06 Javascript
初试jQuery EasyUI 使用介绍
2010/04/01 Javascript
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
2013/04/15 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
2014/01/07 Javascript
JS+CSS模拟可以无刷新显示内容的留言板实例
2015/03/03 Javascript
在JavaScript中正确引用bind方法的应用
2015/05/11 Javascript
浅析2种JavaScript继承方式
2015/12/04 Javascript
Bootstrap基本样式学习笔记之表格(2)
2016/12/07 Javascript
JavaScript基本类型值-Number类型
2017/02/24 Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
2017/03/04 Javascript
在javaScript中检测数据类型的几种方式小结
2017/03/04 Javascript
JS仿淘宝搜索框用户输入事件的实现
2017/06/19 Javascript
利用js给datalist或select动态添加option选项的方法
2018/01/25 Javascript
Bootstrap-table使用footerFormatter做统计列功能
2018/09/07 Javascript
node app 打包工具pkg的具体使用
2019/01/17 Javascript
js回文数的4种判断方法示例
2019/06/04 Javascript
Vue动态生成表格的行和列
2019/07/18 Javascript
webpack 最佳配置指北(推荐)
2020/01/07 Javascript
Javascript var变量删除原理及实现
2020/08/26 Javascript
uni-app 自定义底部导航栏的实现
2020/12/11 Javascript
[00:32]10月24、25日 辉夜杯外卡赛附加赛开赛!
2015/10/23 DOTA
[02:44]完美大师赛主赛事淘汰赛第二日观众采访
2017/11/24 DOTA
利用numpy和pandas处理csv文件中的时间方法
2018/04/19 Python
python 统计一个列表当中的每一个元素出现了多少次的方法
2018/11/14 Python
Python 3 判断2个字典相同
2019/08/06 Python
Python中低维数组填充高维数组的实现
2019/12/02 Python
利用CSS3的特性改变文本选中时的颜色
2013/09/11 HTML / CSS
美国家具网站:Cymax
2016/09/17 全球购物
咖啡店的创业计划书,让你hold不住
2014/01/03 职场文书
旅游市场营销方案
2014/03/09 职场文书
管理建议书范文
2014/05/13 职场文书
活动宣传策划方案
2014/05/23 职场文书
真诚的求职信
2014/07/04 职场文书
商务英语求职信范文
2015/03/19 职场文书
方法汇总:Python 安装第三方库常用
2022/04/26 Python