Ajax库
2018-10-07 本文已影响0人
果木山
Ajax库封装代码
//参数:ajax({url:xxx,data:xxx,type:xxx,dataType:xxx,jsonp:xxx,fnLoading:xxx,complete:xxx,success:xxx,error:xxx,timeout})
//将对象中的属性名和属性值转化为key=val&key=val的形式
function json2url(obj) {
//参数:对象,返回值:字符串
//思路:对象-数组-字符串
obj.t=Math.random();//避免缓存
var ary=[];
//遍历对象
for(var attr in obj){
ary.push(attr+"="+obj[attr]);
}
return ary.join("&");
}
function jsonParse(strJson) {
return "JSON" in window?JSON.parse(strJson):eval("("+strJson+")");
}
function myAjax(json) {
json=json||{};
//如果json中请求地址url不存在
if(!json.url) return;
//参数获取
var url=json.url;
//data属性值为一个对象,对象中为参数
var data=json.data||{};
var type=json.type||"get";
var jsonp=json.jsonp||"callback";
var timeout=json.timeout||3000;
var timer=null;
//四步:
//1 创建一个xml对象
//每个类函数都是window的一个属性;
if(window.XMLHttpRequest){
var xml=new XMLHttpRequest();
}else{//IE6兼容处理
var xml=new ActiveXObject("Microsoft.XMLHTTP");
}
//2 打开地址;3 发送请求
//get请求:参数在地址中,在url?的后面,以键值对的形式连接;
//post请求:参数在请求体中,地址url后面不跟参数;
switch(type.toLowerCase()){
case "get":
xml.open("get",url+"?"+json2url(data),true);
xml.send(null);
break;
case "post":
xml.open("post",url,true);
xml.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xml.send(json2url(data));
break;
case "jsonp":
//新建一个全局函数
var kbfd="jsonp_"+Math.random();
kbfd=kbfd.replace(".","");//函数名中不能存在小数点,所以需要替换
window[kbfd]=function (data) {
json.success && json.success(data);
//卸磨杀驴,干掉script
document.body.removeChild(oS);
};
data[jsonp]=kbfd;
//创建script标签,设置其src,通过script发送请求
var oS=document.createElement("script");
//script中src包含url?参数&cb=kbfd
oS.src=url+"?"+json2url(data);
//script必须插入到页面的底部
document.body.appendChild(oS);
break;
}
//响应请求之前的准备
json.fnLoading && json.fnLoading();
//4 响应请求
xml.onreadystatechange=function () {
if(xml.readyState===4){
//请求成功
json.complete && json.complete();
clearTimeout(timer);
//判断后台响应成功还是失败;
if(/^2\d{2}$/.test(xml.status)){//响应成功
if(json.dataType==="json"){
json.success && json.success(jsonParse(xml.responseText));
}else{
json.success && json.success(xml.responseText);
}
}else{//响应失败
json.error && json.error(xml.status);
}
}
};
if(type==="jsonp") return;
//5 等待超时
timer=setTimeout(function () {
alert("您的网络不行啊");
xml.onreadystatechange=null;
},timeout);
}