Karl New York City, United States of America.

Chelsea, originally uploaded by Lynt.

Looking up at Chelsea, back in January, 2010.

, originally uploaded by Lynt.

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

, originally uploaded by Lynt.

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

, originally uploaded by Lynt.

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

Dusk, originally uploaded by Lynt.

Sunset in Tokyo

Dawn, originally uploaded by Lynt.

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…

I write a lot of my Javascript with the help of jQuery, and one of it’s finest features is it’s extensibility and powerful internal functions. For larger sites, especially portals, AJAX can become messy if it’s not controlled, and when things get out of hand, it’s often hard to trawl through your scripts to make changes.

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.