// 使用原生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" : "dem0o.php","data" : {"name" : "gaga","age" : 10000000,"num" : "12346&598"},"success" : function(data){alert(data);},"Error" : function(text){alert(text);},"async" : false});
}

  

转载于:https://www.cnblogs.com/ChivanTam/p/5082069.html

使用原生js写ajax相关推荐

  1. 原生JS写Ajax的请求函数

    本文主要介绍了如何通过原生JavaScript封装ajax请求,文中给出了具体的实现代码和详细的解释,希望对你有所帮助. 一.JS原生Ajax ajax:一种请求数据的方式,不需要刷新整个页面: aj ...

  2. 原声ajax发送post请求,原生JS实现ajax 发送post请求

    1. [代码]原生JS实现ajax 发送post请求 var oStr = ''; var postData = {}; var oAjax = null; //post提交的数据 postData ...

  3. java原生的ajax怎么写,用原生js实现 ajax方法

    原标题:用原生js实现 ajax方法 作者介绍:咔拉宝宝前端工程师,致力于首个情景式购物商城咔拉商城的前端搭建,在咔拉职场栏目作为程序猿担当,与读者朋友们共同探讨前端开发的那些事. 一.ajax介绍: ...

  4. 原生JS封装ajax方法

    http://blog.sucaijiayuan.com/article/89 jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只 ...

  5. Ajax工作原理和原生JS的ajax封装

    前言: 之所以用ajax作为博客的开篇,是因为无论从ajax的出现还是从它的作用上来说,ajax对于前端无疑是意义重大的.甚至可以说,是ajax带来了前端这个行业.当然,历史并不能说明当下,曾经的辉煌 ...

  6. js原生ajax跨域请求,封装一个原生js的ajax请求,支持IE9CORS跨域请求

    前言 关于纯js的ajax请求,我之前有文章写过, https://www.haorooms.com/post/js_ajax_chun , 关于CORS跨域资源共享,我也有文章写过, https:/ ...

  7. 原生ajax如何跨域,封装一个原生js的ajax请求,支持IE9CORS跨域请求

    前言 关于纯js的ajax请求,我之前有文章写过,https://www.haorooms.com/post/js_ajax_chun, 关于CORS跨域资源共享,我也有文章写过,https://ww ...

  8. js 封装ajax方法吗,原生JS封装ajax方法

    jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只需要ajax,这时引入jquery库会造成资源浪费,也会显得页面臃肿.这时我们就 ...

  9. 原生js的Ajax实例

    与jQuery不同,原生js的ajax的实现相比来说复杂一些,因为jquery中的$.ajax()方法已经把js的实现封装起来,使用起来更加方便.但是,原生js的实现过程,对于理解ajax,好像更清晰 ...

最新文章

  1. 四种Java线程池用法解析
  2. mysql可视化_可视化图形工具-grafana直接显示mysql数据(BI展现)
  3. 修改ubuntu崩溃转储的设置
  4. mysql 时间差函数 timestampdiff datediff 简介
  5. LA4238 Area of Polycubes(立方体的表面积)
  6. Swift 开源精选-v1.0(进阶篇)
  7. jmap之使用说明与JVM配置
  8. SilverLight4.0数据验证IDataErrorInfo, INotifyDataErrorInfo[转]
  9. opencv_python关于Qt的错误
  10. 【每日SQL打卡】​​​​​​​​​​​​​​​DAY 20丨查询结果的质量和占比【难度简单】​
  11. python 5的倍数_查找所有低于1000的数字的和,这是Python中3或5的倍数
  12. 03MFC的ODBC类简介
  13. Eclipse下maven使用嵌入式(Embedded)Neo4j创建Hello World项目
  14. 2006年 上半年 网络管理员 下午试卷
  15. c语言实验二作业,C语言实验作业8 - osc_5p0xffsa的个人空间 - OSCHINA - 中文开源技术交流社区...
  16. 毕业设计之校园一卡通管理系统的设计与实现
  17. 木马的远程控制和清除 实验
  18. acwing-提高课
  19. Ubuntu设置下载源
  20. 数据库number 对应java_数据库中的number型表示什么

热门文章

  1. react 引入 mobx @babel/core: 7.2.2
  2. Haproxy+多台MySQL从服务器(Slave) 实现负载均衡
  3. 旗正规则引擎内存表出错的原因及解决方法
  4. 微软2014编程之美初赛第一场——题目3 : 活动中心
  5. teamviewer 过期解决办法
  6. Exchange Powershell查看用户最后登陆邮箱时间
  7. STB 上Linux软件系统解决方案
  8. 打造个性化的Internet Explorer
  9. java学习(七)java中抽象类及 接口
  10. redux中间件的用法