Ajax與JSON數(shù)據(jù)交互存儲

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

XML代表可擴展標記語言，是一種比較靈活的數(shù)據(jù)格式，很多應(yīng)用程序存儲數(shù)據(jù)都喜歡用到它，結(jié)構(gòu)像HTML，也包含元素，標簽以及屬性，模型都一樣。它的一大優(yōu)勢在于它是一種可擴展的格式，你并不會受制于某種預(yù)設(shè)的數(shù)據(jù)結(jié)構(gòu)；并且它還符合DOM標準，使用AJAX調(diào)用獲取到的數(shù)據(jù)就像解析HTML一樣，通過相應(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的一個嚴重的缺陷在于它不能用于跨域名的Aiax調(diào)用，也就是說每一個Ajax調(diào)用的XML數(shù)據(jù)都必須和執(zhí)行調(diào)用的腳本處于同一域名內(nèi)，否則請求會失敗。

HTML存儲也相似，它與Ajax結(jié)合起來最簡單。采用這種方式的數(shù)據(jù)格式的重要因素是速度，HTML代碼段無需在客戶端解析就能直接將其輸出到DOM之中，所以我們不需要再額外的編寫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>

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

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

變量

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

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

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

數(shù)組

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

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

對象

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

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

對象對效率的影響

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

JSON

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

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

這是一個 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最常見的用途就是配合API調(diào)用，在于API為基礎(chǔ)的網(wǎng)絡(luò)程序開發(fā)環(huán)境中，使用何種后端語言進行開發(fā)，數(shù)據(jù)格式都無需改變。

相信看了本文案例你已經(jīng)掌握了方法，更多精彩請關(guān)注Gxl網(wǎng)其它相關(guān)文章！

推薦閱讀：

Ajax如何讀取txt并對其內(nèi)容進行分頁展示

pushState+Ajax實現(xiàn)無刷新的頁面切換

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com