April 18, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

Introducing the Google AJAX APIs, Page 4

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

The AJAX APIs Layered Architecture

The AJAX APIs are designed in a layered architecture that provides different functionality at different levels. If someone wants to use the APIs at its lowest, or "raw," level, one can do so, albeit providing they are comfortable with more advanced JavaScript and AJAX programming. People less comfortable with JavaScript programming, or who don't want to re-invent the wheel, can use the APIs at higher levels. In short, the AJAX APIs offer programming solutions to a variety of developers based on their background because of its layered approach.

Here is how the AJAX APIs along with their respective UI controls are layered:



Click here for a larger image.

Figure 5: The AJAX APIs Layered architecture at a glance

As you can see in Figure 5, The AJAX APIs have a layered architecture. Here's a more thorough description of each layer starting at the lowest level:

  • Raw Data Access Layer: This layer provides a very low-level access to the AJAX Search and Feed services from Google's servers. If you operate at this level, you have full control of how to display the data as it comes down from Google's servers to your page. In short, it's Google's data, but your User Interface. Accessing the AJAX Search and Feed data provided by Google's services involves true AJAX programming as JavaScript developer's have to be skilled with technologies such as JSON as well as manipulating the DOM (The Document Object Model).
  • Base UI Layer: The base UI layer provides some very basic User Interface technology out of the box. At this layer, one doesn't need to resort to low-level JSON parsing or DOM manipulation. He can simply use some basic User Interface controls such as the FeedControl as is and let it do the work of communicating back to the server to pull down data and display it.
  • Advanced UI Layer: The Advanced UI Layer provides the highest level of sophistication and specialization from the AJAX APIs. At this level exist UI controls that are specialized to provide a specific solutions such as a Google Maps and Search mashup, a Video Bar, or for the Feed API, a SlideShow, or Itunes Bar.

The Raw Data Access Layer

A good demonstration of programming at the Raw Data Access Layer can be shown with the AJAX Feed API. Instead of using the powerful FeedControl, it is possible to to extract the Feed data directly and write your own code to display the fields. This is useful if you want be in 100% full control of how your data renders. In this Raw Data Access Layer version of a AJAX Feed Hello World example, you see how to pull down a feed from digg.com, extract the title element, and display it onto the page using DOM programming.

<html>
   <head>
   <script type="text/javascript" src="http://www.google.com/
           jsapi?key=YOUR_KEY_HERE"></script>
   <script type="text/javascript">
      google.load("feeds", "1");
      function initialize() {
         var feed = new google.feeds.Feed("http://www.digg.com/
                                           rss/index.xml");
         feed.setNumEntries(7);
         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);
   </script>
   </head>
   <body>
      <div id="feed"></div>
   </body>
</html>
Note: It's important to remember that this is an example of accessing the raw data at its lowest level. As shown elsewhere in this article, the AJAX Feed FeedControl widget, which is not used in the previous code example, actually performs the task of rendering the feed data into the page, but more on that later...

A quick inspection of the preceding code shows how the feed is loaded and a callback function is registered to handle the incoming feed results. The function iterates through the feed entries and, for each entry title, it appends the text of the title to a <div> container. Incidentally, the entry.title element is one of several elements made available via the canonicalized or unified JSON output of the AJAX Feed API. Why is it unified? For the simple reason that the AJAX Feed API serves several versions of both the RSS and Atom feed formats and with a unified version, programmers can just use a single set of elements and be guaranteed that it will work for multiple feed types. This allows for extreme flexibility when pulling down feed data of different formats.





Page 4 of 6



Comment and Contribute

 


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

 

 


Sitemap | Contact Us

Rocket Fuel