使用原生js写ajax实例(推荐)


Posted in Javascript onMay 31, 2017

实例如下:

// 使用原生js 封装ajax
// 兼容xhr对象
function createXHR(){
  if(typeof XMLHttpRequest != "undefined"){ // 非IE6浏览器
    return new XMLHttpRequest();
  }else if(typeof ActiveXObject != "undefined"){  // IE6浏览器
    var version = [
          "MSXML2.XMLHttp.6.0",
          "MSXML2.XMLHttp.3.0",
          "MSXML2.XMLHttp",
    ];
    for(var i = 0; i < version.length; i++){
      try{
        return new ActiveXObject(version[i]);
      }catch(e){
        //跳过
      }
    }
  }else{
    throw new Error("您的系统或浏览器不支持XHR对象!");
  }
}
// 转义字符
function params(data){
  var arr = [];
  for(var i in data){
    arr.push(encodeURIComponent(i) + "=" + encodeURIComponent(data[i]));
  }
  return arr.join("&");
}
// 封装ajax
function ga_ajax(obj){
  var xhr = createXHR();
  obj.url = obj.url + "?rand=" + Math.random(); // 清除缓存
  obj.data = params(obj.data);   // 转义字符串
  if(obj.method === "get"){   // 判断使用的是否是get方式发送
    obj.url += obj.url.indexOf("?") == "-1" ? "?" + obj.data : "&" + obj.data;
  }
  // 异步
  if(obj.async === true){
    // 异步的时候需要触发onreadystatechange事件
    xhr.onreadystatechange = function(){
      // 执行完成
      if(xhr.readyState == 4){
        callBack();
      }
    }
  }
  xhr.open(obj.method,obj.url,obj.async); // false是同步 true是异步 // "demo.php?rand="+Math.random()+"&name=ga&ga",
  if(obj.method === "post"){
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xhr.send(obj.data);
  }else{
    xhr.send(null);
  }
  // xhr.abort(); // 取消异步请求
  // 同步
  if(obj.async === false){
    callBack();
  }
  // 返回数据
  function callBack(){
    // 判断是否返回正确
    if(xhr.status == 200){
      obj.success(xhr.responseText);
    }else{
      obj.Error("获取数据失败,错误代号为:"+xhr.status+"错误信息为:"+xhr.statusText);
    }
  }
}

var html = document.getElementsByTagName("html")[0];
html.onclick = function(){
  ga_ajax({
    "method" : "post",
    "url" : "demo.php",
    "data" : {
      "name" : "gao",
      "age" : 100,
      "num" : "12346&598"
    },
    "success" : function(data){
      alert(data);
    },
    "Error" : function(text){
      alert(text);
    },
    "async" : false
  });
}

以上这篇使用原生js写ajax实例(推荐)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的多彩百分比 动态进度条 投票效果显示效果实现代码
Aug 28 Javascript
浅析LigerUi开发中谨慎载入common.css文件
Jul 09 Javascript
javascript 中的 delete及delete运算符
Nov 15 Javascript
javascript html5实现表单验证
Mar 01 Javascript
JavaScript lodash常见用法系列小结
Aug 24 Javascript
Javascript动画效果(3)
Oct 11 Javascript
浅谈react.js 之 批量添加与删除功能
Apr 17 Javascript
浅谈vue-router 路由传参的方法
Dec 27 Javascript
Vue实现点击时间获取时间段查询功能
Aug 21 Javascript
微信小程序公用参数与公用方法用法示例
Jan 09 Javascript
JS实现的检验身份证格式并输出出生日期,年龄,性别,出生地示例
May 17 Javascript
基于vue实现圆形菜单栏组件
Jul 05 Javascript
Javascript创建类和对象详解
May 31 #Javascript
Javascript继承机制详解
May 30 #Javascript
Vue2.x中的Render函数详解
May 30 #Javascript
jQuery实现动态删除LI的方法
May 30 #jQuery
Vue.js实现在下拉列表区域外点击即可关闭下拉列表的功能(自定义下拉列表)
May 30 #Javascript
JS给按钮添加跳转功能类似a标签
May 30 #Javascript
jQuery异步提交表单实例
May 30 #jQuery
You might like
浅谈电磁辐射对健康的影响
2021/03/01 无线电
基于PHP开发中的安全防范知识详解
2013/06/06 PHP
php5.5新数组函数array_column使用
2013/07/08 PHP
php抽象类使用要点与注意事项分析
2015/02/09 PHP
PHP 并发场景的几种解决方案
2019/06/14 PHP
jQuery代码优化之基本事件
2011/11/01 Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
2013/05/05 Javascript
中文路径导致unitpngfix.js不正常的解决方法
2013/06/26 Javascript
window.location.href的用法(动态输出跳转)
2014/08/09 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
2015/01/28 Javascript
JS for循环中i++ 和 ++i的区别介绍
2016/07/20 Javascript
基于Layer+jQuery的自定义弹框
2020/05/26 Javascript
深入解析ES6中的promise
2018/11/08 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
2019/03/31 Javascript
前端Vue项目详解--初始化及导航栏
2019/06/24 Javascript
layui多iframe页面控制定时器运行的方法
2019/09/05 Javascript
Javascript操作select控件代码实例
2020/02/14 Javascript
[07:31]DOTA2卡尔工作室 英雄介绍主宰篇
2013/06/25 DOTA
[01:02:25]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS VG
2014/05/25 DOTA
[36:02]DOTA2上海特级锦标赛D组小组赛#2 Liquid VS VP第一局
2016/02/28 DOTA
Python中使用多进程来实现并行处理的方法小结
2017/08/09 Python
在PyCharm导航区中打开多个Project的关闭方法
2019/01/17 Python
Python操作配置文件ini的三种方法讲解
2019/02/22 Python
Pandas删除数据的几种情况(小结)
2019/06/21 Python
Python 元组操作总结
2019/09/18 Python
Python面向对象之私有属性和私有方法应用案例分析
2019/12/31 Python
解析PyCharm Python运行权限问题
2020/01/08 Python
国际化的太阳镜及太阳镜配件零售商:Sunglass Hut
2016/07/26 全球购物
松下电器美国官方商店:Panasonic美国
2016/10/14 全球购物
viagogo法国票务平台:演唱会、体育比赛、戏剧门票
2017/03/27 全球购物
英语自荐信常用语句
2013/12/13 职场文书
终止合同协议书
2014/04/17 职场文书
2014年教师工作总结
2014/11/10 职场文书
2015年惩防体系建设工作总结
2015/05/22 职场文书
2019思想汇报范文
2019/05/21 职场文书
2019学生会干事辞职信
2019/06/27 职场文书