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);
}