web基础学习之路

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);
 }
上一篇 下一篇

猜你喜欢

热点阅读