A standard event messaging system with AJAX?
        Posted  
        
            by Gutzofter
        on Stack Overflow
        
        See other posts from Stack Overflow
        
            or by Gutzofter
        
        
        
        Published on 2010-05-26T14:58:15Z
        Indexed on 
            2010/05/26
            15:01 UTC
        
        
        Read the original article
        Hit count: 305
        
Is there any standards or messaging framework for AJAX?
Right now I have a single page that loads content using Ajax. Because I had a complex form for data entry as part of my content, I need to validate certain events that can occur in my form. So after some adjustments driven by my tests:
asyncShould("search customer list click", 3, function() {
    stop(1000);
    $('#content').show();
    var forCustomerList = newCustomerListRequest();
    var forShipAndCharge = newShipAndChargeRequest(forCustomerList);
    forCustomerList.page = '../../vt/' + forCustomerList.page;
    forShipAndCharge.page = 'helpers/helper.php';
    forShipAndCharge.data = { 'action': 'shipAndCharge', 'DB': '11001' };
    var originalComplete = forShipAndCharge.complete;
    forShipAndCharge.complete = function(xhr, status) {
        originalComplete(xhr, status);
        ok($('#customer_edit').is(":visible"), 'Shows customer editor');
        $('#search').click();
        ok($('#customer_list').is(":visible"), 'Shows customer list');
        ok($('#customer_edit').is(":hidden"), 'Does not show customer editor');
        start();
    };
    testController.getContent(forShipAndCharge);
});
Here is the controller for getting content:
    getContent: function (request) {
        $.ajax({
            type:       'GET',
            url:        request.page,
            dataType:   'json',
            data:       request.data,
            async:      request.async,
            success:    request.success,
            complete:   request.complete
        });
    },
And here is the request event:
function newShipAndChargeRequest(serverRequest) {
var that = {
    serverRequest: serverRequest,
    page: 'nodes/orders/sc.php',
    data: 'customer_id=-1',
    complete: errorHandler,
    success: function(msg) {
        shipAndChargeHandler(msg);
        initWhenCustomer(that.serverRequest);
    },
    async: true
};
return that;
}
And here is a success handler:
function shipAndChargeHandler(msg) {
    $('.contentContainer').html(msg.html);
    if (msg.status == 'flash') {
        flash(msg.flash);
    }
}
And on my server side I end up with a JSON structure that looks like this:
$message['status'] = 'success';
$message['data'] = array();
$message['flash'] = '';
$message['html'] = '';
echo json_encode($message);
So now loading content consists of two parts:
- HTML, this is the presentation of the form.
- DATA, this is any data that needs be loaded for the form
- FLASH, any validation or server errors
- STATUS tells client what happened on server.
My question is: Is this a valid way to handle event messaging on the client-side or am I going down a path of heartache and pain?
© Stack Overflow or respective owner