Can anyone help me?
I am not able to understand the difference between success
and .done()
of $.ajax
.
If possible please give examples.
success() only gets called if your webserver responds with a 200 OK HTTP header - basically when everything is fine. However, . complete() will always get called no matter if the ajax call was successful or not - maybe it outputted errors and returned an error - . complete() will still get called.
What is AJAX success? AJAX success is a global event. Global events are triggered on the document to call any handlers who may be listening. The ajaxSuccess event is only called if the request is successful. It is essentially a type function that's called when a request proceeds.
success and Error : A success callback that gets invoked upon successful completion of an Ajax request. A failure callback that gets invoked in case there is any error while making the request.
The done() function is given a function as parameter. The callback function passed as parameter to the done() function is executed if the AJAX request succeeds. The callback function gets three parameters: data , textStatus and jqXHR . The data parameter is the data returned by the server.
success
only fires if the AJAX call is successful, i.e. ultimately returns a HTTP 200 status. error
fires if it fails and complete
when the request finishes, regardless of success.
In jQuery 1.8 on the jqXHR
object (returned by $.ajax
) success
was replaced with done
, error
with fail
and complete
with always
.
However you should still be able to initialise the AJAX request with the old syntax. So these do similar things:
// set success action before making the request $.ajax({ url: '...', success: function(){ alert('AJAX successful'); } }); // set success action just after starting the request var jqxhr = $.ajax( "..." ) .done(function() { alert("success"); });
This change is for compatibility with jQuery 1.5's deferred object. Deferred (and now Promise
, which has full native browser support in Chrome and FX) allow you to chain asynchronous actions:
$.ajax("parent"). done(function(p) { return $.ajax("child/" + p.id); }). done(someOtherDeferredFunction). done(function(c) { alert("success: " + c.name); });
This chain of functions is easier to maintain than a nested pyramid of callbacks you get with success
.
However, please note that done
is now deprecated in favour of the Promise
syntax that uses then
instead:
$.ajax("parent"). then(function(p) { return $.ajax("child/" + p.id); }). then(someOtherDeferredFunction). then(function(c) { alert("success: " + c.name); }). catch(function(err) { alert("error: " + err.message); });
This is worth adopting because async
and await
extend promises improved syntax (and error handling):
try { var p = await $.ajax("parent"); var x = await $.ajax("child/" + p.id); var c = await someOtherDeferredFunction(x); alert("success: " + c.name); } catch(err) { alert("error: " + err.message); }
In short, decoupling success callback function from the ajax function so later you can add your own handlers without modifying the original code (observer pattern).
Please find more detailed information from here: https://stackoverflow.com/a/14754681/1049184
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With