首页 > 代码库 > 【转】封装原生JS实现Ajax
【转】封装原生JS实现Ajax
1 function createXHR() { 2 if (window.XMLHttpRequest) { 3 //IE7+、Firefox、Opera、Chrome 和Safari 4 return new XMLHttpRequest(); 5 } else if (window.ActiveXObject) { 6 //IE6 及以下 7 var versions = [‘MSXML2.XMLHttp‘,‘Microsoft.XMLHTTP‘]; 8 for (var i = 0,len = versions.length; i<len; i++) { 9 try { 10 return new ActiveXObject(version[i]); 11 break; 12 } catch (e) { 13 //跳过 14 }15 } 16 } else { 17 throw new Error(‘浏览器不支持XHR对象!‘); 18 }19 }20 21 var xhr = createXHR(); //创建XHR对象22 //封装ajax,参数为一个对象23 function ajax(obj) { 24 var xhr = createXHR(); 25 //创建XHR对象 //通过使用JS随机字符串解决IE浏览器第二次默认获取缓存的问题 26 obj.url = obj.url + ‘?rand=‘ + Math.random(); 27 obj.data = http://www.mamicode.com/params(obj.data); //通过params()将名值对转换成字符串 28 //若是GET请求,则将数据加到url后面29 if (obj.method === ‘get‘) { 30 obj.url += obj.url.indexOf(‘?‘) == -1 ? ‘?‘ + obj.data : ‘&‘ + obj.data;31 }32 33 if (obj.async === true) { 34 //true表示异步,false表示同步 35 //使用异步调用的时候,需要触发readystatechange 事件36 xhr.onreadystatechange = function () { 37 if (xhr.readyState == 4) {38 //判断对象的状态是否交互完成 39 callback(); //回调 40 } 41 };42 }43 //在使用XHR对象时,必须先调用open()方法,44 //它接受三个参数:请求类型(get、post)、请求的URL和表示是否异步。45 xhr.open(obj.method, obj.url, obj.async);46 if (obj.method === ‘post‘) {47 //post方式需要自己设置http的请求头,来模仿表单提交。 48 //放在open方法之后,send方法之前。 49 xhr.setRequestHeader(‘Content-Type‘, ‘application/x-www-form-urlencoded‘); 50 xhr.send(obj.data); //post方式将数据放在send()方法里 51 } else { 52 xhr.send(null);//get方式则填null 53 }54 if (obj.async === false) { 55 //同步 56 callback(); 57 } 58 59 function callback() { 60 if (xhr.status == 200) { 61 //判断http的交互是否成功,200表示成功 62 obj.success(xhr.responseText); //回调传递参数 63 } else { 64 alert(‘获取数据错误!错误代号:‘ + xhr.status + ‘,错误信息:‘ + xhr.statusText);65 } 66 }67 }68 69 //名值对转换为字符串70 function params(data) { 71 var arr = [];72 for (var i in data) { 73 //特殊字符传参产生的问题可以使用encodeURIComponent()进行编码处理 74 arr.push(encodeURIComponent(i) + ‘=‘ + encodeURIComponent(data[i])); 75 }
76 return arr.join(‘&‘); 77 }
使用方式:
1 ajax({ 2 method : ‘post‘, 3 url : ‘demo.php‘, 4 data : { 5 ‘name‘ : ‘JR‘, 6 ‘age‘ : 22 7 }, 8 success : function (message) { 9 alert(message);10 },11 async : true12 });
【转】封装原生JS实现Ajax
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。