Nov 30

AJAH or AJAJ for Updating Multiple Page Regions

Different approaches for asynchronously updating multiple regions of a page.

When it comes to updating a specific region of a page, there are many possible approaches. The most obvious and simple of them being AJAH (Asynchronous Javascript and HTML). Make a request to the server and replace a part of the page with the HTML response:


// using jQuery for the ajax calls and CSS selectors
$.get(
    'ajah.html',
    function(data){
        $('#id-of-element-to-update').html(data);
    }
);

Cool, but what if you want to update multiple regions of a page as a result of the one call? Then using plain AJAH doesn't really work as above. So what are your options?

  • AJAJ (Asynchronous Javascript and JSON)

    The server can return JSON for an object with properties that contain the HTML for each region. Like, for example:

    
    {
        "region-1": "<div>some html to replace region 1 on the page<\/div>",
        "region-2": "<div>more html to replace region 2 on the page<\/div>",
    }
    

    Now all you need to do is update the regions with the property values of the response object:

    
    $.getJSON(
        'ajaj.json',
        function(data){
            $('#region-1-id').html(data["region-1"]);
            $('#region-2-id').html(data["region-2"]);
        }
    );
    

    NOTE: You have to "JSONify you HTML" (javascript escape?) so that the JSON remains valid. This means escaping the backslash and forward slash, double quotes, removing line-breaks, etc.

    There are also quite a few client-side template libraries out there. You can apply those to your JSON response and update the regions appropriately. What I don't like about client-side templates is that it usually means that you have two versions of the ui rendering logic for those page regions, one for the server-side and one for the client-side.

    I should also mention that you can just put the ui rendering logic for updating the regions inline (using DOM manipulation or building HTML strings and using innerHTML) with the rest of your JavaScript. But this isn't recommended because it is hard to maintain.

  • AJAH (Asynchronous Javascript and HTML

    You can also update multiple page regions by returning the HTML of each of these regions in the response, wrapped in a containing div for convenience:

    
    <div class="ajah-response">
        <div id="region-1">
            <strong>Region 1 updated via AJAH</strong>
        </div>
        <div id="region-2">
            <strong>Region 2 updated via AJAH</strong>
        </div>
    </div>
    
    Then we can update the regions with this new content from the response:
    
    $.get(
        'ajah.html',
        function(data){
            var $ajah = $(data);
            $('#region-1-id').replaceWith($('#region-1',$ajah));
            $('#region-2-id').replaceWith($('#region-2',$ajah));
        }
    );
    

Recommendation?

As usual, it depends...

In terms of client-side performance, the AJAH approach will be the fastest because there is no need to eval the JSON first. You just put the response into the DOM and replace the appropriate nodes. It also is the simplest, especially if you are reusing the server side ui components that you used to render the page initially.

If there is a need to return additional state information or data that the client-side needs keep track of, then definitely an AJAJ approach is the way to go. And in many Rich Internet Application cases where there is no need for the server-side ui code, the best approach is to do client-side templating and keep the bulk of the html generation on the client-side.

Isn't it funny that the universal term for XHR is AJAX and AJAX is probably the least common of AJAJ, AJAH, AJAX, etc? We all know that in practice HTML !== XML :).

Tags:

Powered by my hackings on Django-Mingus a Django project, PostgreSQL, memcached, nginx, Apache + mod_wsgi, Ubuntu, Rackspace Cloud,...

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.

html5 | top