Audience
This documentation is designed for people familiar with JavaScript programming and object-oriented programming concepts. There are many JavaScript tutorials available on the Web.

Introduction
With the AJAX Feed API, you can download any public Atom or RSS feed using only JavaScript, so you can easily mash up feeds with your content and other APIs like the Google Maps API. See the program below for a simple example.

JavaScript and XMLHttpRequest use the Same-Origin Policy (SOP). With this policy, scripts can access data from the same host from which the containing page of HTML was served, but not other hosts. This protects users from certain classes of scripting attacks, but prevents many developers from writing AJAX-based mashups. The Google AJAX Feed API offers a simple workaround to these restrictions for a specific type of content available on the web: syndication feeds. See the security notes below for more details about how the AJAX Feed API preserves user security.

The “Hello, World” of the Google AJAX Feed API
The easiest way to start learning about this API is to see a simple example. The following example downloads the Digg RSS feed and displays the feed entry titles to the user:

You can download this example to edit and play around with it, but you’ll have to replace the key in that file with your own Google API key.

Including the AJAX Feed API on Your Page
To include the AJAX Feed API in your page, you need to both include the Google AJAX APIs script tag and call google.load(”feeds”, “1″):

The first script tag loads the google.load function, which lets you load individual Google APIs. google.load(”feeds”, “1″) loads Version 1 of the feeds API. Currently the AJAX Feed API is in Version 1, but new versions may be available in the future. See the versioning discussion below for more information.

Loading the API requires two steps because Google is moving to a new model of loading AJAX APIs to make it easier to include multiple Google APIs on your pages. Subscribe to the Google AJAX APIs Blog for announcements as we start rolling out this new AJAX API loading mechanism.

JSON and XML Result Formats
The AJAX Feed API can return feeds in two formats: JSON and XML. By default, the API returns the feed in the JSON format.

The AJAX Feed API JSON format is an abbreviated, canonicalized version of the original feed. It maps Atom and RSS attributes like title, description, and summary to a set of common JSON properties so that you can access Atom and RSS feeds uniformly. For example, the JSON result format returns the RSS attribute description as the JSON property content, just like Atom. Likewise, the RSS element pubDate is returned as the JSON property publishedDate to make the results uniform with Atom feeds. The JSON result format is useful if you only want to access standard RSS and Atom elements, and you don’t want to worry about the differences between feed formats. See the JSON example below or JSON result format specification for information.

If you specify the XML result format with setResultFormat, the AJAX Feed API will return the complete feed XML instead of JSON results. You can access the XML document with the standard XML DOM functions built into the browser. The XML result format is useful if you prefer using DOM functions to JSON or you need to access extension elements in the feed, like digg:diggCount. See the XML example below or XML result format specification for information.

You can also use both the JSON properties and the XML document to get the benefits of canonicalized attributes and access to XML extension elements. See the combined XML/JSON example below that uses the JSON attributes to access all of the entries in the feed, but uses the XML DOM to get the custom Digg digg:diggVotes element in the feed.

API Updates
The second argument to google.load is the version of the AJAX Feed API you are using. Currently the AJAX Feed API is in version 1, but new versions may be available in the future.

If we do a significant update to the API in the future, we will change the version number and post a notice on Google Code and the AJAX APIs discussion group. When that happens, we expect to support both versions for at least a month in order to allow you to migrate your code.

The AJAX Feed API team periodically updates the API with the most recent bug fixes and performance enhancements. These bug fixes should only improve performance and fix bugs, but we may inadvertently break some API clients. Please use the AJAX APIs discussion group to report such issues.

Examples
The Basics
This example downloads a single feed and displays the title of each entry to the user.

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(entry.title)); container.appendChild(div); } }});View example (helloworld.html)

JSON Result Format
This example is similar to the simple example above, but it displays most of the canonical JSON properties exposed by the AJAX Feed API. See the JSON result format specification for information.

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(entry[attributes[j]])); container.appendChild(div); } } }});View example (json.html)

XML Result Format
The following examples show how to access an RSS and Atom feed through the XML DOM rather than using the JSON results returned by the AJAX Feed API. The difference between accessing the two feeds is that the RSS example uses the RSS elements such as item and the Atom example uses Atom elements such as entry.

The first example directly accesses an RSS feed through the XML DOM. In the example, we take advantage of the getElementsByTagNameNS included in the AJAX Feed API to access the diggCount extension element in the Digg feed, which lets us display the number of votes next to the title in the output.

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); } }});View example (xml.html)

The second example directly accesses an Atom feed through the XML DOM. In this example, we again take advantage of the getElementsByTagNameNS included in the AJAX Feed API to access the elements in the Google Base feed.

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 priceElement = google.feeds.getElementsByTagNameNS(entries[i], “http://base.google.com/ns/1.0″, “price”)[0]; var price = priceElement.firstChild.nodeValue; var div = document.createElement(”div”); div.appendChild(document.createTextNode(title + ” (” + price + “)”)); container.appendChild(div); } }});View example (atomxml.html)

Pages: 1 2 3

Other News

• Discover the Lasso for making selections
• wordpress Plugins top 50
• Base AJAX Codes and Examples
• A Reason to Smile For All PHP Developers
• Discover Selection Modification 2: +Create work path
• Those factors in the Google Web site ranking
• How about discover hue and saturation
• Discover Image Size and Resolution
• Hit Tail, how to improve your SEO and improving long tail traffic
• Tags Are Not Categories – Got It?