使用原生js写ajax
// 使用原生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相关推荐
- 原生JS写Ajax的请求函数
本文主要介绍了如何通过原生JavaScript封装ajax请求,文中给出了具体的实现代码和详细的解释,希望对你有所帮助. 一.JS原生Ajax ajax:一种请求数据的方式,不需要刷新整个页面: aj ...
- 原声ajax发送post请求,原生JS实现ajax 发送post请求
1. [代码]原生JS实现ajax 发送post请求 var oStr = ''; var postData = {}; var oAjax = null; //post提交的数据 postData ...
- java原生的ajax怎么写,用原生js实现 ajax方法
原标题:用原生js实现 ajax方法 作者介绍:咔拉宝宝前端工程师,致力于首个情景式购物商城咔拉商城的前端搭建,在咔拉职场栏目作为程序猿担当,与读者朋友们共同探讨前端开发的那些事. 一.ajax介绍: ...
- 原生JS封装ajax方法
http://blog.sucaijiayuan.com/article/89 jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只 ...
- Ajax工作原理和原生JS的ajax封装
前言: 之所以用ajax作为博客的开篇,是因为无论从ajax的出现还是从它的作用上来说,ajax对于前端无疑是意义重大的.甚至可以说,是ajax带来了前端这个行业.当然,历史并不能说明当下,曾经的辉煌 ...
- js原生ajax跨域请求,封装一个原生js的ajax请求,支持IE9CORS跨域请求
前言 关于纯js的ajax请求,我之前有文章写过, https://www.haorooms.com/post/js_ajax_chun , 关于CORS跨域资源共享,我也有文章写过, https:/ ...
- 原生ajax如何跨域,封装一个原生js的ajax请求,支持IE9CORS跨域请求
前言 关于纯js的ajax请求,我之前有文章写过,https://www.haorooms.com/post/js_ajax_chun, 关于CORS跨域资源共享,我也有文章写过,https://ww ...
- js 封装ajax方法吗,原生JS封装ajax方法
jquery框架的ajax方法固然好用,但是假如某天我们的项目不能引入jquery或项目需求很简单,没有很多交互功能,只需要ajax,这时引入jquery库会造成资源浪费,也会显得页面臃肿.这时我们就 ...
- 原生js的Ajax实例
与jQuery不同,原生js的ajax的实现相比来说复杂一些,因为jquery中的$.ajax()方法已经把js的实现封装起来,使用起来更加方便.但是,原生js的实现过程,对于理解ajax,好像更清晰 ...
最新文章
- 四种Java线程池用法解析
- mysql可视化_可视化图形工具-grafana直接显示mysql数据(BI展现)
- 修改ubuntu崩溃转储的设置
- mysql 时间差函数 timestampdiff datediff 简介
- LA4238 Area of Polycubes(立方体的表面积)
- Swift 开源精选-v1.0(进阶篇)
- jmap之使用说明与JVM配置
- SilverLight4.0数据验证IDataErrorInfo, INotifyDataErrorInfo[转]
- opencv_python关于Qt的错误
- 【每日SQL打卡】​​​​​​​​​​​​​​​DAY 20丨查询结果的质量和占比【难度简单】​
- python 5的倍数_查找所有低于1000的数字的和,这是Python中3或5的倍数
- 03MFC的ODBC类简介
- Eclipse下maven使用嵌入式(Embedded)Neo4j创建Hello World项目
- 2006年 上半年 网络管理员 下午试卷
- c语言实验二作业,C语言实验作业8 - osc_5p0xffsa的个人空间 - OSCHINA - 中文开源技术交流社区...
- 毕业设计之校园一卡通管理系统的设计与实现
- 木马的远程控制和清除 实验
- acwing-提高课
- Ubuntu设置下载源
- 数据库number 对应java_数据库中的number型表示什么