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: 239

Filed under:
|
|
|
|

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

Related posts about jQuery

Related posts about AJAX