Table of Contents
In the previous two chapters, you studied web APIs, first that of Flickr and then of other applications. I showed you how to call APIs using REST, SOAP, and XML-RPC interfaces from PHP and Python. In this chapter, I’ll begin an analysis of one extremely important context where web APIs are used: JavaScript inside the modern web browser—the stuff called Ajax.
The term Ajax was coined as shorthand for Asynchronous JavaScript and XML. In Chapter 10, I’ll show you some of the underlying flow of data of Ajax when you learn how to fully exercise the Flickr API from JavaScript to create a mashup. In this chapter, I’ll teach you how to use Ajax widgets, JavaScript-based programs created by others to express some functionality, as a way to a study of Ajax. Along the way, you’ll learn how to use some debugging tools such as Firebug and the JavaScript Shell that will help you make sense of these widgets and, as I’ll show you later, the whole range of Ajax programming.
In the context of contemporary Web 2.0 development, Ajax is a big deal, particularly for how it allows you to mash up data and services in new and easier ways. Ajax exploits the fact that modern web browsers are programmable and that they are inherently network applications. In addition to sending static HTML to web browsers, programmers can send JavaScript programs to run in the web browser. What can be done with this type of JavaScript-based client-side programming?
You can achieve more dynamic interaction without having to reload the entire web page. This capability can be used, for instance, for drop-down menus and other widgets that we are used to having on the desktop.
In particular, JavaScript can be used to get data via formal and informal web APIs from a server without having to reload the entire web page.
Widgets can be created and deployed by other people. These widgets can be used to combine data and services and shown to other people. (Google Maps is the single most mashed-up API/service on the public Internet.)
JavaScript and DHTML are not new phenomena but have become extremely popular under the banner of Ajax. Jesse James Garrett says it well:[110]
But seeing Ajax as a purely technological phenomenon misses the point. If anything, Ajax is even more of a sea change for designers than it is for developers. Sure, there are a lot of ways in which developers need to change their thinking as they make the transition from building traditional web applications to building Ajax applications. But for those of us who design user experiences, the change brought about by Ajax is even more profound.
This chapter concentrates on helping you use Ajax to mash up data and services by doing the following:
Pointing out the Ajax-based parts of Flickr and contrasting the old style of web development that involved the reloading of an entire page to new-style development in which more logic is pushed to the client, opening up more opportunities for integration
Pointing out ways to see the difference between Ajax and non-Ajax apps by turning off JavaScript in the browser
Introducing the Yahoo! UI Library as a specific example of various JavaScript widget libraries
Introducing Google Maps, the single most used API as an example of a JavaScript widget
Using one of the JavaScript widget libraries to demonstrate how to use a widget (for example, the TreeView widget)
Showing how to write a basic Greasemonkey script as a way of mashing up services and data in the browser
Ajax, along with all its attendant use of JavaScript and the modern web browser, is a rich subject, as can be seen in the myriad of books that have been published recently on the subject. I’ll put Ajax in the larger context of the programmable web browser. To become a master programmer of the web browser, you should understand the following:
Both how an ideal W3C DOM standards-compliant browser works and how various browsers actually work in various areas: how JavaScript is implemented, object model behavior, CSS, and events
JavaScript-based APIs and widgets such as Google Maps—what they are and how to use them
Nonbrowser environments for JavaScript, such as Google Gadgets, Yahoo! Widgets, and Adobe Acrobat
Extension mechanisms in browsers (such as Firefox add-ons)
JavaScript and browser debugging tools such as Firebug
JavaScript libraries: how they relate and what can be intermixed—and which ones are tied to which web programming frameworks
What people have done already on all these fronts using JavaScript and remixing the browser
How to write JavaScript and JavaScript widgets that can be reused by other people, including cross-platform JavaScript
What you can do in terms of mashups
Fortunately, you do not need to know all these things to merely get started.