Servage Magazine

The term AJAX means “Asynchronous JavaScript and XML”. It describes a standardized process of exchanging data between a client’s browser and the server’s back-end asynchronously in relation to the page load. Originally this was intended to be XML data, but today this could essentially be any data format. Hence AJAX mainly references the “asynchronous” and “JavaScript” parts of the abbreviation when talking about it today.

Browser compatibility

AJAX processes are supported by all major browsers today and has effectively become a common way of working with interactions between JavaScript and back-end systems. It is implemented via the XMLHttpRequest object in the browsers’ JavaScript interpreters but often used indirectly via wrappers. This post will be using AJAX via the popular jQuery framework, because it offers a great and transparent implementation that is cross browser compatible. You will see a chronological example of AJAX usage:

1. Create an asynchronous client-side HTTP request to the server via JavaScript.
2. Generate a server-side JSON response with PHP.
3. Process the response with JavaScript and manipulate the DOM of the current page.

The example updates a DOM element based on a value send from the server. Please note that the sample code below are excerpts and that jQuery is required.

Client-side request

The following JavaScript code creates an AJAX request with jQuery to the server’s back-end.

var request = $.ajax({
  url: '/api/get-value',
  type: 'GET',
  data: {
    foo: 'bar',
  },
  dataType: 'json',
});

We also declare a "fail" callback function to be executed if the AJAX request to the server fails.
request.fail( function( jqXHR, textStatus ) {
  alert( "Request failed: " + textStatus );
});

Server-side response

The following PHP code creates a sample JSON response.

$response = array(
  'value' => 'The new value',  
);

echo json_encode( $response );

The JSON response then looks like:

{
  value: 'The new value',
}

Client-side callback

The JavaScript also needs to know what to do with the response. In this example we want to update a specific DOM element with the returned value. Therefore we use jQuery to select that specific DOM element and replace the element’s inner HTML with the returned value.

var element = $('#myValueContainer');

request.done( function(response) {
  element.html( response.value );
});

Note how the “done” callback is defined in the same way as the “fail” callback used earlier.

AJAX is a cornerstone in modern web applications

The example above is literally just an example of a simple process. This could essentially be used for any kind of data exchange, thus opening up an endless amount of options. All major web sites and apps use AJAX to enrich their site with great features, thus improving the user experience and turning old-fashioned static HTML pages into modern web applications. You can build web applications from the ground up using own or ready to use JavaScript frameworks. The main advantage is instant cross-platform compatibility, so you don’t need to develop specifically for each platform like native app developers do. On the other hand you may also just enrich an existing site by adding AJAX functionality step by step. Most apps are suitable for a web-based version, but as soon as you consider building resource-intensive functionality (often found in games) you may need the platform specific APIs, thus considering a native app instead. Until then AJAX is your friend :-)

References & more reading

• jQuery AJAX Documentation
• W3Schools
• TutorialsPoint