Upsorn Praphamontripong, Fall 2014
(based in part on class materials by Jeff Offutt)
This is a short introduction to get you start
and experience with Ajax.
For more information, please refer to
- Technique for creating more interactive web applications
using XML, HTML, CSS, and JS
- Unlike the request/response cycle where all communication
is synchronous (i.e., the client has to wait for the server to response),
Ajax uses JS to allow asynchronous interaction
between the client and the server
- Users do not need to click "submit"
- Often used to respond to events in the UI
Two important characteristics
- Client requests handled asynchronously
- Client modifies only small parts of the current document
- To improve usability by allowing web apps to respond in ways
that look more like desktop apps
- Help users fill in a form
- Zip code, city, state ... when a zip code is entered,
the client asks the esrver for the probable city and state
- JS used to put the response into the form
Technologies used in Ajax
- XML and XHTML for content
- CSS for presentation
- DOM to represent and manipulate the structure of XML and HTML documents
- JS for dynamic content display
- In the form, JS source files must be referenced in <head>
- In the form, an event handler must be registered on the blur event
onblur) in the desired form element
- In JS, a response handler must be registered in
onreadystaetchange property of
- XMLHttpRequest (JS object) to perform asynchronous interaction with the server
Ajax browser support
Here are some of the major browsers that support Ajax.
For more information.
If none of the above syntax works, it is most likely that
a very outdated browser is used.
How does Ajax work?
Response component on the server
Ajax return document options