What exactly triggers jQuery ajax success?

StackOverflow https://stackoverflow.com/questions/14114636

  •  13-12-2021
  •  | 
  •  

Question

I am building some ajax in a Perl web framework Dancer I am not sure it is responding with proper http headers as I cannot trigger jQuery's ajax success handlers from what appear to be otherwise successful requests. Using the ajax snippet below I get the following output in a browser console. The complete callback gets called successfully and gives what looks like successful output. Status:200 StatusText:"OK" However the success handlers never get called.

$.ajax({type: "GET", url: "/learn/faq",
 success: function(data){console.log('omg got it');},
 complete: function(data){console.log("complete", data);}
}).success(function(data){console.log('defered');});


Object
XHR finished loading: "https://www.localhost:4443/learn/faq". assets-d36e1bb9fd59ba3dbd0f8a0cbb37ed8e.js:1
complete 
Object {readyState: 4, responseText: "↵↵<!DOCTYPE html>↵<html xmlns="http://www.w3.org/1…ead/conversion.js"></script>↵↵↵↵</body>↵</html>↵↵", status: 200, statusText: "OK"

I should be seeing the omg got it and defered messages but am not. Looking at this I feel there is more to the jQuery success handler than the status and Dancer http implementation is not responding correctly.

Further more I have since added an error handler to the snippet and the error handler is getting triggered with what looks like a successful request.

$.ajax({type: "GET", url: "/learn/faq",
 success: function(data){console.log('omg got it');},
 complete: function(data){console.log("complete", data);},
error: function(data){console.log("error!", data);}
}).success(function(data){console.log('defered');});
Object
XHR finished loading: "https://www.localhost:4443/learn/faq". assets-8cd028b93e0db9dd9455125dc98d5ae1.js:1
error! 
Object {readyState: 4, responseText: "↵↵↵↵↵↵↵↵↵↵↵↵↵↵↵↵<!DOCTYPE html>↵<html xmlns="http:…></script>↵↵↵↵</body>↵</html>↵↵↵↵</body>↵</html>↵", status: 200, statusText: "OK"}
complete 
Object {readyState: 4, responseText: "↵↵↵↵↵↵↵↵↵↵↵↵↵↵↵↵<!DOCTYPE html>↵<html xmlns="http:…></script>↵↵↵↵</body>↵</html>↵↵↵↵</body>↵</html>↵", status: 200, statusText: "OK"}

Here are the response headers from jQuery getAllResponseHeaders()

complete Date: Tue, 01 Jan 2013 22:43:52 GMT
Content-Encoding: gzip
X-Powered-By: Perl Dancer 1.3095.1
Transfer-Encoding: chunked
Connection: keep-alive
Server: nginx/1.2.4
Strict-Transport-Security: max-age=2592000
Content-Type: text/xml; charset=utf-8
Was it helpful?

Solution

The success handler will be triggered if

  • The response has HTTP status code 200 (yours does)
  • jQuery is able to deserialize the response according to the Content-Type header in the response (or the dataType option, if you provide it, which overrides the Content-Type header)

So for instance, if your response had a Content-Type header of application/json or application/xml, the response you've quoted won't trigger the success handler because it cannot be successfully deserialized as either JSON or XML.

Your latest edit (as of this writing) reveals the problem:

Here are the response headers from jQuery getAllResponseHeaders()

...

Content-Type: text/xml; charset=utf-8

I suspect your response isn't valid XML, so jQuery can't deserialize it as XML, so it's failing.

OTHER TIPS

To expand on TJ's answer, the following is an excerpt from the jQuery 3.5.1 (Same check is in 1.7.1 version as well so it's safe to assume the versions in-between does the same) .

   // Determine if successful
   isSuccess = status >= 200 && status < 300 || status === 304;

As per it, status code for success is not just 200 but anything between 200 and 299 and 304.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top