AJAX In Action [24]
Web browser
CSS styling
Define
look and feel
JavaScript
logic
Talk to
Define
web server
content and
Document
layout
Object
model
XMLHttpRequest Object
Web server
Figure 2.1 The four main components of Ajax: JavaScript defines
business rules and program flow. The Document Object Model and
Cascading Style Sheets allow the application to reorganize its appearance in response to data fetched in the background from the server by the XMLHttpRequest object or its close cousins.
Licensed to jonathan zheng 34 CHAPTER 2 First steps with Ajax Three of the four technologies—CSS, DOM, and JavaScript—have been collectively referred to as Dynamic HTML, or DHTML for short. DHTML was the Next Big Thing around 1997, but not surprisingly in this industry, it never quite lived up to its initial promise. DHTML offered the ability to create funky, interactive interfaces for web pages, yet it never overcame the issue of the full-page refresh. Without going back to talk to the server, there was only so much that we could do. Ajax makes considerable use of DHTML, but by adding the asynchronous request, it can extend the longevity of a web page considerably. By going back to the server while the interface is doing its stuff, without interruption, Ajax makes a great difference to the end result. Rather conveniently, all of these technologies are already preinstalled in most modern web browsers, including Microsoft’s Internet Explorer; the Mozilla/ Gecko family of browsers, including Firefox, Mozilla Suite, Netscape Navigator, and Camino; the Opera browser; Apple’s Safari; and its close cousin Konqueror, from the UNIX KDE desktop. Inconveniently, the implementations of these technologies are frustratingly different in some of the fine details and will vary from version to version, but this situation has been improving over the last five years, and we have ways of coping cleanly with cross-browser incompatibilities. Every modern operating system comes with a modern browser preinstalled. So the vast majority of desktop and laptop computers on the planet are already primed to run Ajax applications, a situation that most Java or .NET developers can only dream about. (The browsers present in PDAs and Smartphones generally offer a greatly cut-down feature list and won’t support the full range of Ajax technologies, but differences in screen size and input methods would probably be an issue even if they did. For now, Ajax is principally a technology for desktop and laptop machines.) We’ll begin by reviewing these technologies in isolation and then look at how they interoperate. If you’re a seasoned web developer, you’ll probably know a lot of this already, in which case you might like to skip ahead to chapter 3, where we begin to look at managing the technologies by using design patterns. Let’s start off our investigations by looking at JavaScript. 2.2 Orchestrating the user experience with JavaScript The central player in the Ajax toolkit is undoubtedly JavaScript. An Ajax application downloads a complete client into memory, combining data and presentation and program logic, and JavaScript is the tool used to implement that logic. Licensed to jonathan zheng Orchestrating the user experience with JavaScript 35 JavaScript is a general-purpose programming language of mixed descent, with a superficial similarity to the C family of languages. JavaScript can be briefly characterized as a loosely typed, interpreted, generalpurpose scripting language. Loosely typed means that variables are not declared specifically as strings, integers, or objects, and the same variable may be assigned values of different types. For example, the following is valid code: var x=3.1415926; x='pi'; The variable x is defined first as a numeric value and reassigned a string value later. Interpreted means that it is not compiled into executable code, but the source code is executed directly.