jQuery promise and AJAX

Provides a way to execute callback functions based on one or more objects, usually Deferred objects that represent asynchronous events.

by Chance Nursey-Bush

HTML

<div id="output"></div>

JavaScript

// Info: http://net.tutsplus.com/tutorials/javascript-ajax/wrangle-async-tasks-with-jquery-promises/

function logger(txt) {
    $('#output').append(txt + "<br>");
}

var url = '/echo/json';
var data = {'json': 'hello', 'delay':2};

function testAjax() {
    return $.ajax({
        url: url
        type: 'POST',
        /*data: {
            json: '123',
            delay: 2
        }*/
        data: data
    });
}

function sendAjax(){
	return $.ajax({
  	url: url,
    data: data
  });
}

function ajaxSuccess(data){
		logger('ajax1 ok: ' + JSON.stringify(data));
}

function ajaxFailure(data){
		logger('ajax2 fail: ' + JSON.stringify(data));
}
/*var promise = $.getJSON(url, data, function(json) {
    //alert(JSON.stringify(json));
    logger('ajax1 done');
});*/
var promise = testAjax();
promise.done(ajaxSuccess);
promise.failure(ajaxFailure);



/*
var url = 'http://cross-domain.com';
promise = $.getJSON(url, data, function(json) {
    logger('ajax done');
});

promise.fail(function(data) {
    logger('ajax2 fail: ' + JSON.stringify(data));
});
*/

logger('script done');