這裡要介紹的是快速將 JSON/CSV/XML檔案的內容至 wordpress 裡的方法, 介紹使用工具為:
https://wordpress.org/plugins/wp-all-import/
雖然沒有 JSON 檔案格式, 不過可以利用這個線上工具進行:
標籤: XML
在解析 xml 資料時, 若只是取出一些固定欄位資料, 除了用 regular expression 或是指令字串比對方式外, 利用 XPath 來操作算是比較正規的作法.
有效利用 XPath 可以快速地選擇到需要查詢出來的資料, 而且更正確更有效地取出資料. 例如想要取出下面資料(bb.xml):
<root>
<app>
<name>test1</name>
<tick>20</tick>
<pt>12</pt>
</app>
<app>
<tick>test2</tick>
<value>32</value>
<pt>15</pt>
</app>
</root>
若要取出的是 app name=test1 的資料, 並讀出 value 的方式, 可以如下操作(以asp/vbs為例):
Set xmlhttp = Server.CreateObject("MSXML2.ServerXMLHTTP")
xmlhttp.Open "GET", "http://localhost/bb.xml", False
xmlhttp.Send
Set root = xmlhttp.responseXML
Set app = root.selectSingleNode("//app[name=""test1""]")
Set tick = app.selectSingleNode("//tick")
Response.Write tick.text
也就是利用 XPath 的 //app[name=”test1″] 來取出 app node 內容有 name 值是 test1 的 node 出來, 之後再利用 //tick 將該 node 下的 tick node 取出, 再用 text 讀出該值為 20.
若只需要取出 value 的值, 而不是要將 app node select 出來使用, 可以一行搞定, 如下:
Response.Write root.selectSingleNode("//app[name=""test1""]//tick").text
這樣操作很快也很有效, 而且可以找對各節點的關連關係. 在操作 xml 時, 得要好好學習的一個工具.
參考資料:
http://www.w3schools.com/xpath/xpath_syntax.asp
http://zvon.org/xxl/XPathTutorial/General/examples.html
http://msdn.microsoft.com/en-us/library/d271ytdx.aspx
[2011/9/16 17:23]
補充若有 xmlns (xml namespace) 的狀況下, 取不出 node(s) 的問題:
http://www.dotblogs.com.tw/rainmaker/archive/2011/09/16/36457.aspx
這篇文章很單純的一個應用需求, 就是要取遠端文字檔內容, 但該文字檔內容是個 log file, 會隨時間愈來愈大, 如何能只取出部分最後的內容呢? 否則隨時間愈長, 每次取回來都會愈久, 而且其實需要的內容只有最後一部分, 也就是要像 tail 的功能.
若不在遠端主機上寫程式, 就得思考一下 http header 方式如何設定 request, 馬上想到一個續傳的應用, 也就是指定 Range header 的方式來對遠端的 web 主機下達只取出某個部分, 可以參考這裡對 Range header 的說明:
http://www.aslibra.com/blog/post/http_header_detail.php
若依這次的需求, 可以指定只要最後的 50k 的話, 可以利用 Range: bytes=-51200 若用 asp 程式實作可以這樣寫:
Set xmlhttp = Server.CreateObject("MSXML2.ServerXMLHTTP")
xmlhttp.Open "GET", "http://webserver/data.log", False
xmlhttp.setRequestHeader "Range", "bytes=-51200"
xmlhttp.Send
xmlData = xmlhttp.ResponseTEXT
Set xmlhttp = Nothing
Response.Write xmlData
這樣一樣可以不用在遠端的 web server 上實作程式, 又能快速地取出最後 50k 的資料內容, 實在非常方便, 又能節能減碳, 利用 Request Header 來解決, 真是快速啊!
之前介紹過 XML/SWF Charts , 可以參考這篇: XML/SWF Charts好用繪製圖表組件 https://diary.tw/archives/316 , 這裡要介紹另一個好用的組件, FusionCharts Free (http://www.fusioncharts.com/free/), 為什麼說是 Free 呢, 因為, 他也有付費的版本, 而這個 Free 的版本是要免費給大家使用, 並且進一步使用那家公司其他的工具(再來付費), 真是不錯的好方法.
這個組件是用 flash 實作的, 提供了以下種類的圖表,
- 3D/2D Column & Bar Charts
- Line Charts
- 2D/3D Pie & Doughnut Charts
- Area Charts
- Stacked Charts
- Candlestick Charts
- Funnel Chart
- Gantt Chart
比較特別的是這個 Gantt Chart, 一般的繪圖組件, 比較少見這個類型的圖表, 十分特別, 其他的圖表也都很美觀, 而接下來我們就來進行實作吧.
該元件有支援中文, 不過輸出中文的資料檔要有 BOM, 也就是 UTF-8檔頭, 否則不能輸出正確的中文, 我們以簡單的一個 Line Chart 來看.
基本上, 要畫一個 Line Chart 使用的元件是 FCF_Line.swf 這個 flash 組件, 而餵給他的參數共有 &dataURL=data1.php&chartWidth=640&chartHeight=480, 其中的 dataURL 為另外的一支餵資料的程式, 可以是任何型態的 server 程式碼或是靜態的網頁, 而 chartWidth 及 chartHeight 則是圖表的寬高. 若是要給中文, 一定要用 UTF-8 with BOM 的方式, 才能正常顯示中文.
再來就是這個 data1.php 的內容, 基本上有幾個重點, 先看圖形根節點:
<graph baseFont="system" caption="年度銷售" subcaption="台北地區" xAxisName="月份" showNames="1" showValues="0" formatNumberScale="0" decimalPrecision="0" >
其中 baseFont 是指定字型, 若是中文, 儘量用 “system” 這個字型, 而 caption 就是圖表標題, 而 subcaption 是副標, 會在標題下方, xAxisName 是 x 軸說明, showNames 是 x 軸資料的名稱是否要顯示(本例為 1, 2, 3, .. 12), showValues 是指每個資料點上的值是否要秀出, formatNumberScale 是用來表現大數字時, 是否要用 k, m 等來表示, 如 30,000 會顯示為 30K, 而 decimalPrecision 則是指要小數點幾位.
再來是資料內容, 被包在 <graph ></graph> 這組內, 現在要 demo 是簡單版的, 就是只有一個數值要繪製, 可以直接將 name value 放成資料在上面的 graph 裡, 以此例來看, 就是這樣:
<set name="n1" value="12000" hoverText="name1" /> <set name="n2" value="19000" hoverText="name2" /> ....
其中 set 是一個一個的資料, 而 name 是在 x 軸上的名稱, hoverText 是當 mouseOver 時, 會在數值點上的名稱, 整個秀出來的結果如下:
可以參考這個 sample: http://sample.diary.tw/19/chart1.php , 資料在此: http://sample.diary.tw/19/data1.php , 其中的 flash 語法如下:
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="640" height="480" id="Line" > <param name="movie" value="./FCFCharts/FCF_Line.swf?dataURL=data1.php&chartWidth=640&chartHeight=480" /> <param name="quality" value="high" /> <embed src="./FCFCharts/FCF_Line.swf?dataURL=data1.php&chartWidth=640&chartHeight=480" quality="high" width="640" height="480" name="Line" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> </object>
這樣就能順利繪出所需要的 Line Chart 折線圖了.
至於多數列的部分, 這裡再整裡一下, 多數列會面臨不能用一個 <set > 將資料標籤和資料值組包在一起, 所以需要分開作, 而且, 重點在於多數列使用的 swf 組件為 FCF_MSLine.swf, 原來的 FCF_Line.swf 只能畫單數列.
graph 的部分不變, 用法相同.
再定義 x 軸, 如下:
<categories> <category Name="Jan" /> <category Name="Feb" /> ... </categories>
再定義數列, 此例為兩列數列:
<dataset seriesName="PC" color="aabb00" anchorBorderColor="aabb00" anchorRadius="4"> <set value="12000" /> <set value="19000" /> ... </dataset> <dataset seriesName="NB" color="00aabb" anchorBorderColor="00aabb" anchorRadius="4"> <?php <set value="17000" /> <set value="22000" /> ... </dataset>
最後一樣用 </graph> 包起來即可, 範例在此: http://sample.diary.tw/19/chart2.php , 其資料在此: http://sample.diary.tw/19/data2.php
PS 注意以上範例的 value 都利用 php 亂數產生的, 所以每次值會不同, 而這組 swf 圖表的好處是若只要用 Line Chart 則使用 FCF_Line.swf , 而多組數列, 則用 FCF_MSLine.swf 都是獨立 swf 組件, 而且, 餵給他的參數中 dataURL=[filename] 的部分, 不需要再自組亂數在後面(避免 cache 問題, 因為他會自己加, 如下:)
那個 curr=80 就是他 flash swf 自行呼叫的加上的亂數, 比較自動一點.
結論是這組繪畫組件也十分輕量好用, 一個 swf 檔 20k 左右, 用哪一種就 embed 哪一種, 個個獨立操作, 而若不想用 dataURL 給 script 的方式, 也可以用 dataXML 將字串直接用 querystring 的方式餵給他, 就不需要再寫 script, 看實際應用方便來調整囉.
而單組和多組數列的圖表繪製使用的 swf 組件也不同, 主要由檔名就看得出來了, 就是多了 MS 的都是多組數列的哦.
有什麼問題, 大家可以一起討論看看.
幾天前, 好友問了一個問題, responseXML 沒有資料, 要怎麼解決, 我沒仔細思考, 完全沒注意到, responseXML就是一個非文字的物件, 於是寫了個程式試了一下, 發現原來 Request 回傳的內容, 若為 xml 的話, 取得 responseXML 屬性, 將會是一個 xml document 物件.
然而, 若回傳的資料並為是 well-formed xml 時, 該屬性將會是 null 而無法使用. 而一般常用的 ajax 若只是用來做畫面更新, 而非資料傳遞時, 可以參考這篇: https://diary.tw/archives/274 的例子, 是直接使用 responseText 來取回回傳的一般文字內容.
這樣應該可以清楚地解釋這兩者間的不同, 還有許多技術文章可以參考:
http://java.chinaitlab.com/server/366657.html
http://javascript.about.com/library/blajax08.htm
http://www.informit.com/articles/article.asp?p=443580&seqNum=4&rl=1
這篇的技巧也相當有用, 利用回傳的文字, 傳回 javascript, 再利用 eval 方式將變數賦值, 的確還蠻有意思的:
http://www.128kj.com/article/article6/9467334B1D15AAC57AA5F0F25D0008FF.htm?id=1343
寫 javascript 對一般的網頁程式設計人員來說, 應該是家常便飯, 舉凡一些需要在 client side 完成的事, 大多會利用 javascript 來操作, 例如滑鼠經過換色, 或是檢查 form (表單)在送出前的一些資料正確性檢查(ps. 一定要記得在 server side 也要再次檢查, 以確保資料的正確性)或方便使用者輸入的自動更正等功能.
javascript 的功能強大, 又加上高階, 物件化等特性, 使得撰寫 javascript 的程式設計人員十分愛用, 也方便許多在 client side 就可以先完成的一些動作, 再加上最近的 Ajax 風行, javascript 無疑變成十分熱門的語言.
JSON (Javascript Object Notation)相信很多人有聽過, 但也有很多人不知道這個東西, 他是附屬在 javascript 下的一組物件描述方法, 這個網站介紹十分詳細: http://www.json.org/, 有很容易了解的圖示幫助使用者了解 JSON 物件的描述方式.
JSON 是利用了成對的 {} 來包住各物件(object), 用成對的 [] 來包任各陣列(array), 用成對的 “” 來包住各字串, 用逗號來區隔各變數, 而資料型態有 string, number, array, object, 另外有三個常數, true, false, null. 下面描述了一個 object obj1 擁有兩個成員變數, 而另一個為 array 擁有 5 個 number 的範例:
{ 'obj1': {
'child1':'value1',
'child2':'value2'
},
'array1': [1, 2, 3, 4, 5]
};