Ajax與用戶交互的JSON數(shù)據(jù)存儲(chǔ)格式

數(shù)據(jù)存儲(chǔ)是JavaScript的核心功能，這是一個(gè)在學(xué)習(xí)前期的一個(gè)容易讓人迷惑的問(wèn)題。它并不是那種像頁(yè)面滑動(dòng)、幻燈片展示、淡入淡出等吸引人眼球的特效。適當(dāng)?shù)拇娣藕脭?shù)據(jù)，就有利于我們組織起結(jié)構(gòu)，又能使應(yīng)用程序稍后訪問(wèn)這些內(nèi)容更加容易。JavaScript提供了各種不同的數(shù)據(jù)存儲(chǔ)方式，它是一個(gè)從基本到未來(lái)走向的演化模式：

XML代表可擴(kuò)展標(biāo)記語(yǔ)言，是一種比較靈活的數(shù)據(jù)格式，很多應(yīng)用程序存儲(chǔ)數(shù)據(jù)都喜歡用到它，結(jié)構(gòu)像HTML，也包含元素，標(biāo)簽以及屬性，模型都一樣。它的一大優(yōu)勢(shì)在于它是一種可擴(kuò)展的格式，你并不會(huì)受制于某種預(yù)設(shè)的數(shù)據(jù)結(jié)構(gòu)；并且它還符合DOM標(biāo)準(zhǔn)，使用AJAX調(diào)用獲取到的數(shù)據(jù)就像解析HTML一樣，通過(guò)相應(yīng)的DOM方法和屬性解析它：

ingredient>
prison>
name>apple/name>
color>red/color>
/prison>
prison>
name>tomato/name>
color>red/color>
/prison>
prison>
name>peach/name>
color>pink/color>
/prison>
prison>
name>pitaya/name>
color>green/color>
/prison>
/ingredient>

但是XML的一個(gè)嚴(yán)重的缺陷在于它不能用于跨域名的Aiax調(diào)用，也就是說(shuō)每一個(gè)Ajax調(diào)用的XML數(shù)據(jù)都必須和執(zhí)行調(diào)用的腳本處于同一域名內(nèi)，否則請(qǐng)求會(huì)失敗。

HTML存儲(chǔ)也相似，它與Ajax結(jié)合起來(lái)最簡(jiǎn)單。采用這種方式的數(shù)據(jù)格式的重要因素是速度，HTML代碼段無(wú)需在客戶端解析就能直接將其輸出到DOM之中，所以我們不需要再額外的編寫(xiě)JavaScript代碼解析HTML。

ul>
li>a href="boke.js">apple:red/a>/li>
li>tomato:red/li>
li>peach:pink/li>
li>piyata:green/li>
/ul>

說(shuō)說(shuō)它的缺點(diǎn)，它存儲(chǔ)的數(shù)據(jù)可能和HTML代碼混合在一起，所以說(shuō)可維護(hù)性降低。另外在編寫(xiě)處理代碼時(shí)，開(kāi)發(fā)者可能需要在服務(wù)器端做一些精細(xì)的控制手段。

以下是使用JavaScript進(jìn)行數(shù)據(jù)存儲(chǔ)的手段，循序漸進(jìn)…

變量

JavaScript最為基礎(chǔ)的數(shù)據(jù)存儲(chǔ)方式，它接受字符串、數(shù)值、布爾等。最核心的內(nèi)容是它的作用域問(wèn)題。

于變量相關(guān)的性能問(wèn)題：

變量在聲明完之后，就會(huì)被緩存到JavaScript文件中，于是在作用域內(nèi)就可以反復(fù)的使用它們了，獲取變量的開(kāi)銷(xiāo)微乎其微，只要數(shù)據(jù)的使用次數(shù)大于1，就應(yīng)該將其存入變量。

數(shù)組

數(shù)組跟普通數(shù)組、關(guān)聯(lián)數(shù)組和多維數(shù)組，它們都是元素列表，這種形式是各種數(shù)據(jù)存儲(chǔ)中非常靈活的一種。掌握了數(shù)組最基本的形式，也會(huì)對(duì)其他復(fù)雜形式的運(yùn)用大有脾益。數(shù)組元素的訪問(wèn)合一處是常見(jiàn)的基本交互代碼。鑒于數(shù)組這種數(shù)據(jù)存儲(chǔ)類型的重要性，JavaScript為數(shù)組交互操作提供了大量的專屬方法：

.join() 方法 可以指定某個(gè)字符可作為數(shù)組內(nèi)每個(gè)元素的連接符；slice() 方法可以輸出數(shù)組中某個(gè)范圍內(nèi)的元素；shift()和unshift() 方法 分別用于在數(shù)組頭部移除或新增元素；pop() 方法 用于移除并返回?cái)?shù)組中的最后一個(gè)元素；concat() 方法 用于將多個(gè)數(shù)組拼接成一個(gè)數(shù)組，按參數(shù)的先后而定；sort()方法 可以按照字母表順序或自定義順序來(lái)排列數(shù)組的元素，但是只會(huì)根據(jù)首字符排序，一般都是錯(cuò)誤的。

對(duì)象

在數(shù)據(jù)變得更加復(fù)雜、更加難以管理的情況下，我就會(huì)選擇將數(shù)組轉(zhuǎn)換為對(duì)象。因?yàn)閷?duì)象的存儲(chǔ)方式更加易讀。

//對(duì)象數(shù)據(jù)存儲(chǔ)
var meatball = {
bread:"wang",
meat :"li",
cheese : "zhang"
};
//返回對(duì)象的bread 
alert(meatball.bread);

對(duì)象對(duì)效率的影響

上面的代碼只有一層，然而它是可以無(wú)限嵌套的。對(duì)象能更好的組織代碼，提高模塊化的程度。不過(guò)與此同時(shí)，還是需要考慮性能和可維護(hù)性的權(quán)衡問(wèn)題，因?yàn)樗枰獙ふ疫@三者中的一個(gè)。如果是運(yùn)用面向?qū)ο缶幊碳夹g(shù)，嵌套達(dá)到3層及以上，就會(huì)引發(fā)性能問(wèn)題；但是在服務(wù)器端運(yùn)用時(shí)就不是這樣了，所以前端開(kāi)發(fā)者要決定什么時(shí)候使用面向?qū)ο缶幊碳夹g(shù)。

JSON

JSON是一種易于同jacascript 集成的數(shù)據(jù)格式，它通常是在用JavaScript調(diào)用外部服務(wù)器時(shí)使用的。JSON數(shù)據(jù)存放于獨(dú)立的文件中，而且通常位于另一臺(tái)完全不同的服務(wù)器上。它現(xiàn)在是最常見(jiàn)的一種調(diào)用API服務(wù)時(shí)所使用的數(shù)據(jù)格式，人們之所以選中它，是因?yàn)榇烁袷椒浅Ｒ子陂喿x。起初，JSON格式是作為一種XML格式的替代方案而出現(xiàn)的，但很快它就在數(shù)據(jù)交換領(lǐng)域占據(jù)了主流的地位。它是一種輕量級(jí)的數(shù)據(jù)格式，易于通過(guò)遠(yuǎn)程Ajax調(diào)用進(jìn)行跨域名訪問(wèn)。盡管JavaScript對(duì)JSON格式的解析提供了原生的支持，但它還是一種獨(dú)立于平臺(tái)的格式，客戶端與服務(wù)器端在數(shù)據(jù)交換時(shí)都可以使用。

由于JSON格式具備跨域名訪問(wèn)的能力，所以為了防止一切惡意行為，我們務(wù)必只使用從可信的數(shù)據(jù)源中獲取JSON。

這是一個(gè) Salad.json 數(shù)據(jù)文件：

//ajax JSON Salad
var ingredient = {
"fruit":[
{
"name" : "apple",
"color" : "green"
},
{
"name" : "tomato",
"color" : "red"
},
{
"name" : "peach",
"color" : "pink"
},
{
"name" : "pitaya",
"color" : "white"
},
{
"name" : "lettuce",
"color" : "green"
}
]
};

JSON最常見(jiàn)的用途就是配合API調(diào)用，在于API為基礎(chǔ)的網(wǎng)絡(luò)程序開(kāi)發(fā)環(huán)境中，使用何種后端語(yǔ)言進(jìn)行開(kāi)發(fā)，數(shù)據(jù)格式都無(wú)需改變。

以上所述是小編給大家介紹的Ajax與用戶交互的JSON數(shù)據(jù)存儲(chǔ)格式，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！