HTML and CSS Reference
In-Depth Information
Non-Ajax Way
Ajax Way
User requests a page via URL
User requests a page
HTTP request
HTTP request
Server
Server
Browser
Browser
response
response
Server gets the page,
sends it to the browser
Server sends
back page
User starts filling out form, triggers
an event by changing a value
or moving a key
User fills out a form and
submits it, then waits
Communication
layer
HTTP request
Server
Server
Browser
Browser
Ajax makes
incremental function
calls to the server in
the background
Server works, validates form,
open database, etc.
Communication
layer
Server
Server
Browser
Browser
response
Page is reloaded,
user continues
Page not
reloaded, user
not interrupted
Ajax updates Web
page in increments
Figure 18.1
The request/response loop with and without Ajax.
reflecting a more refined search. This dynamic and immediate update of the list is an
example of Ajax in action. In Figure 18.2, the letters j, a, and v have been typed in the
search box. A list of words appears starting with those letters. The user can select any
of the suggested items and search for that item without typing any more if he or she
sees a word that matches his or her search criteria. There is no delay, no waiting with
an Ajax application.
Why is Ajax the last chapter in this topic? If you browse around the Internet for books
or tutorials on Ajax, you will soon realize that Ajax requires that you have some basic
understanding of everything we have talked about in the preceding chapters because
