Question

Hello fellow programmers! I just started an additional programming project and swore to god my code will bo SO much cleaner and easily upgradeable than it has been before.

Then I stumbled upon my “arch enemy” the jQuery AJAX returning. Last time I wanted to return something from an AJAX call I had to bend over and just make the call synchronous. That made things sticky and ugly and I hope that this time I will find something better.

So I have been googling/searching stackoverflow for a while now, and just don’t understand this solution many ppl has gotten which is called callback function. Could someone give me an example on how I could exploit these callback functions in order to return my login statuses:

function doLogin(username, password) {
    $.ajax({
        url:        'jose.php?do=login&user='+username+'&pass='+password,
        dataType:   'json',
        success:    function(data) {
                        if(data.success==1) {
                            return('1');
                        } else {
                            return('2');
                        }
                        $('#spinner').hide();
                    },
        statusCode: {
                        403:function() {
                            LogStatus('Slavefile error: Forbidden. Aborting.');
                            $('#spinner').hide();
                            return (3);
                        },
                        404:function() {
                            LogStatus('Slavefile was not found. Aborting.');
                            $('#spinner').hide();
                            return (3);
                        },
                        500:function() {
                            LogStatus('Slavefile error: Internal server error. Aborting.');
                            $('#spinner').hide();
                            return (3);
                        },
                        501:function() {
                            LogStatus('Slavefile error: Not implemented. Aborting.');
                            $('#spinner').hide();
                            return (3);
                        }
                    },
        async:      true
    });
}

So as you probably know, you cannot use return the way I have done from inside an AJAX call. You should instead use callback functions which I have no idea of how to use.

I’d be VERY greatful if someone could write me this code using callback functions and explaining to me just HOW they WORK.

EDIT:

I REALLY need to return stuff, not use it right away. This function is being called from within another function and should be able to be called from different places without being rewritten even slightly.

/EDIT

Sincerly,

Akke

Web Developer at Oy Aimo Latvala Ab

Answer 1

There are three parts to the basic “I need an asynchronous callback” pattern:

1. Give the function a callback function parameter.
2. Call the callback function instead of returning a value.
3. Instead of calling the function and doing something with its return value, the return value will be passed to your callback function as a parameter.

Suppose your synchronous mind wants to do this:

function doLogin(username, password) {
    // ...
    return something;
}

switch(doLogin(u, p)) {
case '1':
    //...
    break;
case '2':
    //...
    break;
//...
}

but doLogin has to make an asynchronous call to a remote server. You’d just need to rearrange things a little bit like this:

function doLogin(username, password, callback) {
    return $.ajax({
        // ...
        success: function(data) {
            if(data.success == 1)
                callback('1');
            else
                callback('2');
        },
        //...
    });
}

var jqxhr = doLogin(u, p, function(statusCode) {
    switch(statusCode)) {
    case '1':
        //...
        break;
    case '2':
        //...
        break;
    //...
    }
});

The jqxhr allows you to reference the AJAX connection before it returns, you’d use it if you needed to cancel the call, attach extra handlers, etc.