How To Use jQuery’s AJAX Functions

by Paul Robinson on 08.31.2008 | 4 comments

I have had a lot of people ask me how to use jQuery to pull information back using it’s AJAX functions. Personally I found it [...]

I have had a lot of people ask me how to use jQuery to pull information back using it’s AJAX functions. Personally I found it quite hard to believe that the documentation wasn’t enough to show them, but I suppose that if jQuery is completely foreign to you no amount of documentation will show you how to use it. For that reason I thought I would give a few practical demonstrations of how to use jQuery’s AJAX functions.

load( url, data, callback);

We will start with probably the simplest of all of jQuery’s AJAX commands, load. Here is an example.

$('#container').load('info.html');

This little bit of code would get the information, in this case HTML, contained in ajax.html, and place it inside any elements on the page with the ID 'container'. Simple huh? You can see an example if you like.

jQuery.get( url, data, callback);

This function works pretty much exactly like load. The only difference really is that load() loads the info straight into the element load() is called on. get() is called independantly. Check this example:

$.get("ajax.php", function(data){
  alert("Data Loaded: " + data);
});

This would query the file 'ajax.php' and alert the user of the outputted info. Again it’s very simple, but you can see an example.

That’s It

That’s it really. There are a few other functions. You have the post version which is $.post(), $.getJSON retrives JSON via AJAX and returns it as an object. Finally there is $.getScript which can get javascript/jQuery via AJAX and then executes it. You can find examples of all these on the examples page.

You know the drill. Any questions use the comments or the contact form.