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 ????} */封装ajax
原文地址：http://www.cnblogs.com/178-533/p/7472544.html