AJAJ

AJAJ (short for asynchronous JavaScript and JSON) is a group of interrelated web development techniques used on the client-side to create asynchronous web applications. Unlike its predecessor AJAX, which uses XML, in AJAJ the content sent back and forth between the client and server is strictly JSON. The term AJAJ has been used since 2006. Despite being a more precise term, use of the term AJAJ did not become widespread, and many people describe a process as "AJAX" when they are in fact talking about AJAJ (because they are receiving JSON formatted data in the response, not XML).

Similarities with AJAX

Similar to the more popularly used AJAX, AJAJ is executed asynchronously, meaning that it occurs in the background, and does not interrupt the flow of the JavaScript interpreter as it gets read. The asynchronous aspect of AJAJ allows one to write code that, for example, sends some request to a server and handles a server response without reloading the page in the process. The opposite of this is synchronous, which means "in order". An example of synchronous processes is seen in standard HTML transmission between a client and a server; when a user clicks a hyperlink, there is some time in which the content is requested and retrieved from the server that causes the page to "reload." With any kind of web-based asynchronous request, you can request a resource over HTTP without reloading the page.

Example

One example of how AJAJ is used can be illustrated by using a combination of jQuery and PHP.

JavaScript (jQuery)

uses jQuery's $.getJSON().

$.getJSON('includes/server_side_file.php', function(data) { // callback function
    // this will not execute if the data does not come back from the server
    // in JSON format!
    doSomething(data);
});

PHP script: server_side_file.php

uses json_encode()

<?php
    // server_side_file.php
    
    $exampleArray = array(
        'firstName' => 'Joe',
        'lastName' => 'Schmoe',
        'message' => 'Hello!'
    );
    
    // Using PHP's json_encode() function, we encode an array as a JSON string.
    // That string is then sent to the client (a web browser in this case).
    // On the client, jQuery.getJSON() parses the JSON and provides the value
    // to its callback function.
    header('Content-type: application/json'); // Specify that the content is JSON
    echo json_encode($exampleArray);

Result

The following function is executed from the $.getJSON() callback function once the encoded JSON data is returned from the PHP script running on the server:

function doSomething(data) {
    /* The 'data' parameter holds the following object:
        {
             firstName: 'Joe',
             lastName: 'Schmoe',
             message: 'Hello!'
        }
    */

    // Access the values from 'data' object in JavaScript:
    alert(data.firstName); // would alert "Joe"
    alert(data.lastName); // would alert "Schmoe"
    alert(data.message); // would alert "Hello!"
}

Advantages

AJAJ has many advantages over its predecessor AJAX like being lightweight and sending data back and forth in JSON that, being JavaScript, is faster for the browser to process and easier for developers to work with. AJAJ has the added benefit for JavaScript developers of allowing them to work with data retrieved from the server as native JavaScript objects; this alleviates the need to access data that is returned as XML, which increases complexity and can potentially cause expensive calls to the DOM. XML is also a strict markup language, which requires developers to ensure validation on the XML side as well as on the JavaScript side.

JSON encoding

JSON, or JavaScript Object Notation, is the structure type of the returned data from the server.