1 AJAX開發框架
6 資料格式提要
6 優點
6 缺點
7 解析 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