JSON在Ajax中有什么用

這篇文章主要介紹了JSON在Ajax中有什么用，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

雖然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()方法的示例：

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

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

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

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

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

{  {  "name":"WangMeng",  "email":"wangmeng@some-domain-name.com" },{  "name":"LinTao",  "email":"linTao@some-domain-name.com" },{  "name":"Jim",  "email":"jim@some-domain-name.com" }  }

可以發送一個Ajax請求取得以上數據，然后在客戶端使用下列代碼生成相應的<ul/>元素：

var xhr=createXHR();  xhr.onreadystatechange=function(){  if(xhr.readyState == 4){  if((xhr.status >= 200 && xhr.status < 300)|| xhr.status == 304){  var contacts=JSON.parse(xhr.responseText);  var list=document.getElementById("contacts");  for(var i=0,len=contacts.length;i<len;i++){  var li=document.createElement("li");  li.innerHTML="<a href=\"mailto:" + contacts[i].email + "\">" + contacts[i].name + "</a>";  list.appendChild(li);  }  }  xhr.open("get","addressbook.php",true);  xhr.send(null);  }  };

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

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

var contact={  name:"WangMeng",  email:"wangmeng@some-domain.com" };  var jsontext=JSON.stringify(contact);  alert(jsontext);

這個例子中的警告框會顯示下列未經縮進的字符串：
(\"name\":\"wangmeng\",\"email\":\"wangmeng\":\wangment@some-domain.com\)

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

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

var jsontext=JSON.stringify([new Function()],function(key,value){  if(value instanceof Function){  return "(function)";  }else{  return value;  }  });  alert(jsontext); //"(function)"

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

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

var xhr=createXHR();  var contact={  name:"wangmeng",  email:"wangmeng@some-domain.com" };  xhr.onreadystatechange=function(){  if(xhr.readyState == 4){  if((xhr.status <= 200 && xhr.status < 300) || xhr.status == 304){  alert(xhr.responseText);  }  }  };  xhr.open("post","addcontact.php",true);  xhr.send(JSON.stringify(contact));

這個例子是要將新聯系人信息保存到服務器，因此要將數據發送給addcontact.php文件。在根據新聯系人信息構建好contact對象后，又將它序列化為JSON數據并傳遞給send()方法。服務器上的PHP頁面負責將接受到的JSON數據解析回原來的格式，以便服務器端代碼能夠理解，同時還會向瀏覽器發送響應。

感謝你能夠認真閱讀完這篇文章，希望小編分享的“JSON在Ajax中有什么用”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，更多相關知識等著你來學習!