上节讲了ajax的作用好处即流程为的就是去封装ajax，那......那该怎么封装ajax呢？？？？？？？
封装方法，传参是个很大的问题！在这里，我们应该传几个参数呢？
首先我们肯定要传一个请求方式get或post（method），然而json数据也是必不可少的，其次就是需要传入一个URL路径了，在者就需要一个成功的回调和一个失败的回调了；
如上所示，参数分为（method， json， url， success， error）；
参数知道了，ajax流程也有了，那我们就开始封装吧！
首先创建一个ajax对象，然后再定义一个空的字符串。因为传入的method包含两种请求方式，所以要判断是get还是post。然后再将json数据进行遍历，且将所有的哈希值进行拼接；再截取前面的&符，将url进行拼接，紧接着就是open打开和send提交了。注：get和post请求方式的区别还在于post要设置请求头而get不用。代码如下：
function ajax(method,url,json,success,error){ ???//创建ajax对象 ???var xml = new XMLHttpRequest()||new ActiveXObject("Microsoft,XMLHTTP"); ???//定义一个空的字符串 ???var str = ""; ???//如果是get方式 ???if(method == "get"){ ???????//将所有哈希值进行拼接 ???????for(var key in json){ ???????????str+="&"+key+"="+json[key]; ???????} ???????//截取前面的&符 ???????str = str.substr(1); ???????//url进行拼接 ???????url = url+"?"+str; ???????????xml.open("get",url,true); ???????xml.send(); ???}else{ ???????//将所有哈希值进行拼接 ???????for(var key in json){ ???????????str+="&"+key+"="+json[key]; ???????} ???????//截取前面的&符 ???????str = str.substr(1); ???????xml.open("post",url,true); ???????//设置请求头 ???????xml.setRequestHeader("content-type","application/x-www-form-urlencoded"); ???????xml.send(str); ???}}还记得ajax流程最后一步是啥么？没错，就是监听服务器的状态。但是该怎么监听呢？首先就是判断建立连接的状态是否完成（4）并且服务器是否请求成功（200）；然后在判断后台数据给的自否是字符串，如果不是我们则将它转换成字符串（JSON.parse( ) ）；在其之后如果第一个判断为true的话如果成功的回调存在的话则执行成功的回调，如果为false的话有失败的回调则执行失败的回调。代码如下：
//监听服务器状态xml.onreadystatechange = function(){ ???//建立连接状态 ----------状态码 ???if(xml.readyState == 4 && xml.status == 200){
???????//后台数据给的自否是字符串 JSON.parse() ????????var data = xml.responseText;
???????if(typeof data !="object"){ ???????????data = JSON.parse(data); ???????}
???????//成功的回调 ???????success&&success(data); ???}else{
???????//失败的回调 ???????error&&error(xml.status); ???}}看吧，ajax就这样封装好啦，快去试试吧。略略略.......
function ajax(method,url,json,success,error){ ???var xml = new XMLHttpRequest()||new ActiveXObject("Microsoft,XMLHTTP"); ???var str = ""; ???if(method == "get"){ ???????for(var key in json){ ???????????str+="&"+key+"="+json[key]; ???????} ???????str = str.substr(1); ???????url = url+"?"+str; ???????????xml.open("get",url,true); ???????xml.send(); ???}else{ ???????for(var key in json){ ???????????str+="&"+key+"="+json[key]; ???????} ???????str = str.substr(1); ???????xml.open("post",url,true); ???????xml.setRequestHeader("content-type","application/x-www-form-urlencoded"); ???????xml.send(str); ???} ???xml.onreadystatechange = function(){ ???????if(xml.readyState == 4 && xml.status == 200){ ???????????var data = xml.responseText; ???????????if(typeof data !="object"){ ???????????????data = JSON.parse(data); ???????????} ???????????success&&success(data); ???????}else{ ???????????error&&error(xml.status); ???????} ???}}不用感谢我，因为我是八宝山喊麦王，嘻嘻。
js之ajax的封装
原文地址：https://www.cnblogs.com/wantu/p/9063635.html