The Basics
示範從單一 feed 取得資料, 並且顯示每個內容的標題.
Code:
<![CDATA[
var feed = new google.feeds.Feed("http://www.digg.com/rss/index.xml");
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((i+1) + '. ' + entry.title));
container.appendChild(div);
}
}
});
]]>
Demo:
JSON Result Format
這範例與上面基本範例很類似, 但是它顯示了 AJAX Feed API 最典型的 JSON 屬性. 詳細內容可參考
JSON result format specification.
Code:
<![CDATA[
var feed = new google.feeds.Feed("http://www.digg.com/rss/index.xml");
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 attributes = ["title", "link", "publishedDate", "contentSnippet"];
for (var j = 0; j < attributes.length; j++) {
var div = document.createElement("div");
div.appendChild(document.createTextNode(attributes[j] + ': ' + entry[attributes[j]]));
container.appendChild(div);
}
container.appendChild(document.createElement("hr"));
}
}
});
]]>
Demo:
XML Result Format
使用 XML DOM 取代 JSON 來讀取 RSS 跟 Atom feed. 兩種 feed 之間最大不同的地方是 RSS 使用
item 而 Atom 則使用
entry.
第一個範例是使用 XML DOM 直接讀取 RSS feed. 範例中使用了 AJAX Feed API 的
getElementsByTagNameNS 來取得 Digg Feed 中
diggCount 這個增設的資料.
Code:
<![CDATA[
var feed = new google.feeds.Feed("http://www.digg.com/rss/index.xml");
feed.setResultFormat(google.feeds.Feed.XML_FORMAT);
feed.load(function(result) {
var container = document.getElementById("feed");
if (!result.error) {
var items = result.xmlDocument.getElementsByTagName("item");
for (var i = 0; i < items.length; i++) {
var titleElement = items[i].getElementsByTagName("title")[0];
var title = titleElement.firstChild.nodeValue;
var votesElement = google.feeds.getElementsByTagNameNS(items[i], "http://digg.com/docs/diggrss/", "diggCount")[0];
var votes = votesElement.firstChild.nodeValue;
var div = document.createElement("div");
div.appendChild(document.createTextNode(title + " (" + votes + " votes)"));
container.appendChild(div);
}
}
});
]]>
Demo:
第二個範例是使用 XML DOM 直接讀取 Atom feed. 範例中使用了 AJAX Feed API 的
getElementsByTagNameNS 來取得 Google Base Feed 中的資料.
Code:
<![CDATA[
var feed = new google.feeds.Feed("http://www.google.com/base/feeds/snippets");
feed.setResultFormat(google.feeds.Feed.XML_FORMAT);
feed.load(function(result) {
var container = document.getElementById("feed");
if (!result.error) {
var entries = google.feeds.getElementsByTagNameNS(result.xmlDocument, "http://www.w3.org/2005/Atom", "entry");
for (var i = 0; i < entries.length; i++) {
var titleElement = google.feeds.getElementsByTagNameNS(entries[i], "http://www.w3.org/2005/Atom", "title")[0];
var title = titleElement.firstChild.nodeValue;
var updatedElement = google.feeds.getElementsByTagNameNS(entries[i], "http://www.w3.org/2005/Atom", "updated")[0];
var updated = updatedElement.firstChild.nodeValue;
var div = document.createElement("div");
div.appendChild(document.createTextNode(title + " (" + updated + ")"));
container.appendChild(div);
}
}
});
]]>
Demo:
Combined JSON/XML Result Format
這範例將上面的 XML 重新作一遍, 但是結合 JSON/XML DOM 格式.
Code:
<![CDATA[
var feed = new google.feeds.Feed("http://www.digg.com/rss/index.xml");
feed.setResultFormat(google.feeds.Feed.MIXED_FORMAT);
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 votesElement = google.feeds.getElementsByTagNameNS(entry.xmlNode, "http://digg.com/docs/diggrss/", "diggCount")[0];
var votes = votesElement.firstChild.nodeValue;
var div = document.createElement("div");
div.appendChild(document.createTextNode(entry.title + " (" + votes + "votes)"));
container.appendChild(div);
}
}
});
]]>
Demo:
發表文章
