Basic jquery deferred usage with ajax

Question

I am trying to rewrite code from How to capture asynchronous ajax response into a variable? to use jquery deferred functions. I started with :

    var html ="";

    $.ajax({
                        type:"POST",
                        url: "Ajax/getHtml",
                        data: { u : contents },
                        dataType: 'html',       
                        success: function(data) {
                            html = data;
                        },

                        error: function(jqXHR, textStatus, errorThrown) {
                                console.log('error');
                                console.log(jqXHR,textStatus, errorThrown);
                        }
                    });

                     console.log('html', html);

I am trying to turn this into a deferred function which can be resolved when the requested html page is returned. I have been reading http://learn.jquery.com/code-organization/deferreds/examples/ and http://jqfundamentals.com/chapter/ajax-deferreds to do this. So far I've come up with :

                    var html_response = new $.Deferred(url){

                    $.ajax({
                            type:"POST",
                            url: "Ajax/getHtml",
                            data: { u : url},
                            dataType: 'html',       
                            success: html_response.resolve,
                            error: html_response.reject
                        });

                    };

This would be used as part of :

                    html_response().done{

                         console.log('html', html);

                   }

What I am trying to do is when the get_html function returns html sucessfully (i.e get_html is resolved )grab the html and send it to the console. I'm having trouble figuring out how to put the pieces together here. Could someone advise me please.

`$.ajax` returns a promise by itself. No need to create your own deferred. — atomman, Jan 26 '15 at 18:59

Neve12ende12 · Answer 1 · 2015-01-26T19:06:41.037

1

This works because $.ajax returns it's own promise (like animations), negating the need to create your own deferred object.

function html_response(url){
  return $.ajax({
    //ajax stuff
  });
}

html_response(url).done(function(data){
  console.log(data);
});

edited Jan 26 '15 at 19:06

answered Jan 26 '15 at 18:59

Neve12ende12

1,154
4
17
33

abl · Answer 2 · 2015-01-26T19:16:02.090

You don't need a full Deferred here. You just need a Promise, whose interface is a subset of that of a Deferred (see the doc on Deferred for more info). The promise has a method .done() that lets you provide a callback to be executed when the asynchronous process ends successfully.

The $.ajax() method returns a jqXHR object which conveniently implements the Promise interface:

The jqXHR objects returned by $.ajax() as of jQuery 1.5 implement the Promise interface, giving them all the properties, methods, and behavior of a Promise

So when you call $.ajax, you already have a promise. Just do:

$.ajax({
    ...
}).done(function(data){
    console.log(data);
});

Alternatively, if you really want to deal with a full Deferred object, you could do:

var defr = $.Deferred();

defr.done(function(data){
    console.log(data);
});

$.ajax({
    ...
    ,sucCess : function(data){
        defr.resolve(data);
    }
});

score 1 · Accepted Answer · answered Jan 26 '15 at 19:11

What you are doing has the right concept. If I understand correctly, you are trying to do some "true asynchronous" ajax, unlike your last post.

The one thing you are doing incorrectly is resolving your deferred jQuery variable.

The correct code should look like this:

           var html_response = $.Deferred();    // no need for new

           function get_html(url){

                $.ajax({
                        type:"POST",
                        url: "Ajax/getHtml",
                        data: { u : url},
                        dataType: 'html',       
                        success:function(data) {
                            html_response.resolve(data);  //resolve is a fn
                        },
                        error: function(x, status, err) {
                            html_response.reject(err);    //reject is a fn
                        }
                    });

                };
           }

           get_html(inserturlhere);

                html_response.done(function(html){       // handle success
                     console.log('html:   ' + html);
                })
                .fail(function(error) {                 // handle failure
                    console.log(error);
                });

However, ajax comes explicitly with a defer already, so be sure to check that out first. http://api.jquery.com/jquery.ajax/

Thank you, that does exactly what I was trying to do! I'm still a little confused about ajax coming with a defer. I've read the document you posted. I assume you mean "you must use the success/error/complete callback options instead of the corresponding methods of the jqXHR object such as jqXHR.done()" ? — user1592380, Jan 27 '15 at 15:39
My pleasure! [This guy](http://www.htmlgoodies.com/beyond/javascript/making-promises-with-jquery-deferred.html) will break it down completely. — leedotpang, Jan 30 '15 at 14:46

Basic jquery deferred usage with ajax

3 Answers3