At the heart of jQuery's AJAX functionality is the .ajax() function. This little guy allows you to do some heavy lifting and has everything you need for all your XML HTTP Requests (XHR) needs.
For those of you with a little AJAX experience under your belts, you'll be pleased to find that in true jQuery form, this function eliminates the need for setting up the traditional if/else statement to test for support for the XMLHTTPRequest object and if not then, the ActiveXObject (for IE browsers).
Let's take a quick look at some of the functionality available in the .ajax call:
jQuery.ajax({
type: //"GET" or "POST",
url: //"url/to/file.php",
dataType: //"script", "xml", "json", or "html"
data: //a query string "name=FileName&type=PDF"
beforeSend://a callback function
function(){
alert("Starting Request");
}
success: //a callback function
function(){
alert("Request successful");
}
complete: //a callback function
function(){
alert("Request complete");
}
error: //a callback function
function(){
alert("Request returned and error!");
}
});
...
For example, implemented within WordPress, an .ajax() call might look something like this:
...
jQuery(".ajaxIt").click(function(){
//.ajaxIt is a class assigned to link in the first post
jQuery.ajax({
//url to the about page:
url: "/wp-jquery/about/",
data: "html",
success: function(data){
//limit the overflow and height on the first post
jQuery('.post:first')
.css({overflow: "hidden", height: "310px"})
//add in the data
.html(data);
//alert just shows the function kicked off
alert('loaded up content');
}
});
});
...
In the given code, when the user clicks on the .ajaxIt object jQuery selector, as seen in the next screenshot, the .ajax function loads the whole About page into the first post's .post div:
By changing the CSS properties on the div to hide the overflow and set the height, we can keep it from looking too messy:
There you have it! Your first use of AJAX within WordPress! However, you're probably thinking: "That's a fair bit of work for something that I'd never really want to do in real life. (Reloading in the whole site into a div including the header? Yuk!)"
You're right. Let's take a look at shortcutting-in some more accessible and useful functionality.
You can see the .ajax() function is quite robust and flexible. As cool as that is, you're probably already hoping for a shortcut. Never fear, similar to the .animate() function we've already worked with, jQuery has nicely broken down a few of the more "routine" tasks into bite size functions that are much easier to use and leverage. Here are the most important for WordPress users:
.load—you can call through POST and GET with this function and pull specific, jQuery-selected content and tuck it a lot more easily into other jQuery selected areas..get—like.load, but only does get requests..post—like.load, but focuses on post requests..getJSON—allows you to pull JSON data (this is a good way to go if you're cross site scripting—that is, pulling data in from another URL, such astwitter.comfor example)..getScript—allows you to kick off the actions tucked in a script that's not attached to your WordPress theme. (Very useful if you want to add functionality that you don't want other people to be able to easily find and comb through, and you can also pull in JavaScripts from other domains to work with.)
In most WordPress projects, you'll find that you won't need to use the .ajax() function at all. You'll use .load, .post or .get, sometimes .getJSON or .getScript. But, like the .animate() function, you'll occasionally come up with scenarios where the flexibility and granular control of the .ajax function is handy.
The most useful of all of these shortcut functions and the one we'll focus on the most is the .load function.
We can achieve the exact same effect we got from our full .ajax() function with the parred-down code here:
...
jQuery('.post:first').css({overflow: "hidden",
height: "310px"}).load('about-2/');
...
Again, kinda cool, in that the code snippet is a lot simpler. It's AJAX; the page itself isn't reloading, but why would you want to do that? (Again, to keep the example from being too messy, I used the .css function to change the CSS properties and hide the overflow and lock the height of the .post div.)
It does seem rare that this would be useful for a project (and if it was useful, an iframe would achieve the same effect). What we really want to do is be able to load in key pieces of content from another page into our current page. The good news is, we can achieve that easily:
...
jQuery('.post:first').load('about-2/ #post-104');
...
By extending the url parameter of the .load function, the given snippet of code will replace our first .post div with content from the #post-104 div on the About page. The result is this:
You'll also note that I was able to remove the .css function because only useful content is loaded in, nice and clean.
Let's say we need to transform some of the content that we load in. Not a problem. There's a basic "success" callback function available. We can take advantage of it like so:
...
jQuery('.post:first').load('about-2/ #post-104', function(){
jQuery('h3').css("color","#ff6600");
jQuery('#post-104 p:first').css("font-weight","bold");
});
...
As you can see, the content is now "part" of our page, and a set of DOM objects as our h3s in the ajaxed content changed along with other selected matches on the page. Now this seems a lot more useful. I bet you can think of a lot of uses for functionality like this! Guess what—so can our "clients".