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 相关文章推荐
jquery左右滚动焦点图banner图片鼠标经过显示上下页按钮
Oct 11 Javascript
JavaScript原型链示例分享
Jan 26 Javascript
Javascript原型链和原型的一个误区
Oct 22 Javascript
《JavaScript DOM 编程艺术》读书笔记之JavaScript 图片库
Jan 09 Javascript
JS实现文档加载完成后执行代码
Jul 09 Javascript
JS 全屏和退出全屏详解及实例代码
Nov 07 Javascript
bootstrap表单示例代码分享
May 18 Javascript
React组件中的this的具体使用
Feb 28 Javascript
Less 安装及基本用法
May 05 Javascript
Vue瀑布流插件的使用示例
Sep 19 Javascript
Bootstrap的aria-label和aria-labelledby属性实例详解
Nov 02 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
Apr 07 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生成缩略图的函数代码(修改版)
2011/01/18 PHP
php格式输出文件var_export函数实例
2014/11/15 PHP
WordPress主题制作中自定义头部的相关PHP函数解析
2016/01/08 PHP
php gd等比例缩放压缩图片函数
2016/06/12 PHP
javascript 常用代码技巧大收集
2009/02/25 Javascript
js简单实现点击左右运动的方法
2015/04/10 Javascript
servlet+jquery实现文件上传进度条示例代码
2017/01/25 Javascript
浅谈JS中的常用选择器及属性、方法的调用
2017/07/28 Javascript
微信小程序云开发之使用云函数
2019/05/17 Javascript
vue实现绑定事件的方法实例代码详解
2019/06/20 Javascript
微信小程序之侧边栏滑动实现过程解析(附完整源码)
2019/08/23 Javascript
基于javascript实现移动端轮播图效果
2020/12/21 Javascript
[01:09]DOTAPLUS——DOTA2的新时代
2018/04/04 DOTA
python清除字符串里非数字字符的方法
2015/07/02 Python
Python多线程爬虫简单示例
2016/03/04 Python
Python回文字符串及回文数字判定功能示例
2018/03/20 Python
python实现pdf转换成word/txt纯文本文件
2018/06/07 Python
python打包exe开机自动启动的实例(windows)
2019/06/28 Python
python对Excel按条件进行内容补充(推荐)
2019/11/24 Python
使用tqdm显示Python代码执行进度功能
2019/12/08 Python
python数据库开发之MongoDB安装及Python3操作MongoDB数据库详细方法与实例
2020/03/18 Python
解决flask接口返回的内容中文乱码的问题
2020/04/03 Python
python能做哪些生活有趣的事情
2020/09/09 Python
欧舒丹俄罗斯官方网站:L’OCCITANE俄罗斯
2019/11/22 全球购物
成人大专自我鉴定范文
2013/10/19 职场文书
中专毕业生自我鉴定范文
2013/11/09 职场文书
反对四风自我剖析材料
2014/10/07 职场文书
事业单位年度考核个人总结
2015/02/12 职场文书
好好学习保证书
2015/02/26 职场文书
研讨会致辞
2015/07/31 职场文书
高中体育课教学反思
2016/02/16 职场文书
JS不要再到处使用绝对等于运算符了
2021/04/30 Javascript
python 爬取哔哩哔哩up主信息和投稿视频
2021/06/07 Python
一行Python命令实现批量加水印
2022/04/07 Python
Python使用socket去实现TCP客户端和TCP服务端
2022/04/12 Python
MySQL远程无法连接的一些常见原因总结
2022/09/23 MySQL