1. 程式人生 > >相容不同瀏覽器的Ajax 寫法

相容不同瀏覽器的Ajax 寫法

不同瀏覽器建立XMLHttpRequest 方法有什麼不同?

XMLHttpRequest 類首先由Internet Explorer以ActiveX物件引入,被稱為XMLHTTP。後來Mozilla﹑Netscape﹑Safari 和其他瀏覽器也提供了XMLHttpRequest類,不過它們建立XMLHttpRequest類的方法不同。
1 對於Internet Explorer瀏覽器:
 xmlhttp_request = new ActiveXObject(”Msxml2.XMLHTTP.3.0″); //3.0或4.0, 5.0
 xmlhttp_request = new ActiveXObject(”Msxml2.XMLHTTP”);
 xmlhttp_request = new ActiveXObject(”Microsoft.XMLHTTP”);
由於在不同Internet Explorer瀏覽器中XMLHTTP版本可能不一致,為了更好的相容不同版本的Internet Explorer瀏覽器,因此我們需要根據不同版本的Internet Explorer瀏覽器來建立XMLHttpRequest類,上面程式碼就是根據不同的Internet Explorer瀏覽器建立XMLHttpRequest類的方法。
2 對於Mozilla﹑Netscape﹑Safari等瀏覽器
    建立XMLHttpRequest 方法如下:xmlhttp_request = new XMLHttpRequest();

如果伺服器的響應沒有XML mime-type header,某些Mozilla瀏覽器可能無法正常工作。 為了解決這個問題,如果伺服器響應的header不是text/xml,可以呼叫其它方法修改該header。
 xmlhttp_request = new XMLHttpRequest();
 xmlhttp_request.overrideMimeType(’text/xml’);
在實際應用中,為了相容多種不同版本的瀏覽器,一般將建立XMLHttpRequest類的方法寫成如下形式:
try{
 if( window.ActiveXObject ){
 for( var i = 5; i; i– ){
 try{
  if( i == 2 ){
  xmlhttp_request = new ActiveXObject( “Microsoft.XMLHTTP” ); }
 else{
        xmlhttp_request = new ActiveXObject( “Msxml2.XMLHTTP.” + i + “.0″ );
        xmlhttp_request.setRequestHeader(”Content-Type”,”text/xml”);
        xmlhttp_request.setRequestHeader(”Charset”,”gb2312″); }
        break;
  }
 catch(e){
  xmlhttp_request = false;
   }
                        }
                          }else if( window.XMLHttpRequest ){
   xmlhttp_request = new XMLHttpRequest();
if (xmlhttp_request.overrideMimeType)
{ xmlhttp_request.overrideMimeType(’text/xml’); } }
 }
catch(e){
  xmlhttp_request = false;
  }
傳送請求了
可以呼叫HTTP請求類的open()和send()方法,如下所示:
xmlhttp_request.open(’GET’, URL, true);
xmlhttp_request.send(null);
open()的第一個引數是HTTP請求方式—GET,POST或任何伺服器所支援的您想呼叫的方式。 按照HTTP規範,該引數要大寫;否則,某些瀏覽器(如Firefox)可能無法處理請求。
第二個引數是請求頁面的URL。
第三個引數設定請求是否為非同步模式。如果是TRUE,JavaScript函式將繼續執行,而不等待伺服器響應。這就是”AJAX”中的”A”。
伺服器的響應
這需要告訴HTTP請求物件用哪一個JavaScript函式處理這個響應。可以將物件的onreadystatechange屬性設定為要使用的JavaScript的函式名,如下所示:
xmlhttp_request.onreadystatechange =FunctionName;
FunctionName是用JavaScript建立的函式名,注意不要寫成FunctionName(),當然我們也可以直接將JavaScript程式碼建立在onreadystatechange之後,例如:
xmlhttp_request.onreadystatechange = function(){
// JavaScript程式碼段
};
首先要檢查請求的狀態。只有當一個完整的伺服器響應已經收到了,函式才可以處理該響應。XMLHttpRequest 提供了readyState屬性來對伺服器響應進行判斷。
readyState的取值如下:
0 (未初始化)
1 (正在裝載)
2 (裝載完畢)
3 (互動中)
4 (完成)
所以只有當readyState=4時,一個完整的伺服器響應已經收到了,函式才可以處理該響應。具體程式碼如下:
if (http_request.readyState == 4) { // 收到完整的伺服器響應 }
else { // 沒有收到完整的伺服器響應 }
當readyState=4時,一個完整的伺服器響應已經收到了,接著,函式會檢查HTTP伺服器響應的狀態值。完整的狀態取值可參見W3C文件。當HTTP伺服器響應的值為200時,表示狀態正常。
處理從伺服器得到的資料
有兩種方式可以得到這些資料:
(1) 以文字字串的方式返回伺服器的響應
(2) 以XMLDocument物件方式返回響應