Understanding jQuery’s AJAX Function

At first, the jQuery AJAX function can be a bit confusing, especially if you have never worked with AJAX or JSON, it can be a little confusing. Let’s take a step-by-step at jQuery’s AJAX function by requesting a JSON file and retrieving data from it. You can follow along by copying and pasting, or writing, the code into JSFiddle. Before we begin, it is important to note that you should have some knowledge of Javascript and the jQuery library in order to understand this tutorial.

The .ajax() function

The first step is to read about the .ajax() function on the jQuery site; however, the documentation can be a little confusing. The jQuery documentation states that the $.get() and .load() functions are easier to use and retrieve information from another page / website.

But let’s work .ajax() for now. Let’s use JSFiddle to test out our code. Erase the console.log(“Hello World”); function.

Let’s get the information from the following url:

https://mysafeinfo.com/api/data?list=languages&format=json

The site contains datasets, or lists, that we can pull information from for testing (and fun!). Let’s get a list the languages and print them out.

As you can see the url contains the following:

format=json

This is called a URL parameter. Basically, it is telling browser that we want to load the JSON file. Let’s access the file using AJAX. Here’s the JSFiddle and here’s the code:

$.ajax({
    type: 'GET',
    url: 'https://mysafeinfo.com/api/data?list=languages&format=json',
    dataType: 'json',
    success: function(json) {
        console.log(json);
    }
});

If you look at the bottom-right hand side, you should see that the console is outputting a lot of objects. This means that the AJAX call worked!

Let’s break the .ajax() function into smaller parts.

$.ajax({

Instead of using the ‘$’ sign, you can also use ‘jQuery’ to ensure that here are no conflicts with other libraries:

jQuery.ajax({

This will ensure that there are no conflicts! Next, we describe the type of request that we will make. In this case, we are going to be grabbing information from another site, so we should use ‘GET’:

type: 'GET',

The URL that we would like to retrieve data from:

url: 'https://mysafeinfo.com/api/data?list=languages&format=json',

The dataType which can be: json, jsonp, html and many more.

dataType: 'json',

If the GET request has succeeded, then we should use the success function will run:

success: function(json) {
  console.log(json);
}

The function will then grab the data and pass it into a parameter named “json”. Then, we will log the data from the website into the console. That is what we are seeing here:

Close the function:

});

All together, we get:

$.ajax({
    type: 'GET',
    url: 'https://mysafeinfo.com/api/data?list=languages&format=json',
    dataType: 'json',
    success: function(json) {
        console.log(json);
    }
});

The function outputs too much information! Let’s just grab one set. Let’s take a look at the JSON file.

The information has objects stored into an array. It might seem a little complicated, but let’s grab the first set, marked with 0.

 console.log(json[0]);

We did it! Here’s the JSFiddle if you have been following along.

Now let’s take it a step further and grab some individual pieces. Here’s the code

jQuery.ajax({
    type: 'GET',
    url: 'https://mysafeinfo.com/api/data?list=languages&format=json',
    dataType: 'json',
    success: function(json) {
        console.log(json[0]);
        var name = json[0].nm;
        var family = json[0].fam;
        jQuery( ".data" ).append( name + '<br>' + family);
    }
});

 JSFiddle

Let’s take a look at this piece:

 var name = json[0].nm;

This is the name (highlighted in red):

To get the language family:

var family = json[0].fam;

What we are doing is acessing the first index of the array, and then grabbing the fam property. The “.” notation signifies that we are accessing a property or a method of an object (in this case, a property or value).

Finally, let’s append the data to an HTML element:

HTML:

<h1>JSON Request</h1>
<p class="data"></p>

Javascript:

 jQuery( ".data" ).append( name + '<br>' + family);

We are just appending, or adding, the information in. You can check out the final JSFiddle.

Feel free to play around with the code as much as you want. You should now understand how to make a GET request and grab information. Later on, let’s take a look at t a look at the $.get() function.