为什么 AJAX 完成和错误回调都触发？

Question

Here is a dirt-simple AJAX request with anonymous callbacks. Both complete and error are firing. Why?

$.ajax({
  url:'/echo/js/?js=hello%20world!',
  complete: function (response) {
    console.log("In anonymous success callback");
    console.log("response text: " + response.responseText);
    console.log("response object:");
    console.log(response);
  },
  error: function (error) {
    console.log("In anonymous error callback");
    console.log("error object:");
    console.log(error);
  }
});

https://jsfiddle.net/abalter/tz0tu04y/

EDIT I tried using promises, and now I'm only getting error. Something must be wrong with my "dirt-simple" ajax.

$.ajax({
    url: '/echo/js/?js=hello%20world!',
    type: 'POST',
  })
  .done(function(response) {
    console.log("In anonymous JS success callback");
    console.log("response text: " + response.responseText);
    console.log("response object:");
    console.log(response);
  })
  .fail(function(error) {
    console.log("In anonymous JS error callback");
    console.log("error object:");
    console.log(error);
  })
  .always(function(data) {
    console.log("JS I will always do this");
    console.log(data);
  });

https://jsfiddle.net/abalter/bjwc1dx1/

Answer 1

From the jQuery's ajax() documentation :

complete

A function to be called when the request finishes (after success and error callbacks are executed)

Now with modern versions of jQuery the preferred method to listen for success and error would be to use promise interface.

$.ajax(...)
   .done( function() {})     //success
   .fail( function() {})     //error
   .always( function() {});  //complete

Answer 2

Complete is not the same as success. It fires when the response comes back regardless of the status.

Update to answer your second question:

The reason you are getting the error in the first part of the second fiddle is that it is expecting javascript and you gave text that is not valid javascript.

If you send it to an endpoint that your format is valid for, or put your hello world in quotes (make it valid javascript) it will work.

Answer 3

When you configure an AJAX request you can set several options, among them you define the callbacks for the beforeSend, success, error and complete events. If you check this http://api.jquery.com/jquery.ajax/ you will see that the complete callback is invoked for both, success and error events. Cheers