使用原生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 相关文章推荐
javascript英文日期(有时间)选择器
May 02 Javascript
限制文本框输入N个字符的js代码
May 13 Javascript
js判断一个元素是否为另一个元素的子元素的代码
Mar 21 Javascript
给js文件传参数(详解)
Jul 13 Javascript
PHP 数组current和next用法分享
Mar 05 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Apr 01 Javascript
基于JavaScript FileReader上传图片显示本地链接
May 27 Javascript
js中DOM三级列表(代码分享)
Mar 20 Javascript
vue项目中jsonp跨域获取qq音乐首页推荐问题
May 30 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
Sep 27 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
Apr 16 Javascript
JavaScript实现答题评分功能页面
Jun 24 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
php获取本周星期一具体日期的方法
2015/04/20 PHP
php通过前序遍历树实现无需递归的无限极分类
2015/07/10 PHP
详解ThinkPHP3.2.3验证码显示、刷新、校验
2016/12/29 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
推荐20家国外的脚本下载网站
2011/04/28 Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
2012/09/14 Javascript
JavaScript创建一个欢迎cookie弹出窗实现代码
2013/03/15 Javascript
JS去除右边逗号的简单方法
2013/07/03 Javascript
javascript实现继承的简单实例
2015/07/26 Javascript
javascript日期验证之输入日期大于等于当前日期
2015/12/13 Javascript
JavaScript获取当前cpu使用率的方法
2015/12/15 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
2017/02/15 Javascript
js date 格式化
2017/02/15 Javascript
js实现鼠标拖动功能
2017/03/20 Javascript
微信JS SDK接入的几点注意事项(必看篇)
2017/06/23 Javascript
React如何将组件渲染到指定DOM节点详解
2017/09/08 Javascript
安装Node.js并启动本地服务的操作教程
2018/05/12 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
2018/07/20 Javascript
javascript系统时间设置操作示例
2019/06/17 Javascript
layui实现根据table数据判断按钮显示情况的方法
2019/09/26 Javascript
angularjs模态框的使用代码实例
2019/12/20 Javascript
node.js express捕获全局异常的三种方法实例分析
2019/12/27 Javascript
node.js如何操作MySQL数据库
2020/10/29 Javascript
浅谈Python2.6和Python3.0中八进制数字表示的区别
2017/04/28 Python
python numpy中cumsum的用法详解
2019/10/17 Python
Python tkinter三种布局实例详解
2020/01/06 Python
tensorflow之变量初始化(tf.Variable)使用详解
2020/02/06 Python
Myprotein蛋白粉美国官网:欧洲畅销运动营养品牌
2016/11/15 全球购物
莫斯科高科技在线商店:KremlinStore
2019/03/13 全球购物
离职证明范本(5篇)
2014/09/19 职场文书
就业协议书范本
2014/10/08 职场文书
优秀员工事迹材料
2014/12/20 职场文书
担保书范文
2015/01/20 职场文书
物业客服专员岗位职责
2015/04/07 职场文书
2016年班主任新年寄语
2015/08/18 职场文书
webpack介绍使用配置教程详解webpack介绍和使用
2022/06/25 Javascript