談JSON在Ajax中的使用

標籤：

JSON是一種輕量級的資料交換格式。易於人閱讀和編寫，同時也易於機器解析和產生。AJAX是一種用於建立更好更快以及互動性更強的 Web 應用程式的技術。之前也曾介紹過在PHP語言中使用JSON的文章，大家也可以看看，供參考。

雖然XML在Ajax運行中具有舉足輕重的地位，但JavaScript開發人員很快就對它失去了興趣。在JavaScript中操作XML存在嚴重的跨瀏覽器問題，而且從XML結構中提取資料也需要涉及遍曆DOM文檔，而這些操作都需要編寫大量的代碼。Douglas Crockford發明了一種叫JSON（JavaScript Object Notation）的資料格式卻能夠建立與XML相同的資料結構。JSON的基礎是JavaScript文法中一個子集，特別是對象和數組字面量。JSON的設計意圖是在伺服器構建格式化資料，然後再將資料發送給瀏覽器。

由於JSON在JavaScript中相當於對象和數組，轉換速度快，而且便於在JavaScript代碼中訪問，JSON在Ajax通訊中越來越受開發人員的追捧。Web開發社區已經為幾乎所有主流的語言都開發了JSON解析器和序列化器，使得通過伺服器輸出和使用JSON資料變得極為容易。

Douglas Crockford自己也維護著一個針對JavaScript的JSON序列化器/解析器，為http://www.json.org/js.html，可以去下載那個JavaScript檔案，且該檔案在所有瀏覽器都能正常使用。此外，IE8中包含了Crockford解析器的原生版本。

在Crockford的這個JSON庫中，有一個全域對象，這個對象有兩個方法：parse()和stringify()。其中，parse()方法接受兩個參數：JSON文本和一個可選的過濾函數。在傳入的文本是有效JSON的情況下，parse()方法會返回傳入資料的一個對象表示。下面是使用parse()方法的樣本：

1. var object=JSON.parse("()"); 

與直接使用eval()不同的是這裡不需要為傳入的文本加圓括弧。

第二個參數是一個函數，這個函數以一個JSON鍵和值作為參數。要想讓作為參數傳入的的鍵出現有結果對象中，該函數必須返回一個值。它的傳回值將成為結果對象中與指定鍵關聯的值，因此也就為我們重寫預設的解析機制提供了機會。換句話說，在這個函數中針對某個鍵返回undefined，就會從結果對象中移除該鍵。如下面的例子所示：

1. var jsontext="{"\name\":\"WangGang\",\"age\":29,\"author\":true }";  
2. var object=JSON.parse(jsontext,function(key,value){  
3. switch(key){  
4. case "age": return value+1;  
5. case "author": return undefined;  
6. default: return false;  
7. }  
8. });  
9. alert(object.age) //30  
10. alert(object.author) //undefined 

在以上代碼中，過濾函數會為每個"age"鍵的值加1,會移除資料中的"author"鍵,其他值則會原樣返回。於是，結果對象中的age屬性值就變成了30，但是卻沒有author屬性，這種解析功能經常用於處理伺服器返回的資料。假設addressbook.php會以下面的格式返回JSON資料：

1. {  
2. {  
3. "name":"WangMeng",  
4. "email":"[email protected]" 
5. },{  
6. "name":"LinTao",  
7. "email":"[email protected]" 
8. },{  
9. "name":"Jim",  
10. "email":"[email protected]" 
11. }  
12. } 

可以發送一個Ajax請求取得以上資料，然後在用戶端使用下列代碼產生相應的<ul/>元素：

1. var xhr=createXHR();  
2. xhr.onreadystatechange=function(){  
3. if(xhr.readyState == 4){  
4. if((xhr.status >= 200 && xhr.status < 300)|| xhr.status == 304){  
5. var contacts=JSON.parse(xhr.responseText);  
6. var list=document.getElementById("contacts");  
7. for(var i=0,len=contacts.length;i<len;i++){  
8. var li=document.createElement("li");  
9. li.innerHTML="<a href=\"mailto:" + contacts[i].email + "\">" + contacts[i].name + "</a>";  
10. list.appendChild(li);  
11. }  
12. }  
13. xhr.open("get","addressbook.php",true);  
14. xhr.send(null);  
15. }  
16. }; 

以上代碼從伺服器取得了JSON字串，然後將它解析成了JavaScript數組，得到數組後，通過迭代遍曆其中的每個對象，很容易就可以將相應的值插入到DOM中。具體來說，<ul/>元素會包含一些<li/>元素，而每個<li/>元素則會包含一個連結，點擊可以向一個人寄送電子郵件。

JSON同樣也是向伺服器發送資料的瀏覽格式。發送資料時，一般會把JSON放到POST元素請求主體中，而JSON對象的stringify()方法正是為此而設計的。這個方法接受3個參數：要序列化的對象，可選的替換函數（用於替換未接受的JSON值）和可選的縮排說明符（可以是每個層級縮排的空格數，也可是用來縮排的字元）。預設情況下，stringify()返回未經縮排的JSON字串，下面是一個例子：

1. var contact={  
2. name:"WangMeng",  
3. email:"[email protected]" 
4. };  
5. var jsontext=JSON.stringify(contact);  
6. alert(jsontext); 

這個例子中的警告框會顯示下列未經縮排的字串：
(\"name\":\"wangmeng\",\"email\":\"wangmeng\":\[email protected]\)

由於並不是所有JavaSrcipt值都可以使用JSON表示，因此結果中只會包含那些正式得到支援的值。例如，函數和undefined值無法通過JSON表示，包含它們的任何鍵預設都將被移除。要改變這個預設的行為，可以在第二個參數的位置傳入一個函數。在序列化過程 中每當遇到一個不支援的資料類型時，該函數就會在被序列化的對象中範圍中運用，其參數是相應的鍵和值。

對於JSON支援的資料類型，序列化過程中不會調用這個函數，這些類型包括：字串、數值、布爾值、null、對象、數組和Date。來看下面的例子：

1. var jsontext=JSON.stringify([new Function()],function(key,value){  
2. if(value instanceof Function){  
3. return "(function)";  
4. }else{  
5. return value;  
6. }  
7. });  
8. alert(jsontext); //"(function)" 

這個例子試圖序列化一個包含函數的數組。當遇到函數值時，第二個參數（即過濾函數）會將它轉換為字串"(function)",該字串將出現在最終結果中。

使用POST請求並將JSON文本傳遞給send()方法，可以將JSON資料發送給伺服器。來看下面的例子：

1. var xhr=createXHR();  
2. var contact={  
3. name:"wangmeng",  
4. email:"[email protected]" 
5. };  
6. xhr.onreadystatechange=function(){  
7. if(xhr.readyState == 4){  
8. if((xhr.status <= 200 && xhr.status < 300) || xhr.status == 304){  
9. alert(xhr.responseText);  
10. }  
11. }  
12. };  
13. xhr.open("post","addcontact.php",true);  
14. xhr.send(JSON.stringify(contact)); 

這個例子是要將新連絡人資訊儲存到伺服器，因此要將資料發送給addcontact.php檔案。在根據新連絡人資訊構建好contact對象後，又將它序列化為JSON資料並傳遞給send()方法。伺服器上的PHP頁面負責將接受到的JSON資料解析回原來的格式，以便伺服器端代碼能夠理解，同時還會向瀏覽器發送響應。

談JSON在Ajax中的使用