[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 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 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 title=”Where can I find it?” trigclass=”contentLink”]
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 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 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.