首页 > 代码库 > ajax请求详解

ajax请求详解

//1. 创建一个ajax对象//var xhr=new XMLHttpRequest;//var xhr=null;//try{//    if(window.XMLHttpRequest){//        xhr=new XMLHttpRequest;//    }else if(new ActiveXObject("Microsoft.XMLHTTP")){//        xhr=new ActiveXObject("Microsoft.XMLHTTP");//    }else if(new ActiveXObject("Msxm12.XMLHTTP")){//        xhr=new ActiveXObject("Msxm12.XMLHTTP");//    }else if(new ActiveXObject("Msxm13.XMLHTTP")){//        xhr=new ActiveXObject("Msxm13.XMLHTTP");//    }////}catch(e){//    throw new Error("您当前浏览器不支持AJAX~ 破电脑砸了吧!!!");//}//第一次升级v//惰性思想:在自执行函数执行之后我们把getXHR赋值为一个具体的函数,这样以后执行这个方法时,就不用在判断是什么浏览器了//var getXHR=null;//-function(){//    var list=[function(){//        return new XMLHttpRequest;//    },function(){//        return new ActiveXObject("Microsoft.XMLHTTP");//    },function(){//        return new ActiveXObject("Msxm12.XMLHTTP");//    },function(){//        return new ActiveXObject("Msxm13.XMLHTTP");//    }];//    var temp=null;//    for(var i=0;i<list.length;i++){//        try{//            temp=list[i]();//        }catch(e){//            continue;//        }//        getXHR=list[i];//        break;//    }//    if(!temp){//        throw new Error("您当前浏览器不支持AJAX~ 破电脑砸了吧!!!");//    }//}();var getXHR=function(){    var list=[function(){        return new XMLHttpRequest;    },function(){        return new ActiveXObject("Microsoft.XMLHTTP");    },function(){        return new ActiveXObject("Msxm12.XMLHTTP");    },function(){        return new ActiveXObject("Msxm13.XMLHTTP");    }];    var temp=null;    for(var i=0;i<list.length;i++){        try{            temp=list[i]();        }catch(e){            continue        }        getXHR=list[i];        break    }    if(!temp){        throw new Error("您当前浏览器不支持AJAX~ 破电脑砸了吧!!!");    }    return temp};var xhr=getXHR();//2. 打开一个URL地址(服务器给我们的数据请求的一个接口API)//第一个参数请求方式get post put delete// get: 一般用来向服务器发送一个请求,从服务器获取内容// post:一般应用于客服端给服务器推送大量的内容// get 通过URL请求向服务器传参数,并在?的后面拼上需要传的参数// post 通过xhr.send(字符串)//xhr.send(‘{"name":"xiaoming","age":12}‘);// 长度:get通过URL传参数,但是浏览器对于URL的大小是有限制的(一般谷歌8KB 火狐7KB IE2KB),//        一旦超出浏览器会自动减去,这样传给后台的数据就不完整了,这种情况只能用post// 安全:get通过URL传参数可以在控制台看见,安全性不高  post 是把传递的内容放在HTTP主题中 在控制台看不到 安全性更高// 缓存问题:post请求浏览器不会默认记录缓存信息,也不需要清除缓存// get请求浏览器会默认记录缓存信息,一般我们会在URL拼接参数的时候给他一个时间戳或者随机数,这样每次请求的地址就会不一样(不一样就不缓存)var time=new Date();var times=time.getTime();console.log(times);var url="http://www.com.qq.com";var code=Math.random();var strCode=url.indexOf("?")>-1?url+"time="+times:url+"?time="+times;console.log(strCode);//3. 监听数据请求//xhr.readyState:ajax请求状态码//0 未发送请求  1 已打开连接   2 已获取响应头部信息   3 请求的数据内容正在加载    4 请求完成得到数据//xhr.status:网络状态码//200 一般以2开头  正常     404 找不到 文件,图片...不存在      502 服务器错误xhr.onreadystatechange=function(){    if(xhr.readyState===4&&/^2\d{2}$/.test(xhr.status)){        var str=xhr.responseText;        //接收后台返回来的JSON字符串    }};xhr.send(null);function Ajax(url,callback){    var xhr=getXHR();    url+=url.indexOf("?")>-1?"time="+(new Date).getTime():"?time="+(new Date).getTime();    xhr.open("get",url,true);//同步false   异步true    xhr.onreadystatechange=function(){        if(xhr.readyState===4&&/^2\d{2}$/.test(xhr.status)){            var str=xhr.responseText;            str="JSON" in window?JSON.parse(str):eval("("+str+")");            callback(str);        }    }    xhr.send(null);}

 

ajax请求详解