Ajax

• 一種不用刷新頁面便可以與服務器通訊的方法
• 數據在客戶端與服務器之間的獨立傳輸,服務器不再返回整個頁面
• 提升用戶體驗

1. 不用刷新頁面便可以和服務器通訊的方法有很多:

---- Flash

----Java applet

----框架:如果使用了一組框架構造了一個網頁,可以只是更新這個其中的一個框架

---- 隱藏的iframe

---- XMLHttpRequest :該對象是對JavaScript的一個擴展,可以使網頁與服務器進行通信.是創建Ajax的應用的最佳選擇.實際上通常把Ajax當做XMLHttpRequest的對象的代名詞

2. 為什麽要兼容IE5

1. XMLHttpRequest 最早是在IE5中以ActiveX組件的形式出現的,不是W3C的標準,

function createXMLHTTPRequest() {     
                 //1.創建XMLHttpRequest對象     
                 //這是XMLHttpReuquest對象無部使用中最復雜的一步     
                 //需要針對IE和其他類型的瀏覽器建立這個對象的不同方式寫不同的代碼     
                 var xmlHttpRequest;  
                 if (window.XMLHttpRequest) {     
                     //針對FireFox，Mozillar，Opera，Safari，IE7，IE8     
                    xmlHttpRequest = new XMLHttpRequest();     
                     //針對某些特定版本的mozillar瀏覽器的BUG進行修正     
                     if (xmlHttpRequest.overrideMimeType) {     
                         xmlHttpRequest.overrideMimeType("text/xml");     
                     }     
                 } else if (window.ActiveXObject) {     
                     //針對IE6，IE5.5，IE5     
                     //兩個可以用於創建XMLHTTPRequest對象的控件名稱，保存在一個js的數組中     
                     //排在前面的版本較新     
                     var activexName = [ "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];     
                     for ( var i = 0; i < activexName.length; i++) {     
                         try {     
                             //取出一個控件名進行創建，如果創建成功就終止循環     
                             //如果創建失敗，回拋出異常，然後可以繼續循環，繼續嘗試創建     
                            xmlHttpRequest = new ActiveXObject(activexName[i]);   
                            if(xmlHttpRequest){  
                                break;  
                            }  
                         } catch (e) {     
                         }     
                     }     
                 }     
                 return xmlHttpRequest;  
             }
    //這個是兼容性比較好的版本
 

function getHTTPObject(){
    var xmlHttp = null;
    if(window.XMLHttpRequest){
        xmlHttp = new XMLHttpRequest();
    }else if(window.ActiveXObject){
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return xmlHttp;
}
//目前`比較簡單的版本

3. XMLHttpRequest的方法

• abort() 停止當前請求

• getAllRequestHeaders() 把HTTP請求的所有響應首部作為鍵/值返回

• getResponseHeader("header") 返回指定首部的串值

• open(‘method‘, ‘url‘ ) 建立服務器的連接調用

• setRequestHeader("header", "value") 把指定首部設置為所提供的值,4.在設置首部之前必須先調用open()

4.XMLRequest 屬性

• onreadystatechange:

  每個狀態改變都會觸發這個事件處理器,通常會調用一個JavaScript函數,請求到服務器中會產生不同狀態,服務器觸發

• readyState

請求狀態:

• 0 ====> 未初始化
• 1 ====> 正在加載
• 2 ====> 已經加載
• 3 ====> 交互中
• 4 ====> 完成

• responseText

服務器的響應,表示為一個串

• responseXML

服務器的響應表示為XML,這個對象可以解析為DOM對象

• status

服務器HTTP狀態碼 200===> ok 404===>not found

• statusText

HTTP狀態碼相對的文本

發送請求

• setRequestHeader(header,value)

  • 當瀏覽器向服務器請求頁面的時候,會伴隨這個請求發送一組首部信息,這些首部信息是一系列描述請求的元數據(metadata),首部信息用來聲明請求是GET還是POST請求

  • Ajax請求中,發送首部的工作setRequestHeader

  • 如果用Post請求向服務器發送數據,需要將"Content-type"的首部設置為"application/x-www-form-urlencoded",它會告訴服務器正在發送數據,並且數據已經符合URL編碼

  • 該方法必須是在open()之後才能調用

json解析

//從服務器獲取返回的數據
xmlHttp.onreadystatechange = function(){

    if(xmlHttp.onreadyState == 4){
        if(xmlHttp.status == 200){
            xmlHttp.responseText();
            var text = xmlHttp.responseText;
               var jsonText = evel("("+text+")");
                console.log("name:"+jsonText.name",age:"+jsonText.age);
        }else{
            console.log("false");
        }
    }
}   
//服務器端數據
{
    "name":"lakerMonster",
     "age":100
}

關於Ajax的一些使用（一）