Mastering Ajax, Part 4: Exploiting DOM for Web response

Filed Under (Tutorials) by admin on 18-03-2006

Over at the IBM developerWorks website a new tutorial on Ajax and DOM has been posted.

Like many Web programmers, you have probably worked with HTML. HTML is how programmers start to work on a Web page; HTML is often the last thing they do as they finish up an application or site, and tweak that last bit of placement, color, or style. And, just as common as using HTML is the misconception about what exactly happens to that HTML once it goes to a browser to render to the screen. Before I dive into what you might think happens — and why it is probably wrong — I want you need to be clear on the process involved in designing and serving Web pages:

Someone (usually you!) creates HTML in a text editor or IDE.

You then upload the HTML to a Web server, like Apache HTTPD, and make it public on the Internet or an intranet.

A user requests your Web page with a browser like Firefox or Safari.

The user’s browser makes a request for the HTML to your Web server.

The browser renders the page it receives from the server graphically and textually; users look at and activate the Web page.

While this feels very basic, things will get interesting quickly. In fact, the tremendous amount of "stuff" that happens between steps 4 and 5 is what the focus of this article. The term "stuff" really applies too, since most programmers never really consider exactly what happens to their markup when a user’s browser is asked to display it:

Does the browser just read the text in the HTML and display it?

What about CSS, especially if the CSS is in an external file?

And what about JavaScript — again often in an external file?

How does the browser handle these items and how does it map event handlers, functions, and styles to that textual markup?

It turns out that the answer to all these questions is the Document Object Model. So, without further ado, let’s dig into the DOM.