Ajax - Beginning JavaScript - page 436

What is ajax?
Essentially, Ajax allows client‐side JavaScript to request and receive data from a server without
refreshing the web page. This technique enables the developer to create an application that is
uninterrupted, making only portions of the page reload with new data.
The term Ajax was originally coined by Jesse James Garrett in 2005. He wrote an article entitled
“Ajax: A New Approach to Web Applications” ( www.adaptivepath.com/publications/essays/
archives/000385.php ). In it, Garrett states that the interactivity gap between web and desktop
applications is becoming smaller, and he cites applications such as Google Maps and Google Suggest as
proof of this. The term originally stood for Asynchronous JavaScript + XML (XML was the format in
which the browser and server communicated with each other). Today, Ajax simply refers to the pattern
of using JavaScript to send and receive data from the web server without reloading the entire page.
Although the term Ajax was derived in 2005, the underlying methodology was used years before.
Early Ajax techniques consisted of using hidden frames/iframes, dynamically adding <script/>
elements to the document, and/or using JavaScript to send HTTP requests to the server; the latter
has become quite popular in the past few years. These new techniques refresh only portions of a
page, both cutting the size of data sent to the browser and making the web page feel more like a
conventional application.
What Can it do?
Ajax opened the doors for advanced web applications—ones that mimic desktop applications in
form and in function. A variety of commercial websites employ the use of Ajax. These sites look
and behave more like desktop applications than websites. The most notable Ajax‐enabled web
applications come from the search giant Google: Google Maps and Google Suggest.
Google Maps
Designed to compete with existing commercial mapping sites (and using images from its Google
Earth), Google Maps ( http://maps.google.com ) uses Ajax to dynamically add map images to
the web page. When you enter a location, the main page does not reload at all; the images are
dynamically loaded in the map area. Google Maps also enables you to drag the map to a new
location, and once again, the map images are dynamically added to the map area (see Figure 14-1).
Google Suggest
The now commonplace Google Suggest is another Google innovation that employs the use of Ajax.
Upon first glance, it appears to be a normal Google search page. When you start typing, however, a
drop‐down box displays suggestions for search terms that might interest you. Under the suggested
word or phrase is the number of results the search term returns (see Figure 14-2).
Browser support
In the early years of Ajax, browser support was mixed. Every browser supported the basics in some
way, but support differed from browser to browser. Today, Ajax is a just another normal part of
JavaScript development, and today's modern browsers unquestionably support Ajax.