How to do Ajax Requests with jQuery

jQuery includes various methods for doing Ajax calls. Here's an introduction.

Ajax (or AJAX) stands for Asynchronous JavaScript And XML. It allows us to dynamically populate a web page using remote data (or data from another document, database, etc) without having to reload the page.

Here I show you some common techniques for doing Ajax calls with jQuery.

The load() Method

jQuery's load() method is the easiest way to do an Ajax call. It allows you to load data from the server and place the returned HTML into the matched element.

To use the load() method, pass the file name in as a parameter. Like this:

$( "#data" ).load( "/latestData.html" );

Here it is in action, loading latestData.html :

If no element is matched by the selector the Ajax request will not be sent. So in our example, if there was no element with an ID of #data, the request wouldn't be sent and clicking the button wouldn't change anything on the page.

Using a Callback Function

You can provide a "complete" callback function that only runs after the HTML insertion has succeeded. For example, you could use this callback function to display a "success" message to the user.

$( "#data" ).load( "/latestData.html", function() {
  alert( "The latest data has now been inserted." );
});

Here it is in action:

Loading Page Fragments

You can also load a portion of the file rather than the whole thing. For example, you could tell jQuery to only load an element with a particular ID. To do this, simply provide the ID with the file parameter (separated by a space).

Here's some sample code:

$( "#data" ).load( "/latestData.html #dataList" );

Here it is in action:

And for reference, here's the HTML code that makes up our external file, latestData.html :

<h1>Latest Data</h1>
<p>Here goes the latest and greatest...</p>
<ul id="dataList">
  <li>Apples
    <ul>
      <li>Big ones</li>
      <li>Juicy ones</li>
      <li>Red ones</li>
    </ul>
  </li>
  <li>Oranges</li>
  <li>Papaya
    <ul>
      <li>Papaya carica</li>
      <li>Carica</li>
      <li>Carica pubescens</li>
    </ul>
  </li>
  <li>Lychee</li>
  <li>Rambutan</li>
  <li>Passionfruit</li>
  <li>Mango</li>
</ul>

The getJSON() Method

One popular use case of Ajax is to retrieve data from a remote JSON file.

jQuery has the getJSON() method specifically for use with JSON files.

Here's how it works.

$.getJSON("/jsonData.txt", function(data) {

  // Process the JSON data here

});

Basically, you use getJSON() to retrieve the JSON data. Then you pass the data to the success callback function to process the data however you like.

Here's an example where we use getJSON() to retrieve data from artists.txt , loop through its contents adding HTML tags, then output the result to the web page.

This example is taken from JSON with HTTP using jQuery (from my JSON tutorial).

The ajax() Method

jQuery has a number of methods for performing Ajax requests (full list in the jQuery documentation) but they all use the ajax() method behind the scenes.

One of the benefits of other methods such as load() is that they provide a simpler way of achieving a desired outcome. In most cases, these methods are all you need.

However, the ajax() method has a lot more options for customizing your Ajax requests. For example, you can provide authentication details with the username and password options. You can also change requests to be synchronous by using asynchronous: false. You can use the data option to send data to the server, and you can specify the data type that you're expecting back from the server (e.g. dataType: json).

Here's an example of loading the same file from the previous example, except this time using the ajax() method: