Ajax創建對象以及不同瀏覽器中的兼容性

1.在傳統得到web應用中，采用的都是同步的交互方式，為了等待服務器的響應，可能需要較長的時間，客戶體驗有時候很不好，而Ajax可以實現異步的交互方式。在交互較多，局部刷新和按需取數據（頻繁讀取數據和數據分類良好）的情況下使用比較頻繁。但是也有自身的缺點，Ajax大量使用javascript和Ajax引擎，這需要瀏覽器的支持。但是各個瀏覽器提供的創建Ajax的方式不同，使得我們需要測試各個瀏覽器的兼容性，這一點比較麻煩。雖然代碼比較長，但是固定的，可以單獨摘出來。另一方面對於flash等還不支持Ajax，現在手機也不能使用，但是很明顯，這只是現在不能，以后一定可以的~

 

    2.在html頁面觸發js腳本的時候，js腳本根據我們相應的動作去執行php文件，執行后可能會獲得一部分結果，而把這些結果再返回到js腳本中，再通過腳本當中的DOM組件直接反映在當前的html頁面上，也就是說整個頁面沒有刷新，只是改變html頁面上的某位置的內容。從而也減輕了服務器的壓力。

 

    3.創建Ajax對象XMLHttpRequest.由於各個瀏覽器的創建方式不同，所以我們寫一個可以兼容各個瀏覽器的方法，在方法里我們實現各個瀏覽器中Ajax對象的創建。

 

在實現這個以前，我們先簡單的分析一下，當前的瀏覽器分為IE瀏覽器(（IE5.0 IE5.5 IE6.0, IE7 IE8）)和非IE瀏覽器(按照W3C標准:FF Mozilla NetScape)兩種，但是呢IE瀏覽器的版本不同在創建Ajax的對象時也不相同，所以Ajax對象的創建種類比較多。

 

<script type="text/javascript">
function createXMLHttpRequest(){
        var request = false;
        //一般先判斷非IE瀏覽器
        //window對象中有XMLHttpRequest存在就是非IE，包括（IE7，IE8）
        if(window.XMLHttpRequest){
            request=new XMLHttpRequest();//非IE以及IE7，IE8瀏覽器
            if(request.overrideMimeType){
                request.overrideMimeType("text/xml");//重置mime類型
            }
        //window對象中有ActiveXObject屬性存在就是IE瀏覽器的低版本
    }else if(window.ActiveXObject){
        var versions = ['Microsoft.XMLHTTP',
                    'MSXML.XMLHTTP',
                    'Msxml2.XMLHTTP.7.0',
                    'Msxml2.XMLHTTP.6.0',
                    'Msxml2.XMLHTTP.5.0', 
                    'Msxml2.XMLHTTP.4.0', 
                    'MSXML2.XMLHTTP.3.0', 
                    'MSXML2.XMLHTTP'];//各種IE瀏覽器創建Ajax對象時傳遞的參數
              for(var i=0; i<versions.length; i++){
                    try{
                        request=new ActiveXObject(versions[i]);//各個IE瀏覽器版本的參數不同
                        if(request){
                            return request;
                        }
                    }catch(e){
                        request=false;
                    }
               }
        }
         return request;
    }
// 注意：必須把創建ajax對象的代碼放在show函數里，確保每次點擊的時候都創建一個新的ajax對象。
var ajax = null;
function show(){
   ajax = createXMLHttpRequest();
   alert(ajax);
}
</script>

<input type="button" onclick="show();" value="request"/>