September 30, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

Introducing the Google AJAX APIs

  • July 30, 2007
  • By Chris Schalk
  • Send Email »
  • More Articles »

A HelloWorld AJAX Feed Example

In a similarly simple fashion, learning how to use the AJAX Feed API is best done using a HelloWorld type example. As with the AJAX Search API, there also exists plenty of code examples at the AJAX Feed API homepage at http://code.google.com/apis/ajaxfeeds/. Here is a simple example using the AJAX Feed API's FeedControl.

<html>
   <head>
   <script type="text/javascript" src="http://www.google.com/
                 jsapi?key=YOUR-KEY"></script>
   <script type="text/javascript">

   google.load("feeds", "1");

   function initialize() {
      var feedControl = new google.feeds.FeedControl();
      feedControl.addFeed("http://www.digg.com/rss/index.xml",
                          "Digg");
      feedControl.addFeed("http://feeds.feedburner.com/Techcrunch",
                          "TechCrunch");
      feedControl.draw(document.getElementById("feedControl"));
   }
   google.setOnLoadCallback(initialize);

   </script>
   </head>

   <body>
      <div id="feedControl">Loading</div>
   </body>
</html>

As you can see, using the AJAX Feed FeedControl to pull down and display Internet feeds is done in a very similar manner as adding searchers to the AJAX Search control. When rendered on a web page, the AJAX Feed FeedControl renders feed items onto a page in a nicely formatted manner. If more than one feed is specified, their items can be stacked (as shown below) or placed in separate tabbed pages.

ajax feed helloworld

Figure 3: The AJAX Feed API in action

Before diving into more examples of how to use these rich AJAX solutions, it's helpful to first review the underlying architecture of Google's AJAX APIs that make these solutions possible.

The Architecture of Google's AJAX APIs

In short, the Google AJAX APIs serve as an enhanced conduit to several of Google's most popular hosted services. The hosted services such as Google Search or Google Maps can be accessed directly, but with AJAX APIs comes the ability to integrate these hosted services into anyone's custom web pages.

AJAX APIs Architecture

Figure 4: The AJAX APIs architecture at a glance

The way the AJAX APIs work is by allowing any web page that is hosted on the Internet access to Google search (or feed) data through JavaScript code. The core JavaScript code that fetches the search or feed data can be as simple as Search.execute( ) or Feed.load( ). As the request is made to Google's worldwide servers, a response of either Search data or prepared AJAX Feed data is streamed back to the Web page in either JSON (JavaScript Object Notation) or XML formats. Parsing of this data can either be done manually or automatically by using one of the provided UI controls that are built upon the lower level AJAX APIs. In fact, the AJAX APIs in general are architected in a layered fashion.





Page 3 of 6



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Sitemap | Contact Us

Rocket Fuel