Google Ajax Feed API試用
Fri, 20 Apr 2007 17:49:28 +0800今天看到新聞，google發表新的ajax api，叫做feed api，可以從其他網站讀取rss、atom資料。看起來不錯又容易上手，所以來試試看。
網址：http://code.google.com/apis/ajaxfeeds/
要使用這個api一定要去google申請，他會為申請使用的url產生一組key，必需要用這個key才能把他的api引用進來，之後在這個url及次目錄中均可使用。
申請完成以後，他會在網頁上顯示你申請網址產生的key，以及一個簡單的sample。只要利用這個sample code 就可以應用主要的功能了。以下是google產生的sample code：
先用申請的key來引用google ajax feed api：
＜script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAA-ocbLlp5OH3I3TK-WDpoFhRoleihMAzPXqmwBMBn1VmZtQsreRRopkPGhtnsPBpu_epnuTbhzWq_Sw"＞＜/script＞
（注意：以上範例裡的"＜"、"＞"都是全形的，不能直接用）
接著是主要的程式（直接從google網站來，幾乎沒改）：
google.load("feeds", "1");
function initialize() {
var feed = new google.feeds.Feed("http://blog.fillano.idv.tw/rss.php?blogId=1&profile=rss20");
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("feed");
for (var i = 0; i ＜ result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var div = document.createElement("div");
div.appendChild(document.createTextNode(entry.title));
container.appendChild(div);
}
}
});
}
google.setOnLoadCallback(initialize);
網頁中有一個id為feed的div，結果就會在這裡顯示出來。但是目前只顯示出title而已，所以還需要再改造一下才能用。從sample code的程式看起來，東西都會放在entries陣列裡面，每個元素事一個物件，但是在sample code裡面除了title我不知道還有什麼property。所以先寫一個小程式來probe一下，先把for迴圈整個註解掉，改成以下的程式：
for (i in result.feed.entries[0]) {
alert(i + ": " + result.feed.entries[0][i]);
}
這樣可以找出，透過lifetype的rss2.0，取回的物件包含幾個properties：title, link, author, publishedDate, contentSnippet, content, categories。
接著修改一下程式，讓他顯示更多資訊：
google.load("feeds", "1");
function initialize() {
var feed = new google.feeds.Feed("http://blog.fillano.idv.tw/rss.php?blogId=1&profile=rss20");
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById("feed");
for (var i = 0; i ＜ result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var div = document.createElement("div");
var title = document.createElement("p");
var link = document.createElement("a");
link.href = entry.link;
link.appendChild(document.createTextNode(entry.title));
link.target = "_blank";
title.appendChild(link);
title.appendChild(document.createTextNode(" | "+entry.categories+" | "+entry.author+" | "
+entry.publishedDate));
hr = document.createElement("hr");
hr.width = "100%";
hr.size = "1";
snippet = document.createElement("p");
snippet.appendChild(document.createTextNode(entry.contentSnippet));
div.appendChild(title);
div.appendChild(hr);
div.appendChild(snippet);
container.appendChild(div);
}
}
});
}
google.setOnLoadCallback(initialize);
最後利用css再加一點修飾就可以看了。