Chapter 8. Learning Ajax/JavaScript Widgets and Their APIs

Table of Contents

What You Need to Know
What Difference Does Ajax Make?
Learning Firebug, DOM Inspector, and JavaScript Shell
Using the DOM Inspector
Using the Firebug Extension for Firefox
Using the JavaScript Shell
Working with JavaScript Libraries
YUI Widgets
Using the YUI Calendar
Installing YUI on Your Host
Learning Google Maps
Accessing Flickr via JavaScript
Using Greasemonkey to Access New York Times Permalinks
Learning More About JavaScript and Ajax

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?

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:

What You Need to Know

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.

[110] Ajax Hacks by Bruce Perry (O’Reilly & Associates, 2006)