21. javacript進階程式設計-Ajax與Comet

標籤：

1. Ajax與Comet1.1 XMLHttpRequest對象

IE5是第一款引入XHR對象的瀏覽器，IE5中是通過MSXML庫中的一個ActiveX對象實現的。因此在IE中可能存在MSXML2.XMLHttp, MSXML2.XMLHttp.3.0, MSXML2.XMLHttp.6.0，要支援舊瀏覽器，可以使用如下函數：

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;

                           }cath(ex){

 

                           }

                    }

             }

 

             return new ActiveXObject(arguments.callee.activeXString);

      }else{

             throw new Error(‘NO XHR object.‘);

      }

}

1.2 XHR用法

使用XHR對象，第一個方法是open(),第一個參數表示方法，第二個參數表示請求地址，第三個參數表示是否非同步傳遞資料。

第二步調用send()方法，

第三部根據 返回狀態判斷執行對應方法

(1). 等到伺服器響應後，響應資料會自動填滿XHR對象的屬性。

l responseText：作為響應主體返回的資料

l responseXML：響應內容是XML DOM文檔資料，內容類型是“text/xml”或者“application/xml”

l status:響應的狀態

l statusText:響應的狀態說明

 

(2). 針對非同步請求，可以檢測XHR對象的readyState屬性，

l 0：未初始化

l 1：啟動

l 2：發送

l 3：接收

l 4：完成

 

var xhr = createXHR();

xhr.onreadystatechange = function(){ //必須在open方法前指定

  if(xhr.readystate == 4){

if((xhr.status >=200 && xhr.status < 300)|| xhr.status == 304){

alert(xhr.responseText);

}else{

alert(‘error’);

}

}

}

xhr.open(‘get’,’ex.php’,true);

xhr.send(null);

1.3 GET請求

var xhr = createXHR();

xhr.onreadystatechange = function(){ //必須在open方法前指定

  if(xhr.readystate == 4){

if((xhr.status >=200 && xhr.status < 300)|| xhr.status == 304){

alert(xhr.responseText);

}else{

alert(‘error’);

}

}

}

xhr.open(‘get’,’ex.php?uid=xx’,true); //URL地之後傳遞參數

xhr.send(null);

 

1.4 POST請求

var xhr = createXHR();

xhr.onreadystatechange = function() { //必須在open方法前指定

      if (xhr.readystate == 4) {

             if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {

                    alert(xhr.responseText);

             } else {

                    alert(‘error’);

             }

      }

}

xhr.open(‘post’, ’ex.php’, true);

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //發送前指定傳輸類型

xhr.send(form.data);//參數在send是傳輸

1.5 跨資源請求

IE8通過XDomainRequest對象支援CORS，其他瀏覽器通過XHR對象原生支援CORS，映像Ping和JSONP是另外兩種跨瀏覽器通訊技術。

21. javacript進階程式設計-Ajax與Comet