The term AJAX describes a methodology of loading data dynamically on a page without loading a new page. The browser makes a request that’s in the background, then a success or error callback is triggered when the request completes. The data from the request is passed in to the callbacks to be used or displayed.
Whilst AJAX stands for Asynchronous JavaScript And XML the term now broadly covers loading XML, HTML, JSON and JavaScript dynamically.
History
The roots of AJAX can be traced back in Internet Explorer 5.0 when the MSXML library with the IXMLHTTPRequest was bundled with it, back in 1999. This would have been used to do the request in the background and handle the callback. Mozilla decided to take these innovations and created a native XMLHTTPRequest, Microsoft in turn decided to bundle in a native XMLHTTPRequest too, dropping the ActiveX controls.
AJAX as a term was coined on February 18th in 2005 by Jesse James Garrett. In 2006 the W3C released the first draft specification in an attempt to create an official web standard.
Rules of the Game
You can’t load data from external domains directly via AJAX, if you do need to load data from another domain, you’ll need to create a server-side proxy script to trick the browser into thinking the data is from the local domain. There is an exception to this, and that’s when loading JSON in a special way. JSON stands for JavaScript Object Notation, and is a native JavaScript format. You can load JSON from an external domain by specifying a callback, normally as a URL parameter, that gets called and the resulting JSON is passed in to the callback. This is JSONP, or JSON with padding.
Example
People commonly use jQuery to do AJAX to iron out the inconsistencies between browsers. Here’s a simple way to grab an RSS feed.
Here we have a simplified version of an RSS xml file.
<rss> <channel> <item> <title>A Look at Responsive CSS Frameworks</title> <link>https://blog.teamtreehouse.com/a-look-at-responsive-css-frameworks</link> </item> <item> <title>How to Create an Animated Button in iOS | Treehouse Quick Tip</title> <link>https://blog.teamtreehouse.com/how-to-create-an-animated-button-in-ios-treehouse-quick-tip</link> </item> </channel> </rss>
We’re going to cycle over the titles and links and create links in a page.
<!DOCTYPE> <html> <body> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript"> </script> </body> </html>
We’re going to use the jQuery get() method to do a GET HTTP request to “rss.xml”. The get method takes two parameters, string and an anonymous function with one parameter, the data received from the HTTP request.
$.get("rss.xml", function(data){
});
Note: You may not be able to use this locally by double clicking on your index.html. You may need to upload or place it in a folder locally that gets served by a locally running web server due to various browser security preferences. For Mac OS X you can use something like Anvil
Next we want to select all the item elements in the data context, we do this by using the selector string of "item" then pass in the data as the second argument.
$.get("rss.xml", function(data){
$("item", data);
});
Next we want to cycle over each of the items and get the titles and store them in a variable called title. Once again we’re going to select the title in the context of the element iterated over which is this. And then call text(). We’ll also do the same with the link element.
$.get("rss.xml", function(data){
$("item", data).each(function() {
var title = $("title", this).text();
var link = $("link", this).text();
});
});
Finally we want to append the link and title to the body tag nested in a new paragraph and anchor tag.
$.get("rss.xml", function(data){
$("item", data).each(function(){
var title = $("title", this).text();
var link = $("link", this).text();
$("body").append("<p><a href='" + link + "'>" + title + "</a></p>");
});
});
And you’re done. AJAX (and using jQuery) is relatively straight forward to add dynamically loading content. Check out what else you can do on the jQuery AJAX documentation site.