A Quick Guide to AJAX

For the past couple of years, I have used AJAX a lot and have found it so incredibly useful for a variety of different tasks.

I think right now every person developing for the web should have this in their toolset.

This blog will go over the common way that I use it with the help of jQuery.

AJAX and JQuery

AJAX stands for "Asynchronous JavaScript And XML" and provides a way of making web requests from a web page asynchonously. This is incredibly powerful as it means you can do all kinds of tasks without having to make your user wait or without refreshing the page.

So I am cheating a little when I use AJAX by using JQuery's wrapper of it. You can use it in pure javascript and I am sure there are plenty of tutorials on that, but it is a little bit more wordy than this way.

If you are already using JQuery in your project, then it makes sense to use it to handle your AJAX requests.

The full documentation on how to use it can be found here.


I have a very simple page with 2 elements:

<h1 id="response"></h1>
<button id="my_button">Make Request</button>

When I click the button, it will send an AJAX request and populate the <h1> tags with the response.

Let me just show you the Javascript then I will talk through each section:

        url: "/ajax/ajax.php",
        data: {
            name: "Antony",
        type: "POST",
        dataType: "json",
        beforeSend: function() {
            $('#my_button').attr('disabled', 'disabled');
        success: function(json) {
            $('#response').html(json.timestamp + ': ' + json.greeting);
            var t = new Date().getTime();                 
            while (new Date().getTime() < t + 5000);
        complete: function(json) {         
    return false;


The first line is a basic way of saying that when I press the button with the ID of "my_button", to run the function. Standard jQuery.

The AJAX request is made up of many parts:

url - the is the location to make the call. In this case it is just a PHP file in the same directory. But it could be anything from a 3rd party API to literally another website.

data - this is data that you want to send with the payload to the above URL. Again, this could be anything including data from a form. I have hardcoded my name. You will see later how it is received.

type - this specifies the HTTP method. Usually it is a POST or GET request. In this case, we are sending the data as a POST request, so the code at the URL should be expecting that.

dataType - this tells the AJAX what MIME type to expect the response. If you do not specify anything, it will try and guess. Here, I am explicitly saying to parse the incoming response as JSON.

beforeSend - this can be used to specify a function to complete some task before sending the request. Just like I have here, I usually use this to disabled the button to prevent further requests from being sent whilst the AJAX is waiting for a response. Remember, by default, this is non-blocking, so the user can still interact with the page whilst waiting. Other use cases could be to set some kind of message or loading graphic.

success - this is the function that is run when the AJAX completed successfully. You can see that the function takes a single parameter which is the response. In this case, it is all in JSON. In my function, I am setting the HTML of the h1 element with the contents of the JSON. I am also holding the execution for 5 seconds so that the disabled button could be seen otherwise it is too quick.

complete - whether the success function runs or not, the complete function always run. This can be used to do any tidying up or to relay a message to the user. In this case, I re-enable the button by removing the attribute.

And thats it! It is really straightforward to put together a simple request.

Now a quick look at ajax.php:

$name = $_POST['name'];
$response = [
    'greeting' => "Hello, $name!",
    'timestamp' => time()
header('Content-Type: application/json');
echo json_encode($response);
return true;

Obviously how you deal with the request and return and the response depends on how your project is set up and any frameworks that you are using. For this demo, it is really simple.

First, you can see that I interact with the $_POST array to get the data that was sent. The key matches the key in data and I am accessing it in $_POST because it is a request of type "post" (as we set earlier).

I simply put together an array and json_encode it and set the header and echo back the result.

If you look at the network tab in the dev tools, you will see the request being made and the JSON response:


So as you can see, using AJAX is very very easy and I have only just scratched the service. It is so useful for triggering non-blocking events to give a smoother website experience.

Once again, the full guide on what you can do with jQuery's AJAX can be found here. It covers all of the options that I went over in this post and many many more.

© 2012-2018