WEB2.0 中 AJAX 技術應用的詳細探討 （1）

最近互聯網上比較火熱的話題當然是關于WEB2.0的應用，其中AJAX又是WEB2.0的核心之一。AJAX是Asynchronous JavaScript and XML 的縮寫。它并不是一門新的語言或技術，它實際上是幾項技術按一定的方式組合在一在同共的協作中發揮各自的作用，它包括
　　使用XHTML和CSS標準化呈現；
　　使用DOM實現動態顯示和交互；
　　使用XML和XSLT進行數據交換與處理；
　　使用XMLHttpRequest進行異步數據讀??；
　　最后用JavaScript綁定和處理所有數據；
　　Ajax的工作原理相當于在用戶和服務器之間加了?個中間層，使用戶操作與服務器響應異步化。這樣把以前的一些服務器負擔的工作轉嫁到客戶端，利于客戶端閑置的處理能力來處理，減輕服務器和帶寬的負擔，從而達到節約ISP的空間及帶寬租用成本的目的。

我們以兩個驗證通行證帳號是否存在的例子來講述AJAX在實際中的應用：

(1)    用文本字符串的方式返回服務器的響應來驗證網易通行證帳號是否存在； 
(2)    以XMLDocument對象方式返回響應來驗證金山通行證帳號是否存在；

首先，我們需要用JavaScript來創建XMLHttpRequest 類向服務器發送一個HTTP請求， XMLHttpRequest 類首先由Inte.net Explorer以ActiveX對象引入，被稱為XMLHTTP。 后來Mozilla?Netscape?Safari 和其他瀏覽器也提供了XMLHttpRequest類，不過它們創建XMLHttpRequest類的方法不同。

對于Internet Explorer瀏覽器，創建XMLHttpRequest 方法如下：

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類的方法。

對于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("Content-Type","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"。 
　
用JavaScript來創建XMLHttpRequest 類向服務器發送一個HTTP請求后，接下來要決定當收到服務器的響應后，需要做什么。這需要告訴HTTP請求對象用哪一個JavaScript函數處理這個響應?？梢詫ο蟮膐nreadystatechange屬性設置為要使用的JavaScript的函數名，如下所示：


xmlhttp_request.onreadystatechange =FunctionName;



FunctionName是用JavaScript創建的函數名，注意不要寫成FunctionName()，當然我們也可以直接將JavaScript代碼創建在onreadystatechange之后，例如：


xmlhttp_request.onreadystatechange = function(){
    // JavaScript代碼段
};



在這個函數中。首先要檢查請求的狀態。只有當一個完整的服務器響應已經收到了，函數才可以處理該響應。XMLHttpRequest 提供了readyState屬性來對服務器響應進行判斷。

1 2 下一頁>>

原文轉自：http://www.anti-gravitydesign.com