Hacking Gmail

54 Part II — Getting Inside Gmail

FIGURE5-1: The location of the

Gmail JavaScript shown with

the DOM inspector

Back to the browser, then, and you find you have a very complicated page seem-

ingly made up of close to 250KB of JavaScript, one iFrame you can see, and

apparently ten or more that don’t appear on the screen. Furthermore, the eagle-

eyed in our midst will have noticed that the Gmail URL doesn’t change very

much when you’re moving around the application. Changing from Inbox to All

Mail for the subset of your mail you want to see on the screen changes the page

but not the URL. For anyone used to, say, Hotmail, this is all very puzzling.

Preloading the Interface

What is actually happening is this: Gmail loads its entire interface into the one

single HTML page. When you move around the application, you’re not loading

new pages, but triggering the JavaScript to show you other parts of the page you

have already in your browser’s memory. This is why it is so fast: There’s no net-

work connection needed to bring up the Compose window, or show the Settings

page, as you’ve already loaded it. You can see this inside the DOM inspector.

Figure 5-2 shows the section of the page with the various divs, each containing

part of the interface.

You’ll remember from Chapter 4 that the div d_tlistcontains the majority of

the interface for the Inbox. Well, further inspection shows that d_compholds the

Compose window, and d_prefshold the Settings window, and so on.

This is all very interesting, but it doesn’t really show how the application works. If

anything, it asks a difficult question: if the page never refreshes, how does it send

or receive any messages? The answer to this is in the JavaScript, and the use of one

very clever function,XMLHttpRequest.