www.developer.com/design/article.php/3691506
|
By Chris Schalk July 30, 2007 The AJAX APIs Layered ArchitectureThe 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:
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:
The Raw Data Access LayerA 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>
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. |
| Go to page: Prev 1 2 3 4 5 6 Next |