Looking up at Chelsea, back in January, 2010.

The snow plow tries to keep the streets clean… its work was cut out!

Out in the snow storm of last week… I love the way the light is warped thanks to the snow on my lens.

We took a walk through the winter haze… my lens caught some flurries.

Sunset in Tokyo

Sunrise in Tokyo

, originally uploaded by Lynt.

I figure I might as well make use of the Wordpress x Flickr capabilities and start blogging my adventures once again.

I’ve been busy.

I’ve also been in Japan… hopefully I can revive this blog over the coming weeks…

Sorry it’s been so long. I’ve been busy, stressed, and more stressed. My company took us out to the Stockholm Archipelago last week, it was breath taking.

More news in the next few days…

That’s one of the reasons why I wrote (and use almost daily) my custom AJAX wrapper for jQuery.

The idea.
Centralize one $.ajax() method, and have methods external to jQuery control the data and callback methods before firing.

This allows for a global wrapper on all before and callback methods in case you need to do things like: show loading animations, run site statistics, setup error handling, etc.

The code.
I like to use namespaces in my projects, so I will be giving you a basic outline of a namespace setup, and then how an external function can interact with the global AJAX method.

I will base the example loosely on a CRUD schema.

// Create our namespace
var Website = {};

/**
 * Outline our webservices
 * @param {String} action - AJAX action to perform
 * @param {Object} payload - Javascript object containing AJAX method properties
 */
Website.Webservice = function (action, payload) {

    switch (action){

    case 'create':
        payload.type = 'POST';
        payload.url = '/ajax/create_data.php';
        break;

    case 'read':
        payload.type = 'GET';
        payload.url = '/ajax/get_data.php';
        break;

    case 'update':
        payload.type = 'POST';
        payload.url = '/ajax/update_data.php';
        break;

    case 'delete':
        payload.type = 'POST';
        payload.url = '/ajax/delete_data.php';
        break;
    }

    // Call the global AJAX method
    Website.AJAX(payload);

}

/**
 * Fires off the AJAX object with user defined payload information.
 * @param {Object} payload	- AJAX data options to bind to the jQuery object
 */
Website.WebService.AJAX = function (payload) {

    // If dataType wasn't specified in the payload, default to 'html'
    var dataType = (payload.dataType !== undefined) ? payload.dataType : 'html';

    // jQuery AJAX object
    $.ajax({

        // Normal properties
        type: payload.type,
        url: payload.url,
        data: payload.data,
        dataType: dataType,

        // Global beforeSend wrapper with user defined function
        beforeSend: function () {

            // Do global here
            if (typeof payload.beforeSend === 'function'){
                payload.beforeSend();
            }

        },

        // Global success wrapper with user defined function
        success: function (data) {

            // Do global here
            if (typeof payload.success === 'function') {
                payload.success(data);
            }

        }
    });

};

Now that I have set up our basic framework, I can fire off any AJAX request with minimal code, and abstract any intense data mining functions and other methods from our AJAX process. This allows for clean and controllable code.

/**
 * Some function or event that fires off AJAX
 * @param {Object} data - Javascript object containing user data
 */
var updateUserData = function (data) {

    // Create the AJAX property object
    var bundle = {

        data: {
            'user_id': data.user_id,
            'user_email': data.user_email,
            'user_firstname': data.user_firstname,
            'user_lastname': data.user_lastname
        },

        beforeSend: showSpinningLoader,

        // Success callback function
        success: onRefreshSuccess

    };

    // Fire the bundle off
    Website.WebService('update', bundle);

};

And there you have it. Simple and easy to use. Now you can trigger AJAX from anywhere in your application with all processes centralized.

Looking lovely in the Swedish sunset.