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

創(chuàng)新互聯(lián)公司專(zhuān)注于前鋒企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站,電子商務(wù)商城網(wǎng)站建設(shè)。前鋒網(wǎng)站建設(shè)公司,為前鋒等地區(qū)提供建站服務(wù)。全流程定制網(wǎng)站制作，專(zhuān)業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)公司專(zhuān)業(yè)和態(tài)度為您提供的服務(wù)

雖然XML在Ajax運(yùn)行中具有舉足輕重的地位，但JavaScript開(kāi)發(fā)人員很快就對(duì)它失去了興趣。在JavaScript中操作XML存在嚴(yán)重的跨瀏覽器問(wèn)題，而且從XML結(jié)構(gòu)中提取數(shù)據(jù)也需要涉及遍歷DOM文檔，而這些操作都需要編寫(xiě)大量的代碼。Douglas Crockford發(fā)明了一種叫JSON（JavaScript Object Notation）的數(shù)據(jù)格式卻能夠創(chuàng)建與XML相同的數(shù)據(jù)結(jié)構(gòu)。JSON的基礎(chǔ)是JavaScript語(yǔ)法中一個(gè)子集，特別是對(duì)象和數(shù)組字面量。JSON的設(shè)計(jì)意圖是在服務(wù)器構(gòu)建格式化數(shù)據(jù)，然后再將數(shù)據(jù)發(fā)送給瀏覽器。

由于JSON在JavaScript中相當(dāng)于對(duì)象和數(shù)組，轉(zhuǎn)換速度快，而且便于在JavaScript代碼中訪問(wèn)，JSON在Ajax通信中越來(lái)越受開(kāi)發(fā)人員的追捧。Web開(kāi)發(fā)社區(qū)已經(jīng)為幾乎所有主流的語(yǔ)言都開(kāi)發(fā)了JSON解析器和序列化器，使得通過(guò)服務(wù)器輸出和使用JSON數(shù)據(jù)變得極為容易。

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

在Crockford的這個(gè)JSON庫(kù)中，有一個(gè)全局對(duì)象，這個(gè)對(duì)象有兩個(gè)方法：parse()和stringify()。其中，parse()方法接受兩個(gè)參數(shù)：JSON文本和一個(gè)可選的過(guò)濾函數(shù)。在傳入的文本是有效的JSON的情況下，parse()方法會(huì)返回傳入數(shù)據(jù)的一個(gè)對(duì)象表示。下面是使用parse()方法的示例：

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

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

第二個(gè)參數(shù)是一個(gè)函數(shù)，這個(gè)函數(shù)以一個(gè)JSON鍵和值作為參數(shù)。要想讓作為參數(shù)傳入的的鍵出現(xiàn)有結(jié)果對(duì)象中，該函數(shù)必須返回一個(gè)值。它的返回值將成為結(jié)果對(duì)象中與指定鍵關(guān)聯(lián)的值，因此也就為我們重寫(xiě)默認(rèn)的解析機(jī)制提供了機(jī)會(huì)。換句話說(shuō)，在這個(gè)函數(shù)中針對(duì)某個(gè)鍵返回undefined，就會(huì)從結(jié)果對(duì)象中移除該鍵。如下面的例子所示：

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

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

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

可以發(fā)送一個(gè)Ajax請(qǐng)求取得以上數(shù)據(jù)，然后在客戶(hù)端使用下列代碼生成相應(yīng)的<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);  }  };

以上代碼從服務(wù)器取得了JSON字符串，然后將它解析成了JavaScript數(shù)組，得到數(shù)組后，通過(guò)迭代遍歷其中的每個(gè)對(duì)象，很容易就可以將相應(yīng)的值插入到DOM中。具體來(lái)說(shuō)，<ul/>元素會(huì)包含一些<li/>元素，而每個(gè)<li/>元素則會(huì)包含一個(gè)鏈接，點(diǎn)擊可以向一個(gè)人發(fā)送電子郵件。

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

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

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

由于并不是所有JavaSrcipt值都可以使用JSON表示，因此結(jié)果中只會(huì)包含那些正式得到支持的值。例如，函數(shù)和undefined值無(wú)法通過(guò)JSON表示，包含它們的任何鍵默認(rèn)都將被移除。要改變這個(gè)默認(rèn)的行為，可以在第二個(gè)參數(shù)的位置傳入一個(gè)函數(shù)。在序列化過(guò)程 中每當(dāng)遇到一個(gè)不支持的數(shù)據(jù)類(lèi)型時(shí)，該函數(shù)就會(huì)在被序列化的對(duì)象中作用域中運(yùn)用，其參數(shù)是相應(yīng)的鍵和值。

對(duì)于JSON支持的數(shù)據(jù)類(lèi)型，序列化過(guò)程中不會(huì)調(diào)用這個(gè)函數(shù)，這些類(lèi)型包括：字符串、數(shù)值、布爾值、null、對(duì)象、數(shù)組和Date。來(lái)看下面的例子：

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

這個(gè)例子試圖序列化一個(gè)包含函數(shù)的數(shù)組。當(dāng)遇到函數(shù)值時(shí)，第二個(gè)參數(shù)（即過(guò)濾函數(shù)）會(huì)將它轉(zhuǎn)換為字符串"(function)",該字符串將出現(xiàn)在最終結(jié)果中。

使用POST請(qǐng)求并將JSON文本傳遞給send()方法，可以將JSON數(shù)據(jù)發(fā)送給服務(wù)器。來(lái)看下面的例子：

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

這個(gè)例子是要將新聯(lián)系人信息保存到服務(wù)器，因此要將數(shù)據(jù)發(fā)送給addcontact.php文件。在根據(jù)新聯(lián)系人信息構(gòu)建好contact對(duì)象后，又將它序列化為JSON數(shù)據(jù)并傳遞給send()方法。服務(wù)器上的PHP頁(yè)面負(fù)責(zé)將接受到的JSON數(shù)據(jù)解析回原來(lái)的格式，以便服務(wù)器端代碼能夠理解，同時(shí)還會(huì)向?yàn)g覽器發(fā)送響應(yīng)。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“JSON在Ajax中有什么用”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

網(wǎng)頁(yè)名稱(chēng)：JSON在Ajax中有什么用
網(wǎng)頁(yè)路徑：http://chinadenli.net/article44/pipiee.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、虛擬主機(jī)、網(wǎng)站設(shè)計(jì)公司、網(wǎng)站改版、電子商務(wù)、全網(wǎng)營(yíng)銷(xiāo)推廣

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)