Blog

categories

tags

RELATED Posts

AJAX

Is the acronym for Asynchronous Javascript And XML, referring to a technique for loading new information into a web page or application without requiring a complete reload or refresh of the page. AJAX was a defining feature of “Web 2.0″, which saw web applications engineered to more closely resemble the more seamless and responsive experiences of desktop applications.

[expand title=”What is it good for?” trigclass=”contentLink”]
AJAX is necessary virtually any time you want to update part of a web page with new information without having to reload the entire page. The information could be text, numerical data, or images. Most often, an “AJAX refresh” will be the result of some kind of user activity on the page or web application, such as a button click. It may also be the result of a timed event, such as refreshing a set of headlines or a Twitter feed.
[/expand]
[expand title=”What does it look like?” trigclass=”contentLink”]
If the web page or application you’re viewing allows content to change without the page reloading completely, it almost certainly employs AJAX techniques. Like many catch-phrases of web-evolution, “AJAX” is actually more of a development technique than a specific technology, so at the code level, AJAX can take on many forms. The most distinctive feature of AJAX is code that refers to either “get” or “post” requests; these define the two most common protocols for transmitting information to and from a server, and when visible through a “View Source” on a web page (or in one of its included files), almost always indicates the use of AJAX techniques.
[/expand]
[expand title=”How do I use it?” trigclass=”contentLink”]
A typical “AJAX call” involves 3 fundamental components:
1. An event listener, or a piece of code that is triggered when a specific user-action occurs on a web page, such as a particular button being clicked.
2. A server request, made by the event listener code, which asks the server for new information.
3. A response handler – another piece of code that is run when the new information is received from the server. This will usually change something on the page, such as text or other media.

Although the term “AJAX” has persisted, the term now has a more generic meaning than the acronym implies. Notably, an “AJAX” call may return data types apart from XML, such as text and JSON. AJAX calls are also not strictly asynchronous, though that is how they are most commonly used.

[/expand]
[expand title=”Where can I find it?” trigclass=”contentLink”]
Although AJAX calls can be written in raw Javascript, this can be tedious due to browser vagaries that can require special handling. Because AJAX techniques are so common, however, virtually every Javasript library (or “framework” – such as jQuery, Moo Tools, Prototype and DoJo) contains functions that handle the gritty, browser-specific details in the background, so the developer only has to worry about the main elements described above, that is:
1. What event should trigger the new information?
2. Where is the new information located?
3. What is the new information used for, once it’s returned by the server?

[/expand]
[expand title=”Issues & FAQs” trigclass=”contentLink”]
AJAX techniques cannot be used to directly load information from another web domain. In other words, if your web page lives somewhere under www.mydomain.com, you cannot use AJAX methods directly to load information from www.anotherdomain.com. If possible, any information to be loaded should be moved/uploaded to your own domain. If this cannot be done, a PHP proxy can be used to “trick” the page into thinking that the information is coming from your own domain.
[/expand]

[expand title=”Tools & Tutorials” trigclass=”contentLink” expanded=”true”]
Full documentation for the jQuery.ajax() method; however, the shorthand jQuery.get() method is more common and concise. jQuery also supports AJAX post requests.
[/expand]