【转】封装原生JS实现Ajax
2016-10-31 15:56
435 查看
function createXHR() { if (window.XMLHttpRequest) { //IE7+、Firefox、Opera、Chrome 和Safari return new XMLHttpRequest(); } else if (window.ActiveXObject) { //IE6 及以下 var versions = ['MSXML2.XMLHttp','Microsoft.XMLHTTP']; for (var i = 0,len = versions.length; i<len; i++) { try { return new ActiveXObject(version[i]); break; } catch (e) { //跳过 } } } else { throw new Error('浏览器不支持XHR对象!'); } } var xhr = createXHR(); //创建XHR对象 //封装ajax,参数为一个对象 function ajax(obj) { var xhr = createXHR(); //创建XHR对象 //通过使用JS随机字符串解决IE浏览器第二次默认获取缓存的问题 obj.url = obj.url + '?rand=' + Math.random(); obj.data = params(obj.data); //通过params()将名值对转换成字符串 //若是GET请求,则将数据加到url后面 if (obj.method === 'get') { obj.url += obj.url.indexOf('?') == -1 ? '?' + obj.data : '&' + obj.data; } if (obj.async === true) { //true表示异步,false表示同步 //使用异步调用的时候,需要触发readystatechange 事件 xhr.onreadystatechange = function () { if (xhr.readyState == 4) { //判断对象的状态是否交互完成 callback(); //回调 } }; } //在使用XHR对象时,必须先调用open()方法, //它接受三个参数:请求类型(get、post)、请求的URL和表示是否异步。 xhr.open(obj.method, obj.url, obj.async); if (obj.method === 'post') { //post方式需要自己设置http的请求头,来模仿表单提交。 //放在open方法之后,send方法之前。 xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); xhr.send(obj.data); //post方式将数据放在send()方法里 } else { xhr.send(null);//get方式则填null } if (obj.async === false) { //同步 callback(); } function callback() { if (xhr.status == 200) { //判断http的交互是否成功,200表示成功 obj.success(xhr.responseText); //回调传递参数 } else { alert('获取数据错误!错误代号:' + xhr.status + ',错误信息:' + xhr.statusText); } } } //名值对转换为字符串 function params(data) { var arr = []; for (var i in data) { //特殊字符传参产生的问题可以使用encodeURIComponent()进行编码处理 arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i])); } return arr.join('&'); }
使用方式:
ajax({ method : 'post', url : 'demo.php', data : { 'name' : 'JR', 'age' : 22 }, success : function (message) { alert(message); }, async : true });
相关文章推荐
- javascript - 封装原生js实现ajax
- 原生js封装ajax,实现跨域请求
- 原生js实现对Ajax的封装(仿jquery)
- 原生js实现对Ajax的封装(模仿jquery)
- JS基础【原生JS实现的AJAX发送GET、POST】
- 原生Js实现按的数据源均分时间点幻灯片效果(已封装)
- js实现对ajax请求面向对象的封装
- js锁屏解屏通过对$.ajax进行封装实现
- 原生JS实现Ajax
- 原生js实现ajax用于简单的签到或登录
- js实现对ajax请求面向对象的封装
- 原生js方式实现ajax,并仿jquery方式简单调用
- 自己封装的纯js实现ajax
- 原生JS封装Ajax插件(同域&&jsonp跨域)
- Jquery揭秘系列:ajax原生js实现详解(推荐)
- js原生创建封装ajax的方法,附XMLHttpRequest状态码
- 【Javascript】原生js实现ajax功能
- Jquery揭秘系列:ajax原生js实现
- JS实现ajax 封装成方法
- Ajax原理及用原生js实现Ajax应用