Ajax核心XMLHttpRequest物件、（傳送請求、接收）方法和屬性介紹、AJAX開發框架、資料格式提要（XML、JSON、HTML）

XMLHttpRequest物件
　　 XMLHttpRequest物件在大部分瀏覽器上已經實現而且擁有一個簡單的介面允許資料從客戶端傳遞到服務端，但並不會打斷使用者當前的操作。使用XMLHttpRequest傳送的資料可以是任何格式，雖然從名字上建議是XML格式的資料。 

XMLHttpRequest最早是在IE5中以ActiveX元件的形式實現的。非W3C標準.

建立XMLHttpRequest物件（由於非標準所以實現方法不統一）

Internet Explorer把

XMLHttpRequest實現為一個ActiveX物件

其他瀏覽器（Firefox、Safari、Opera…）把它實現為一個本地的JavaScript物件。

XMLHttpRequest在不同瀏覽器上的實現是相容的，所以可以用同樣的方式訪問XMLHttpRequest例項的屬性和方法，而不論這個例項建立的方法是什麼。

XMLHttpRequest物件初始化

function   createXmlHttpRequest(){

   var xmlHttp;

   try{    //Firefox, Opera 8.0+, Safari

           xmlHttp=new XMLHttpRequest();

    }catch (e){

           try{    //Internet Explorer

                  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

            }catch (e){

                  try{

                          xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

                  }catch (e){}  

           }

    }

   return xmlHttp;

 }

XMLHttpRequest物件方法

XMLHttpRequest物件屬性

傳送請求--方法和屬性介紹

利用XMLHttpRequest 例項與伺服器進行通訊包含以下3個關鍵部分：

onreadystatechange 事件處理函式

open 方法

send 方法 

onreadystatechange:

該事件處理函式由伺服器觸發，而不是使用者

在 Ajax 執行過程中，伺服器會通知客戶端當前的通訊狀態。這依靠更新 XMLHttpRequest 物件的 readyState 來實現。改變 readyState 屬性是伺服器對客戶端連線操作的一種方式。

每次 readyState 屬性的改變都會觸發 readystatechange事件

open(method, url, asynch)

XMLHttpRequest 物件的 open 方法允許程式設計師用一個Ajax呼叫向伺服器傳送請求。

method：請求型別，類似 “GET”或”POST”的字串。若只想從伺服器檢索一個檔案，而不需要傳送任何資料，使用GET(可以在GET請求裡通過附加在URL上的查詢字串來發送資料，不過資料大小限制為2000個字元)。若需要向伺服器傳送資料，用POST。

在某些情況下，有些瀏覽器會把多個XMLHttpRequest請求的結果快取在同一個URL。如果對每個請求的響應不同，這就會帶來不好的結果。把當前時間戳追加到URL的最後，就能確保URL的惟一性，從而避免瀏覽器快取結果。 

var url = "GetAndPostExample?timeStamp=" + new Date().getTime(); 

url：路徑字串，指向你所請求的伺服器上的那個檔案。可以是絕對路徑或相對路徑。

asynch：表示請求是否要非同步傳輸，預設值為true(非同步)。指定true，在讀取後面的指令碼之前，不需要等待伺服器的相應。指定false，當指令碼處理過程經過這點時，會停下來，一直等到Ajax請求執行完畢再繼續執行。

send(data)：

open 方法定義了 Ajax 請求的一些細節。send 方法可為已經待命的請求傳送指令

data：將要傳遞給伺服器的字串。

若選用的是 GET 請求，則不會發送任何資料， 給 send 方法傳遞 null 即可：request.send(null);

當向send()方法提供引數時，要確保open()中指定的方法是POST，如果沒有資料作為請求體的一部分發送，則使用null.

完整的 Ajax 的 GET 請求示例：

setRequestHeader(header,value)

當瀏覽器向伺服器請求頁面時，它會伴隨這個請求傳送一組首部資訊。這些首部資訊是一系列描述請求的元資料(metadata)。首部資訊用來宣告一個請求是 GET 還是 POST。

Ajax 請求中，傳送首部資訊的工作可以由 setRequestHeader完成

引數header： 首部的名字;  引數value：首部的值。

如果用 POST 請求向伺服器傳送資料，需要將 “Content-type” 的首部設定為 “application/x-www-form-urlencoded”.它會告知伺服器正在傳送資料，並且資料已經符合URL編碼了。

該方法必須在open()之後才能呼叫

完整的 Ajax 的 POST 請求示例：

接收--方法和屬性介紹

用 XMLHttpRequest 的方法可向伺服器傳送請求。在 Ajax 處理過程中，XMLHttpRequest 的如下屬性可被伺服器更改：

readyState

status

responseText

responseXML

readyState

readyState 屬性表示Ajax請求的當前狀態。它的值用數字代表。

0 代表未初始化。 還沒有呼叫 open 方法

1 代表正在載入。 open 方法已被呼叫，但 send 方法還沒有被呼叫

2 代表已載入完畢。send 已被呼叫。請求已經開始

3 代表互動中。伺服器正在傳送響應

4 代表完成。響應傳送完畢

每次 readyState 值的改變，都會觸發 readystatechange 事件。如果把 onreadystatechange 事件處理函式賦給一個函式，那麼每次 readyState 值的改變都會引發該函式的執行。

status

伺服器傳送的每一個響應也都帶有首部資訊。三位數的狀態碼是伺服器傳送的響應中最重要的首部資訊，並且屬於超文字傳輸協議中的一部分。

常用狀態碼及其含義：

404 沒找到頁面(not found)

403 禁止訪問(forbidden)

500 內部伺服器出錯(internal service error)

200 一切正常(ok)

304 沒有被修改(not modified)(伺服器返回304狀態，表示原始檔沒有被修改 )

在 XMLHttpRequest 物件中，伺服器傳送的狀態碼都儲存在 status 屬性裡。通過把這個值和 200 或 304 比較，可以確保伺服器是否已傳送了一個成功的響應

responseText

XMLHttpRequest 的 responseText 屬性包含了從伺服器傳送的資料。它是一個HTML,XML或普通文字，這取決於伺服器傳送的內容。

當 readyState 屬性值變成 4 時, responseText 屬性才可用，表明 Ajax 請求已經結束。

responseXML

如果伺服器返回的是 XML， 那麼資料將儲存在 responseXML 屬性中。

只用伺服器傳送了帶有正確首部資訊的資料時， responseXML 屬性才是可用的。 MIME 型別必須為 text/xml

AJAX開發框架

AJAX實質上也是遵循Request/Server模式，所以這個框架基本的流程是：

物件初始化

傳送請求

伺服器接收

伺服器返回

客戶端接收

修改客戶端頁面內容。

只不過這個過程是非同步的。

A  初始化XMLHttpRequest物件

function   createXmlHttpRequest(){

   var xmlHttp;

   try{    //Firefox, Opera 8.0+, Safari

           xmlHttp=new XMLHttpRequest();

    }catch (e){

           try{    //Internet Explorer

                  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

            }catch (e){

                  try{

                          xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

                  }catch (e){}  

           }

    }

   return xmlHttp;

 }

B、 指定響應處理函式

指定當伺服器返回資訊時客戶端的處理方式。只要將相應的處理函式名稱賦給XMLHttpRequest物件的onreadystatechange屬性就可以了.比如： 

        XMLHttpReq.onreadystatechange = processResponse;

注意:這個函式名稱不加括號，不指定引數。也可以用Javascript函式直接量方式定義響應函式。比如：

       XMLHttpReq.onreadystatechange = function() { };

// 處理返回資訊的函式

function   processResponse() {

}

C、發出HTTP請求 

向伺服器發出HTTP請求了。這一步呼叫XMLHttpRequest物件的open和send方法。

     http_request.open('GET', 'http://www.example.org/some.file', true);

     http_request.send(null)

按照順序，open呼叫完畢之後要呼叫send方法。send的引數如果是以Post方式發出的話，可以是任何想傳給伺服器的內容。

注意:如果要傳檔案或者Post內容給伺服器，必須先呼叫setRequestHeader方法，修改MIME類別。如下：

http_request.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);

    這時資料則以查詢字串的形式列出，作為send的引數，例如：

    name=value&anothername=othervalue&so=on

//傳送請求

function sendRequest(){

//獲取文字框的值

var chatMsg=input.value;

var url="chatServlet.do?charMsg="+chatMsg;

//建立對伺服器的呼叫

XMLHttpReq.open("POST",url,true);

//設定MiME類別,如果用 POST 請求向伺服器傳送資料，

//需要將"Content-type" 的首部設定為 "application/x-www-form-urlencoded".

//它會告知伺服器正在傳送資料，並且資料已經符合URL編碼了。

XMLHttpReq.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

//狀態改變的事件觸發器,客戶端的狀態改變會觸發readystatechange事件,

//onreadystatechange會呼叫相應的事件處理函式

XMLHttpReq.onreadystatechange=processResponse;

//傳送資料

XMLHttpReq.send(null);

}

D、處理伺服器返回的資訊

處理響應處理函式都應該做什麼。 

　　首先，它要檢查XMLHttpRequest物件的readyState值，判斷請求目前的狀態。參照前文的屬性表可以知道，readyState值為4的時候，代表伺服器已經傳回所有的資訊，可以開始處理資訊並更新頁面內容了。如下：

if (http_request.readyState == 4) {

    // 資訊已經返回，可以開始處理

} else {

    // 資訊還沒有返回，等待

}

　　伺服器返回資訊後，還需要判斷返回的HTTP狀態碼，確定返回的頁面沒有錯誤。所有的狀態碼都可以在W3C的官方網站上查到。其中，200代表頁面正常。

if (http_request.status == 200) {

      // 頁面正常，可以開始處理資訊

} else {

    // 頁面有問題

}

XMLHttpRequest對成功返回的資訊有兩種處理方式：

responseText：將傳回的資訊當字串使用；

responseXML：將傳回的資訊當XML文件使用，可以用DOM處理。 

//處理返回資訊的函式

function processResponse(){

   if(XMLHttpReq.readyState==4){ //判斷物件狀態 4代表完成

           if(XMLHttpReq.status==200){ //資訊已經成功返回，開始處理資訊

                  document.getElementById("chatArea").value=XMLHttpReq.responseText;

          }

   }

      }

資料格式提要

在伺服器端 AJAX 是一門與語言無關的技術。在業務邏輯層使用何種伺服器端語言都可以。

從伺服器端接收資料的時候，那些資料必須以瀏覽器能夠理解的格式來發送。伺服器端的程式語言只能以如下 3 種格式返回資料：

XML

JSON

HTML

XML

優點：

XML 是一種通用的資料格式。

不必把資料強加到已定義好的格式中，而是要為資料自定義合適的標記。

利用 DOM 可以完全掌控文件。

缺點：

如果文件來自於伺服器，就必須得保證文件含有正確的首部資訊。若文件型別不正確，那麼 responseXML 的值將是空的。

當瀏覽器接收到長的 XML 檔案後， DOM 解析可能會很複雜

JSON

JSON（JavaScript Object  Notation）一種簡單的資料格式，比xml更輕巧。JSON是JavaScript原生格式，這意味著在JavaScript中處理JSON資料不需要任何特殊的API或工具包。 

JSON的規則很簡單：物件是一個無序的“‘名稱/值’對”集合。一個物件以“{”（左括號）開始，“}”（右括號）結束。每個“名稱”後跟一個“:”（冒號）；“‘名稱/值’對”之間使用“,”（逗號）分隔。

   規則如下:

       1）對映用冒號（“：”）表示。名稱:值

       2）並列的資料之間用逗號（“，”）分隔。名稱1:值1,名稱2:值2

       3） 對映的集合（物件）用大括號（“{}”）表示。{名稱1:值1,名稱2:值2}

       4） 並列資料的集合（陣列）用方括號(“[]”)表示。

         [

           {名稱1:值,名稱2:值2},

           {名稱1:值,名稱2:值2}

         ]

      5  元素值可具有的型別：string, number, object, array, true, false, null 

JSON 用冒號(而不是等號)來賦值。每一條賦值語句用逗號分開。整個物件用大括號封裝起來。可用大括號分級巢狀資料。

物件描述中儲存的資料可以是字串，數字或者布林值。物件描述也可儲存函式，那就是物件的方法。

解析 JSON

JSON 只是一種文字字串。它被儲存在 responseText 屬性中

為了讀取儲存在 responseText 屬性中的 JSON 資料，需要根據 JavaScript 的 eval 語句。函式 eval 會把一個字串當作它的引數。然後這個字串會被當作 JavaScript 程式碼來執行。因為 JSON 的字串就是由 JavaScript 程式碼構成的，所以它本身是可執行的

程式碼例項：

JSON提供了json.js包，下載http://www.json.org/json.js後，使用parseJSON()方法將字串解析成 JS 物件 

JSON 只是一種文字字串。它被儲存在 responseText 屬性中

為了讀取儲存在 responseText 屬性中的 JSON 資料，需要根據 JavaScript 的 eval 語句。函式 eval 會把一個字串當作它的引數。然後這個字串會被當作 JavaScript 程式碼來執行。因為 JSON 的字串就是由 JavaScript 程式碼構成的，所以它本身是可執行的

程式碼例項：

JS處理JSON

例子一:

 <script language="JavaScript">

     var people ={"firstName": "Brett", "lastName":"McLaughlin", 

                                                        "email": "[email protected]" };

     alert(people.firstName);

     alert(people.lastName);

     alert(people.email);

 </script>

例子二:

 <script language="JavaScript">

      var people =[

                     {"firstName": "Brett","email": "[email protected]" },

                     {"firstName": "Mary","email": "[email protected]" }

                ];

    alert(people[0].firstName);

    alert(people[0].email);

    alert(people[1].firstName);

    alert(people[1].email); 

 </script>

例子三: 

<script language="JavaScript">

     var people ={

            "programmers":

              [

                {"firstName": "Brett", "email": "[email protected]" },

                {"firstName": "Jason", "email": "[email protected]" }

              ]

};

window.alert(people.programmers[0].firstName);

window.alert(people.programmers[1].email);

 </script>

例子四:

 <script language="JavaScript">

    var people ={

            "programmers": [

            { "firstName": "Brett", "email": "[email protected]" },

            { "firstName": "Jason",  "email": "[email protected]" },

            { "firstName": "Elliotte", "lastName":"Harold", "email": "[email protected]" }

           ],

          "authors": [

            { "firstName": "Isaac",  "genre": "science fiction" },

            { "firstName": "Tad", "genre": "fantasy" },

            { "firstName": "Frank",  "genre": "christian fiction" }

           ],

          "musicians": [

            { "firstName": "Eric",  "instrument": "guitar" },

            { "firstName": "Sergei", "instrument": "piano" }

           ]};

    window.alert(people.programmers[1].firstName);

    window.alert(people.musicians[1].instrument);

 </script>

例子五

 <script language="JavaScript">

      var people ={

             "username":"mary",

             "age":"20",

             "info":{"tel":"1234566","celltelphone":788666},

             "address":[

                     {"city":"beijing","code":"1000022"},

                     {"city":"shanghai","code":"2210444"}

              ]

        };

      window.alert(people.username);

      window.alert(people.info.tel);

      window.alert(people.address[0].city);

 </script>

JSON 小結

優點：

作為一種資料傳輸格式，JSON 與 XML 很相似，但是它更加靈巧。

JSON 不需要從伺服器端傳送含有特定內容型別的首部資訊。

缺點：

語法過於嚴謹

程式碼不易讀

eval 函式存在風險

解析 HTML

 HTML 由一些普通文字組成。如果伺服器通過 XMLHttpRequest 傳送 HTML， 文字將儲存在 responseText 屬性中。

不必從 responseText 屬性中讀取資料。它已經是希望的格式，可以直接將它插入到頁面中。

插入 HTML 程式碼最簡單的方法是更新這個元素的 innerHTML 屬性。

HTML 小結

優點：

從伺服器端傳送的 HTML 程式碼在瀏覽器端不需要用 JavaScript 進行解析。

HTML 的可讀性好。

HTML 程式碼塊與 innerHTML 屬性搭配，效率高。

缺點：

若需要通過 AJAX 更新一篇文件的多個部分，HTML 不合適

innerHTML 並非 DOM 標準。

對比小結

若應用程式不需要與其他應用程式共享資料的時候, 使用 HTML 片段來返回資料時最簡單的

如果資料需要重用, JSON 檔案是個不錯的選擇, 其在效能和檔案大小方面有優勢

當遠端應用程式未知時, XML 文件是首選, 因為 XML 是 web 服務領域的 “世界語”