学习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()来释放。