AJAX Simplified

In web development, AJAX can be one of the most useful tools in creating a dynamic and user-friendly site. When approaching AJAX from a traditional web development point of view a lot of people have trouble wrapping their heads around the concept; so, this post is meant to alleviate some of that confusion by focusing on just one core idea: no more page reloading.

AJAX stands for Asynchronous JavaScript and XML; it is not a language in itself, but a way to use JavaScript and XML together to allow a webpage to interact with the server without having to reload the page. To understand AJAX, you will need a basic knowledge of HTML and JavaScript.

Now, when would this be useful? Consider this situation:  You’re building a webpage and you want real time validation of the data that the user inputs into a form. When their cursor leaves the field, you want to run validation on that field and color it red if it is invalid. In a traditional web page, when you want to change any of the content on the page (i.e. change the color of an invalid input) or communicate with the Web Server you have to reload the entire page. However, with AJAX this is unnecessary. This is because AJAX runs behind the scenes, allowing you to asynchronously communicate with the Web Server without having to reload the page. You can use it to do queries or page manipulations without having to send the user to another page or reload their current page.

Here is a breakdown of how AJAX works:

So, let’s take the information in this diagram and apply it to our real time validation example. We’re going to use JQuery here to help us with the JavaScript part. Let’s say that the user is entering a Student ID in a field with id=”student_id” and we want to validate it to make sure that ID exists in the database. We would start with something like this:

$(document).ready(function() {
            $('#student_id').blur(validateStudentId());
});

This uses the JQuery .blur() event handler to watch for when the student_id field loses focus, and when it does lose focus it triggers our validateStudentId() function.

Our validateStudentId() function would then look something like this:

function validateStudentId() {
       $.ajax({
              type: 'POST',
              url: 'url/of/validation/script',
              data: { student_id: $('#student_id').val() },
              success: function(response) {
                          if(response == false)
                                      $('#student_id').attr('class', 'red_input');
                          else
                                      $('#student_id').attr('class', 'green_input');
              }
       });
}

Now, this is all just pseudo-code but you can see that we use the JQuery .ajax() function to create our HTTP request and then we take the response and check if it was set to false, which will denote that it failed validation. Then we use .attr() to set the class of our student_id input to “red_input” or “green_input”. For this to function properly a few other things need to be set up, which are out of the scope of this post, but I will briefly explain.

The first step is to set up your validation handler. This script should be at the URL that you specified in your validateStudentId() function. This script should have a ‘Content-Type’ of ‘application/json’ and it should return a Json encoded response. This script is what will query the database and look for that existing Student ID and return false if it doesn’t exist or true if it does.

The second thing that needs to be set up is your CSS. You will need CSS classes for .red_input{} and .green_input{} that will change the input background to be either red or green.

This is a very basic example of what you can accomplish with AJAX, and you can do much more with it than just change the color of an input. When you’re first getting acquainted with the concept, it can be a bit confusing, but once you wrap your head around it the possibilities of what you can do with AJAX are endless!