讓你的網頁動態取得del.icio.us bookmark
ajax, delicious, development, json, web_services at February 11th, 2007 by 小影
這個blog雖然一直有tag的功能，不過這都只是作者我所訂下的。在我迷上del.icio.us後我就想，如果能讓讀者都可以加tag那不是很有趣？是否有甚麼方法在網頁中顯示某一頁在del.icio.us中的tags、並讓用者可以自行加入更多的tags？
最先想到的是用五六年前己經使用的方法：用php讀取del.icio.us的網頁，再把結果處理顯示出來。幸好近幾年開放源碼和服務的風氣，一些主要的網路公司如Google、Yahoo己經開放他們的API，我們可以經WebService存取它們的資料。del.icio.us也不例外，它開放了一系列的Web Service，其中JSON的服務讓用戶用JavaScript經HTTP存取有關的資料。
JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。易於人閱讀和編寫。同時也易於機器解析和生成。
以下是使用JSON向del.icio.us查詢一個網頁的tags的源碼
{[.src-1 /enzymes/chili-js.php]}
使用後的效果如下圖，網頁會由del.icio.us顯示讀取信息並把結果顯示出來。
非同步的JSON
如果細心留意加了上面源碼的網頁，你會發現網頁載入到一半停了下來，要等一會才會完整顯示全頁。這是因為這樣讀取JavaScript不是「非同步(Asynchronous)」的動作，Browser要等完全載入整個script才會繼續處理餘下的頁面。我們希望browser首先載入整個網頁，再從外部讀取資料，在取得資料後再把它顯示出來。怎樣才可以用非同步的方式使用JSON？只要稍為更改源碼即可辦到：
放在網頁 < head > 裏的JavaScript：
{[.src-2 /enzymes/chili-js.php]}
以上源碼有三個function：
- callDelicious() ：在文件的HEAD中加入一個SCRIPT的tag，效果是向del.icio.us存取資料，當完成後會呼叫displayDelicious()。留意當中呼叫的URL有一個MD5 hash了的URL，這是由於del.icio.us要求使用目標網頁的URL作key去讀取資料。我使用了Paul Johnson’s 的JavaScript MD5 Library把制作MD5。
- displayDelicious()：在我們拿到del.icio.us的資料後，顯示輸出用的function
- addDelicious()：讓用者增加del.icio.us bookmark的function
放在內文裏的HTML：
{[.src-3 /enzymes/xml.php]}
結語
以上只是基本的JSON應用，使用JSON輕鬆地做出AJAX一樣效果的動態網頁。如上文所說，除了del.icio.us外，如Google或Yahoo也有開放API讓用戶以JSON方式存取資料。如果你想開發Web Application，可以考慮用JSON取代笨重和兼容性低的XML/AJAX。如果你在研發Web Service請考慮加入支援JSON，因為那幾乎不花費任何人力又可以省下許多資源！
相關連結
(工作關系，這篇寫了停了整整一個月還沒有完工，趁有點時間終於攪定了…)
1 Trackback(s)