XML & JSON
- XML與JSON都是用來儲存與傳遞交換資料的資料格式。
XML
- XML類似HTML，都是使用標籤，但是XML的標籤可以自己定義。
- : XML須有一個標籤作為root，其內的標籤稱為element(在<tag>與</tag>之內的元件)。element可以為空(empty)，也可以包含其他element(nested)。。
- 第一行<?xml version="1.0" encoding="UTF-8"?>是optional，可以不寫。
- 標籤可以有屬性(attribute)，e.g. <role language="human-language">，也可以將其變成role內的一個element，可自行決定。
- : 之前已提到可以使用HttpRequest來取得伺服器中的XML檔案內容，取得資料後可以parse然後得到我們想要的資訊。假定已經取得xml資料字串，依以下方式parse。
- script寫在</body>之前，才讀取得到。
- text是取得的資料字串，建立DOMParser()物件，然後使用parseFromString(text, "text/xml")方法parse。
- 使用getElementsByTagName("occupation")取得tag，跟之前提到的DOM一樣，此標籤的childNode[]為其中之文字node，取得其nodeValue即為文字內容。
- 若使用getElementsByTagName("weapon")[0]，表示得到weapon標籤，其下的childNodes[1]為righthand標籤，再其下的childeNodes[0]則為文字node。
- : 以下的例子為使用HttpRequest取得XML資料來parse然後顯示，亦可參考Ajax的說明。
- 在此直接取得lefthand與righthand標籤來得到其中的資料。
- : 在xml1_xml.xml檔案中包含兩個role，在選取xmlDoc.getElementsByTagName()會得到哪一個?原則上可以得到一個陣列，以下例說明。
- 在前例中，若改為取得getElementsByTagName("occupation")[1]，則會得到mage，若是siblings數量較大，則可以使用for loop來traverse，因此使用xmlDoc.getElementsByTagName("occupation")來得到所有occupation的陣列。
- 也可以使用xmlDoc.getElementsByTagName("role")來得到role的陣列，然後使用DOM來traverse(會比較複雜)，例如x[i].childNodes[5]會得到第3個child(1,3,5,...)。
- : 類似的element(siblings)可以將其定義為不同的namespace，此時element的tag便視為不同了，e.g. xml2.xml。
- 此xml中w:role與m:role為兩個不同的tag，其下的element也是位於不同的namespace。使用下例來parse。
- 在此例中使用xmlDoc.getElementsByTagName("w:role")，所以僅會得到namespace為w的element，所以最後印出所有在此namespace內的role occupation。
xml1_xml.xml
xml1_parse.html
xml1_parse1.html
xml1_parse2.html
xml2.xml
xml1_parse3.html
XSLT
- XSLT(eXtensible Stylesheet Language Transformations)可用來將XML轉換成HTML，所以可以用來顯示XML的內容。XSLT比CSS來得精細，不只可以設計style，還可以增加移除元件，或是重新排列元件。
- : XSL是Style Sheets for XML的意思，而XSLT是XSL Transformations，是XSL最重要的部分。以下例子使用xslt1.xml為例，此檔案內容與Ajax3.xml內容相同。
- 因為要將xslt1.xsl的顯示設定連結至xslt1.xml，所以在xslt1.xml的最上方須加上這一行<?xml-stylesheet type="text/xsl" href="xslt1.xsl"?>。而因為xslt.xsl是一種XML文件，所以可加上<?xml version="1.0" encoding="UTF-8"?>。
- 將兩檔案上傳至伺服器，然後開啟xslt1.xml即可。
- 在xslt1.xsl中，需有根標籤(root)為<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">或<xsl:transform version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">。
- XSLT內包含一或多個顯示準則，稱之為templates。使用xsl:template標籤來實現，其match屬性是用來連結一個template一個XML element，match="/"表示定義整個文件。template內定義一些HTML來顯示資料。
- <xsl:value-of select="occupation" />中的value-of為select屬性所對應的標籤資料，也可以定義其路徑(XPath)，e.g. select="/wow/role/occupation" 。
- XPath是XSLT標準中的主要元件，可用來找到elements and attributes。
- 語法是使用"/"來自root node開始選擇，"//"是從目前的node來選擇，"."表示選擇目前的node，".."表示選擇目前node的parent，"@"表示選擇屬性，"*"是wild card，匹配所有的element node，"@*"對應任何有屬性的點，"node()"表示任何的點。
- "/wow/role[1]"表示選擇所有的wow的子節點中的第一個role節點，"/wow/role[last()]"表示最後一個role節點，"/wow/role[position()<3]則表示選擇前兩個。"
- 使用for-each來選擇每一個element，可以使用選擇條件，e.g. <xsl:for-each select="wow/role[occupation='warrior']">。
- 若想針對其中的某屬性排序，可使用e.g. <xsl:sort select="level"/>，將此行加入到<xsl:for-each select="wow/role">之後一行然後觀察結果。
- 也可以使用if來做判斷，e.g. <xsl:if test = "level > 22"> or <xsl:if test = "gender = 'Female'">。
- if之後的test屬性包含要被推估的條件敘述。
- 還可以使用choose(when...otherwise)來進行較複雜的條件選擇，例如將其中部分程式碼改為如下。
xslt1.xsl
JSON
- JSON(JavaScript Object Notation)也是用來儲存跟交換資料，原則上就是內容就是文字，但可以輕易地轉換成JavaScript物件。JSON跟XML的不同處是JSON不使用end tag，所以內容較為簡短，且可以較快的讀取。最大的不同是XML必須使用XML parser來parse，而JSON可以經由標準的JavaScript函數來parse。
- JSON的內容格式類似Python的dict或是Java的Map，原則上就是key(name)跟value的資料對。當我們得到JSON的資料字串(如前所述之JSONP)，我們可以輕易地使用JSON.parse()函數來parse資料。 。
- JSON的格式與JavaScript物件格式幾乎一模一樣，JSON的key(name)需要使用雙引號包覆，所以必須是字串，而在JavaScript中，key可以是字串或是其他，，且不需要使用雙引號包覆。
- JSON的value可以是string, number, object(JSON object), array, boolean, null，而JavaScript物件除了上述的內容，還可以是function, date, undefined。JSON中的value若是字串需使用雙引號包覆，而JavaScript則可以使用單引號。
- 將JSON資料parse成JavaScript物件後，便可以以物件的方式操作。e.g. 使用obj.occupation或obj["level"]來取得資料，或是obj.race = "Night-elf";(obj["race"] = "Night-elf";)來修改資料。
- 上述是將JSON變成物件，若是要將物件變成JSON，則使用stringify函數。
- stringify可以用在物件或是陣列(也就是說也可以傳遞陣列)。
- 再看一個parse的例子。
- 在此例中JSON包含Nested的資料，若要取得其中資料，可使用roleobj.weapon.left。
- 因為parse成為JavaScript物件，所以可以使用for loop來iterate，不過在取得物件資料時須使用roleobj[x]，不可使用roleobj.x。
- 若是要刪除物件屬性，使用delete關鍵字(e.g. delete roleboj.weapon.left)。
json1.html
json2.html
json3.html