首頁 > web前端 > js教程 > Ajax與JSON資料互動存儲

Ajax與JSON資料互動存儲

php中世界最好的语言
發布: 2018-04-03 10:38:39
原創
1945 人瀏覽過

這次帶給大家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中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板