使用原生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 相关文章推荐
在线编辑器中换行与内容自动提取
Apr 24 Javascript
JavaScript中__proto__与prototype的关系深入理解
Dec 04 Javascript
Javascript图像处理—亮度对比度应用案例
Jan 03 Javascript
js打开windows上的可执行文件示例
May 27 Javascript
JavaScript获取图片真实大小代码实例
Sep 24 Javascript
js动态修改表格行colspan列跨度的方法
Mar 30 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
Aug 05 Javascript
JavaScript数组去重的五种方法
Nov 05 Javascript
JavaScript原生对象常用方法总结(推荐)
May 13 Javascript
Angular2学习教程之组件中的DOM操作详解
May 28 Javascript
Vue渲染过程浅析
Mar 14 Javascript
Javascript异步编程async实现过程详解
Apr 02 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中的超全局变量
2006/10/09 PHP
PHP下MAIL的另一解决方案
2006/10/09 PHP
mysql_num_rows VS COUNT 效率问题分析
2011/04/23 PHP
解析PHP将对象转换成数组的方法(兼容多维数组类型)
2013/06/21 PHP
ThinkPHP CURD方法之field方法详解
2014/06/18 PHP
php使用cookie实现记住登录状态
2015/04/27 PHP
PHP按符号截取字符串的指定部分的实现方法
2018/09/10 PHP
总结PHP中初始化空数组的最佳方法
2019/02/13 PHP
从ThinkPHP3.2.3过渡到ThinkPHP5.0学习笔记图文详解
2019/04/03 PHP
关于Mozilla浏览器不支持innerText的解决办法
2011/01/01 Javascript
JavaScript中用于生成随机数的Math.random()方法
2015/06/15 Javascript
nodejs个人博客开发第七步 后台登陆
2017/04/12 NodeJs
vue2.0页面前进刷新回退不刷新的实现方法
2018/07/31 Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
2019/01/24 jQuery
原生javascript自定义input[type=radio]效果示例
2019/08/27 Javascript
Node.js系列之安装配置与基本使用(1)
2019/08/30 Javascript
修改vue源码实现动态路由缓存的方法
2020/01/21 Javascript
python thread 并发且顺序运行示例
2009/04/09 Python
Python版微信红包分配算法
2015/05/04 Python
Python中的命令行参数解析工具之docopt详解
2017/03/27 Python
使用Python从零开始撸一个区块链
2018/03/14 Python
python 3调用百度OCR API实现剪贴板文字识别
2018/09/04 Python
Python 运行 shell 获取输出结果的实例
2019/01/07 Python
解决在Python编辑器pycharm中程序run正常debug错误的问题
2019/01/17 Python
PyQt4实时显示文本内容GUI的示例
2019/06/14 Python
python爬虫爬取淘宝商品比价(附淘宝反爬虫机制解决小办法)
2020/12/03 Python
Python: glob匹配文件的操作
2020/12/11 Python
CSS实现限制字数功能当对象内文本溢出时显示省略标记
2014/08/20 HTML / CSS
什么是虚拟内存?虚拟内存有什么优势?
2012/02/19 面试题
大学生简历中个人的自我评价
2013/10/06 职场文书
施工质量承诺书范文
2014/05/30 职场文书
房屋买卖委托书格式范本格式
2014/10/13 职场文书
道德模范事迹材料
2014/12/20 职场文书
pytorch 如何使用float64训练
2021/05/24 Python
日本官方排名前10的动漫,名侦探柯南上榜,第一是一部创造历史的动漫
2022/03/18 日漫
Java 深入探究讲解简单工厂模式
2022/04/07 Java/Android