Question

I’m having some issues because I’m trying to re-use code (which can be used) in other parts of my application.

Now, I’m having the common:

$.ajax({
   url: JSONurl,
   dataType: "json",
   cache: false,
   data: params,
   success: function(data){
      // do stuff after the result is retrieved
   }
});

The stuff is going fine but I would want to do something like that:

function ultramegafunction (){
    var ajax_data = asyncAjaxFunction();
    // When ajax_data is filled do other stuff
}

In that way, I could use the asyncAjaxFunction() in other functions where it’s needed without having to rewrite all the code and putting specific things in the success part.

Do someone knows how could I do that?

Answer 1

Use jQuerys Deferred objects which implicitly are mixed into the jXHR object. Therfore you need to return the jXHR object and then also bound handlers at some other place.

function asyncAjaxFunction() {
    return $.ajax({
        url: JSONurl,
        dataType: "json",
        cache: false,
        data: params,
        success: function(data){
           // do stuff after the result is retrieved
        }
    });
}

and somewhere else

function ultramegafunction (){
    asyncAjaxFunction().done(function( ajaxData ) {
        // When ajax_data is filled do other stuff
    });
}

Ref.: http://api.jquery.com/category/deferred-object/