Ajax與JSON資料互動存儲

這次帶給大家Ajax與JSON資料互動存儲，Ajax與JSON資料互動儲存的注意事項有哪些，以下就是實戰案例，一起來看一下。

資料儲存是JavaScript的核心功能，這是一個在學習前期的一個容易讓人迷惑的問題。它並不是那種像是頁面滑動、幻燈片展示、淡入淡出等吸引人眼球的特效。適當的存放好數據，就有利於我們組織起結構，又能讓應用程式稍後存取這些內容更加容易。 JavaScript提供了各種不同的資料儲存方式，它是一個從基本到未來走向的演化模式：

XML代表可擴展標記語言，是一種比較靈活的資料格式，許多應用程式儲存數據都喜歡用到它，結構像HTML，也包含元素，標籤以及屬性，模型都一樣。它的一大優點在於它是一種可擴展的格式，你並不會受制於某種預設的資料結構；而且它還符合DOM標準，使用AJAX呼叫所獲得的資料就像解析HTML一樣，透過相應的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調用，也就是說每一個Ajax調用的XML資料都必須和執行調用的腳本處於同一網域內，否則請求會失敗。

HTML儲存也相似，它與Ajax結合最簡單。採用這種方式的資料格式的重要因素是速度，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>

說說它的缺點，它儲存的資料可能和HTML程式碼混合在一起，所以說可維護性降低。另外在編寫處理程式碼時，開發者可能需要在伺服器端做一些精細的控製手段。

以下是使用JavaScript進行資料儲存的手段，循序漸進…

變數

JavaScript最為基礎的資料儲存方式，它接受字串、數值、布林等。最核心的內容是它的作用域問題。

於變數相關的效能問題：

變數在宣告完後，就會被快取到JavaScript檔案中，於是在作用域內就可以反覆的使用它們了，取得變數的開銷微乎其微，只要資料的使用次數大於1，就應該存入變數。

數組

數組跟普通數組、關聯數組和多維數組，它們都是元素列表，這種形式是各種資料存儲中非常靈活的一種。掌握了陣列最基本的形式，也會對其他複雜形式的運用大有脾臟。陣列元素的存取合一處是常見的基本互動程式碼。鑑於數組這種資料儲存類型的重要性，JavaScript為數組交互操作提供了大量的專屬方法：

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

物件

在資料變得更加複雜、更難管理的情況下，我會選擇將陣列轉換為物件。因為物件的儲存方式比較易讀。

//对象数据存储
var meatball = {
bread:"wang",
meat :"li",
cheese : "zhang"
};
//返回对象的bread 
alert(meatball.bread);

物件對效率的影響

上面的程式碼只有一層，然而它是可以無限嵌套的。物件能更好的組織程式碼，提高模組化的程度。不過同時，還是需要考慮效能和可維護性的權衡問題，因為它需要尋找這三者中的一個。如果是運用物件導向程式設計技術，嵌套達到3層以上，就會引發效能問題；但是在伺服器端運用時就不是這樣了，所以前端開發者要決定什麼時候使用物件導向編程技術。

JSON

#

JSON是一种易于同jacascript 集成的数据格式，它通常是在用JavaScript调用外部服务器时使用的。JSON数据存放于独立的文件中，而且通常位于另一台完全不同的服务器上。它现在是最常见的一种调用API服务时所使用的数据格式，人们之所以选中它，是因为此格式非常易于阅读。起初，JSON格式是作为一种XML格式的替代方案而出现的，但很快它就在数据交换领域占据了主流的地位。它是一种轻量级的数据格式，易于通过远程Ajax调用进行跨域名访问。尽管JavaScript对JSON格式的解析提供了原生的支持，但它还是一种独立于平台的格式，客户端与服务器端在数据交换时都可以使用。

由于JSON格式具备跨域名访问的能力，所以为了防止一切恶意行为，我们务必只使用从可信的数据源中获取JSON。

这是一个 Salad.json 数据文件：

//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调用，在于API为基础的网络程序开发环境中，使用何种后端语言进行开发，数据格式都无需改变。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

Ajax如何读取txt并对其内容进行分页展示

pushState+Ajax实现无刷新的页面切换

以上是Ajax與JSON資料互動存儲的詳細內容。更多資訊請關注PHP中文網其他相關文章！