AJAX開發框架

A 初始化XMLHttpRequest物件

B指定響應處理函式

C發出HTTP請求

D處理伺服器返回的資訊

資料格式提要

優點

缺點

解析 JSON

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);

}

//傳送請求

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);

}

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

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

if (http_request.readyState == 4) {

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

} else {

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

}

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

if (http_request.status == 200) {

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

} else {

// 頁面有問題

}

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

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

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

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服務領域的“世界語”

http://blog.csdn.net/chuyuqing/article/details/8687614