1.6. The Ajax Technologies Here's a quick rundown of the various technologies involved in Ajax. To begin with, there are several that have always been popular on the Web, which are relatively well-understood by the development community. They are still used in Ajax applications, though sometimes in different ways.
HTML/XHTML As always, HTML provides the structure of a web page. An Ajax App uses an HTML document to show the initial page, and the document is continuously manipulated to change the display and set up new events. Where possible, its XML-compliant variant, XHTML, should be used in order to make manipulation more robust.
CSS CSS enriches the display and, thanks to stylesheets, helps separate document structure from style details. Fortunately, browsers are now reasonably consistent in their support for CSS2, so the past few years have seen many web sites shift from table-based layout, which was always something of a hack, to the cleaner, more flexible, CSS-based layout. From our perspective, the great thing about all this is that CSS can easily be manipulated with JavaScript. With just one line of code, you can make an object disappear, move it around the page, or alter its appearance.
HTTP, CGI, Form Submission As with conventional web applications, Ajax communicates via HTTP. The difference is that instead of returning full pages, the server returns concise results that are then processed in the browser script. Form submissionoften with CGI-style URLsis also used, but again is initiated programmatically, meaning that no page refresh need take place.
Server-Side Scripting The server is still required to perform tasks like data persistence and input validation. However, in some Ajax architectures, it no longer performs any duty of display or application logic, leaving those things for the browser script to handle. Ajax also adds a mix of newer technologies. I say "newer" with considerable reservation, because every one of them has actually been around for many years. It's just that they're only now becoming well-understood, standard across all major browsers, and combined together to produce a new style of application.
JavaScript One thing is true about any Ajax App: stuff happens in the browser. JavaScript is the client-side programming language that coordinates browser activity. Prior to Ajax, web developers might have sprinkled a little JavaScript into their pages, but few could claim to have a thorough understanding of the language. That's now changing, with developers making an effort to master JavaScript just as they would strive to learn any given server-side language.
XML and the Document Object Model (DOM) A DOM object is a hierarchical data structure representing an XML document, and JavaScript can read and manipulate DOM structures. One particularly important XML document is the current web page, since HTML is, loosely speaking, a dialect of XML (for most intents and purposes, browsers will treat it as such, though it's really only when you code in XHTMLan XMLicized form for HTMLthat you're truly using XML). Being a kind of XML document, the current web page is exposed as a DOM object in the browser, and by manipulating it, you can affect what's on the page (see Display Morphing and Page Rearrangement [Chapter 5]). In addition, there will be other DOM objects as well if you choose to talk to the server using XML Message.
Event model ("DHTML") The event model allows JavaScript to respond to events such as mouse clicks. This is the key to interactivity within the browsera conversation between the user and the web site (see User Action and Scheduling [Chapter 7]).
Web Remoting Web Remoting is the ability for JavaScript to talk directly with the serverno page refresh required. XMLHttpRequest dominates most of the headlines, but there are actually several viable remoting technologies (see XMLHttpRequest Call, IFrame Call, HTTP Streaming, and On-Demand JavaScript [Chapter 6]). |
