Ajax

From Uweb

Jump to: navigation, search

Contents

What is AJAX?

AJAX is a house cleaner. And if it doesn't work you can try Comet... no, wait, wrong AJAX.

AJAX stands for "Asynchronous Javascript And XML" -- But XML is not required. It's a method of using the web browser's javascript engine to make a request to the web server without HTTP... so it looks to the user like the data updated in "Real time" like a desktop application would, as opposed to refreshing an entire page like most web applications need to.

Common Uses

  • Dropdown Search (akin to Microsoft's Autocomplete Combo Box)
  • Live Search (Changes results as you type)
  • Live Data Display (i.e. Sports Scores)
  • Changing Data at a particular time when customers will be watching (i.e. "Registration is now Open (provide link)")
  • Update fields in database without a submit
    • Example: You have checkboxes for various options. When a request is made, the browser automatically 'pings' the server and the setting is changed in the database without the user having to click a submit button and fill a form field.
  • Server-side processing for special elements, i.e. calendars, sorting or complex tables or queries that are better handled at the database level.
  • Live validation of data - Validate data against your database without the user having to submit. Ex: http://www.the-art-of-web.com/javascript/ajax-validate/
  • Progress bars, i.e. for uploads or other processes that take a lot of time.

Methods / Concerns

Currently the most robust AJAX toolkit with the best user community is the Dojo Toolkit. While documentation may not (at the time of writing) be as ubiquitous as the docs for other JavaScript utilities, it is out there. Dojo is by far the most extensible and useful toolkit. You use it on an "as needed" basis. You include different parts of the library by issuing a call to the "dojo.require" function. You can also reference it from a central location using cross-domain builds to eliminate the need to have your JavaScript library on all of your servers. Cross domain builds also create a speed advantage for the user and the developer. Say that one page references "dojo.html" on a central server and so does a second page. There is no need to load "dojo.html" again on the second page because it is cached in the browser from the visit to the first page.

The Prototype Library handles a lot of the issues that come up, including "onClick" actions overriding a previously incomplete HTTPRequest and page caching issues in Internet Explorer.

However, the core technology is based around the XMLHttpRequest object that is present in most modern browsers. It's worth noting that your request doesn't *have* to be in XML; I often pass GET or POST variables with a request since PHP is set up to handle them, and return either a true or false, a group of list items, or a JSON object.

One concern of AJAX is the load it can put on webservers. If your webserver is already nearly at capcity during peak times, AJAX can help you by making the requests you need to serve smaller, because full page reloads aren't necessary. AJAX can also hurt you by increasing the volume of requests to dynamic pages that need to process requests through a database and server-side scripting engine. Before implementing AJAX to solve a technical problem like excessive server load, you need to determine where your bottleneck is and make sure that implementing AJAX will not make it worse.

Applications that use AJAX

One of the most popular AJAX applications is Gmail. It's very rare for Gmail to refresh the entire page, most of the time the application is using AJAX to make a request. You can tell it's making a request by the red "Loading" icon in the upper right.

Resources

HowTo's

Technical Documents

Helper Libraries

Other Resources

Retrieved from "http://uweb.tamu.edu/index.php/Ajax"
Personal tools