学习Ajax

1.XHR对象

        IE7+、Firefox、Opera、Chrome和Safari都支持原生XMLHttpRequest对象，IE6不支持，只支持ActiveXObject对象，该对象在IE11中已经不再支持了。

IE中有三种不同版本的XHR对象MSXML2.XMLHTTP、MSXML2.XMLHTTP.3.0、MSXML2.XMLHTTP.6.0，所以可以通过一下函数创建一个兼容所有浏览器的XHR：

function createXHR() {
    if(typeof XMLHttpRequest != "undefined"){
        return new XMLHttpRequest();
    }else if(typeof ActiveXObject != "undefined"){
        if(typeof arguments.callee.activeXString != "string"){
            var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"],i,len;
            for(i=0,len=versions.length; i<len; i++){
                try {
                    new ActiveXObject(versions[i]);
                    arguments.callee.activeXString = versions[i];
                    break;
                }catch (ex){
                    //跳过
                }
            }
        }
        return new ActiveXObject(arguments.callee.activeXString);
    }else {
        throw new Error("No XHR object available.");
    }
}

或者简洁一点的：

if(typeof window.XMLHttpRequest != 'undefined'){
     var xhr = new XMLHttpRequest();
}else if(typeof window.ActiveXObject != 'undefined'){
      var xhr = new ActiveXObject('Microsoft.XMLHTTP');
}

也可以达到兼容ie的效果。

2.XHR用法

        创建完XHR对象后可通过open方法启用一个请求，传入三个参数请求方法、url、是否异步（默认true）。调用完open方法后，请求并没有被发送，需要通过send（）方法发送，发送时可附带一些请求数据，无需附带数据时传入null。通过readystatechange事件监听请求状态和http状态。通过responseText获取响应信息，或者通过responseType来设置响应信息的类型直接通过response属性获得响应数据来进行处理。

        请求方式有两种GET、POST，get方式用于向服务器请求一些数据：

var btn = document.getElementById('btn');
        btn.onclick = function () {
            if(window.XMLHttpRequest != 'undefined'){
                var xhr = new XMLHttpRequest();
            }else if(window.ActiveXObject != 'undefined'){
                var xhr = new ActiveXObject('Microsoft.XMLHTTP');
            }
            xhr.onreadystatechange = function() {
                if(xhr.readyState == 4 && xhr.status == 200){
                    alert(xhr.responseText);
                }
            }

            xhr.open("GET",'data.txt',true); //获取data.txt
            xhr.send(null);
        }

readyState为请求的状态码，每次状态变化都会触发readystatechange事件，通过监听该事件来判断是否成功收到响应。

0：未初始化

1：启用，调用了open方法

2：发送数据，调用了send

3：接收数据，但未完全接收

4：数据接收完毕，可以使用

当状态码为4的时候，服务器响应就完成了，但此时只是完成了响应，数据是否可用还要通过http的状态吗status来判断：

1xx：信息，服务器收到请求

2xx：成功，操作被成功接收并处理

3xx：重定向，需要进一步操做以完成请求

4xx：客户端错误，（404）请求资源地址不正确

5xx：服务器错误

当状态码为200是，则成功收到响应数据，所以只需判断status==200&&readyState==4就可以了。

get方式也可以发送少量数据，将数据附在url上传给服务器：

var btn = document.getElementById('btn');
        btn.onclick = function () {
            var text = encodeURIComponent(document.getElementById('active').value); //用encodeURIComponent对字符串进行编码，会将多余的空格等进行转码
            if(window.XMLHttpRequest != 'undefined'){
                var xhr = new XMLHttpRequest();
            }else if(window.ActiveXObject != 'undefined'){
                var xhr = new ActiveXObject('Microsoft.XMLHTTP');
            }
            xhr.onreadystatechange = function() {
                if(xhr.readyState == 4 && xhr.status == 200){
                    alert(xhr.responseText);
                }
            }

            xhr.open("GET",'test.php?active='+text,true);//将数据以键值对的形式附在url尾部，多个键值对之间用‘&’连接
            xhr.send(null);
        }

 PHP：

$active = $_GET['active'];
if($active == 'login'){
    echo '{"key":"value"}';
}else {
    echo 'error';
}

但是get请求传递的数据都在url中所以安全性不高，需要发送数据一般用post请求，将请求数据通过send发送到服务器：

        var btn = document.getElementById('btn');
        btn.onclick = function () {
            var text = encodeURIComponent(document.getElementById('active').value);
            
            if(window.XMLHttpRequest != 'undefined'){
                var xhr = new XMLHttpRequest();
            }else if(window.ActiveXObject != 'undefined'){
                var xhr = new ActiveXObject('Microsoft.XMLHTTP');
            }
            xhr.onreadystatechange = function() {
                if(xhr.readyState == 4 && xhr.status == 200){
                    alert(xhr.responseText);
                }
            }

            xhr.open("POST",'test.php',true);
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");//设置头信息，以表单的形式发送
            var str='active='+text;
            xhr.send(str);
        }

使用post请求发送数据时，服务器并不会像处理表单一样来处理收到的数据，所以要在send之前并且在open之后要通过setRequestHeader设置头信息，告诉服务器这是表单。 从性能角度看，post请求消耗的资源更多一点，get请求速度更快。

 3.超时设定

为XHR对象添加一个timeout属性来设置超时，当超过这个值时还未得到响应就会触发timeout事件并且会终止请求。

xhr.open("POST",'test1.php',true);
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            var str = 'active='+text;
            xhr.timeout = 1;
            xhr.ontimeout = function() {
                alert("Request did not return in a second.");
            }
            xhr.send(str);

timeout属性和ontimeout事件要放在open之后send之前，不然ie会报错，并且只有ie8+支持。

4.进度事件

在浏览器接收新数据期间会周期性的触发progress事件。该事件接收一个event对象，对象包含三个二外属性：lengthComputable、loaded、total，分别表示进度信息是否可用，接收到的字节数和总字节数。下面是一个通过Ajax请求图片的例子：

<button id="btn">获取信息</button>
<div id="result"></div>
<div id="picture"></div>
<script>
btn.onclick = function(){
    //创建xhr对象
    var xhr;
    if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest();
    }else{
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
xhr.onprogress = function(e){//监听progress事件来显示接收进度
    e= e || event;
    if(e.lengthComputable){
        document.getElementById('result').innerHTML = '已接收:'+e.loaded+' /'+e.total;
    }
}
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){
        var data = xhr.response;
        var img = document.createElement("img");
        img.src = URL.createObjectURL(data);    //创建一个指向data的url
        img.onload = function() {
            URL.revokeObjectURL(img.src);
        }
        document.getElementById('picture').appendChild(img);
    }
}
xhr.open('GET','RYH.png',true);
xhr.responseType = 'blob';    //响应数据类型为二进制数据
xhr.send(null);
}
</script>    

这里的URL.createObjectURL(file | blob)传入一个file对象或blob（二进制对象）对象，创建一个指向该对象的URL。但是每次调用该方法时都会创建一个新的URL对象，即使指向的是同一个对象，所以每次创建完一个URL对象不再使用后要手动释放，通过URL.revokeObjextURL()来释放。