這次帶給大家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與JSON資料互動存儲的詳細內容。更多資訊請關注PHP中文網其他相關文章!