跨浏览器之封装ajax
ajax是异步的javascript和XML，主要用于前端后端的数据传送。
要封装一个ajax，使之能相应的平稳退化，第一步就是创建一个XHR（XMLHttpRequest）对象。
以下代码是在各种浏览器下创建xhr对象：
1 //创建xhr对象，兼容各种浏览器 2 function createXHR(){ 3 if(typeof XMLHttpRequest!="undefined"){ //IE7以上 4 return new XMLHttpRequest(); 5 } 6 else if(typeof ActiveXObject!="underfined"){ //IE7以下 7 var version = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"], 8 i, len; 9 for(i=0,len=version.length;i<len;i++){ 10 try{ 11 new ActiveXObject(version[i]); 12 arguments.callee.activeXString = version[i]; 13 }catch(e){ 14 //跳过 15 } 16 } 17 return new ActiveXObject(arguments.callee.activeXString); 18 } 19 else{ 20 throw new Error("您的浏览器不支持ajax！"); 21 } 22 }
这段代码主要是处理在IE中多种版本的xhr对象怎么实现平稳退化，使之创建的xhr对象能兼容各种版本的IE。
然后开始封装ajax，首先ajax中的open方法里面有要用到一个get或者post的请求方式，然后又用到相应的url，最后是同步异步，那我们完全可以将这些放在一个对象中，将这个对象作为ajax的参数传入。
因为传入的是一个对象，里面需要进行传送的数据，也就可以是包含的另外一个对象，那我们就应该将这个数据对象进行转化为能为我们所用的类型：
1 //序列化对象为字符串数组 2 function serialize(data){ 3 var result = []; 4 for(var i in data){ 5 result.push(encodeURIComponent(i)+"="+encodeURIComponent(data[i])); 6 } 7 return result.join("&"); 8 }
此时如果对serialize传入一个数据对象，类似：
1 { 2 "name" : "lee", 3 "age" : "100" 4 }
输出就会是一个长度为2的数组，以&符号进行分隔：
name=lee&age=100
最后将ajax函数写出来：
1 function ajax(obj){ 2 3 var xhr = createXHR(); //创建xhr对象 4 obj.data = serialize(obj.data); 5 obj.url+="?ranNum="+Math.random(); //解决缓存问题 6 obj.url += (obj.url.indexOf("?") == -1 ? "?" : "&"); 7 8 xhr.onreadystatechange=function(){ 9 callback(xhr); 10 } 11 if(obj.method == "get"){ 12 obj.url += obj.data; 13 alert(obj.url); 14 xhr.open(obj.method,obj.url,obj.async); 15 xhr.send(null); 16 } 17 if(obj.method == "post"){ 18 alert(obj.url); 19 xhr.open(obj.method,obj.url,obj.async); 20 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 21 xhr.send(obj.data); 22 } 23 }
代码中将get请求和post请求两种方式分开进行了处理。
callback（）方法呢，就是进行响应结束之后的一个判断是否成功，以及响应的处理：
1 function callback(xhr){ 2 if(xhr.readyState == 4){ 3 if(xhr.status>=200&&xhr.status<=300||xhr.status==304){ 4 alert(xhr.responseText); 5 } 6 else{ 7 alert("响应失败"+ xhr.status + xhr.statusText); 8 } 9 } 10 }
最后只需要在callback内把alert方法改为返回相应的数据值就可以了。
需要用到时就只需要将传入一个对象运用：
1 ajax({ 2 "method" : "get", 3 "url" : "demo.php", 4 "async" : "true", 5 "data" : { 6 "name" : "lee", 7 "age" : "100" 8 } 9 });
最后附上get和post请求的代码，以供参考：
1 //get方式请求 2 /* var xhr = createXHR(); 3 xhr.open("get","demo.php",true);//准备请求 4 xhr.send(null);//发送请求 5 xhr.onreadystatechange=function(){//当XHR对象的readyState改变时发生 6 if(xhr.readyState==4){//响应完成时 7 if(xhr.status>=200&&xhr.status<=300||xhr.status==304){//响应成功条件 8 alert(xhr.responseText); 9 } 10 else{ 11 alert("响应失败"+xhr.status+xhr.statusText); 12 } 13 } 14 } */ 15 16 //post方式请求 17 /* var xhr = createXHR(); 18 xhr.open("post","demo.php",true); 19 xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//不同于get之处 20 xhr.send("name=lee&age=100");//要将相应的数据send出去 21 xhr.onreadystatechange = function(){ 22 if(xhr.readyState==4){ 23 if(xhr.status>=200&&xhr.status<=300||xhr.status==304){ 24 alert(xhr.responseText); 25 } 26 else{ 27 alert("响应失败"+xhr.status+xhr.statusText); 28 } 29 } 30 } */
