How to get response status code from jQuery.ajax?

Question

In the following code, all I am trying to do is to get the HTTP response code from a jQuery.ajax call. Then, if the code is 301 (Moved Permanently), display the 'Location' response header:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>jQuery 301 Trial</title>
  <script src="http://code.jquery.com/jquery-1.5.1.min.js"></script>

  <script type="text/javascript">
  function get_resp_status(url) {
    $.ajax({
      url: url,
      complete: function (jqxhr, txt_status) {
        console.log ("Complete: [ " + txt_status + " ] " + jqxhr);
        // if (response code is 301) {
        console.log ("Location: " + jqxhr.getResponseHeader("Location"));
        // }
      }
    });
  }
  </script>
  <script type="text/javascript">
  $(document).ready(function(){
    $('a').mouseenter(
      function () {
        get_resp_status(this.href);
      },
      function () {
      }
    );
  });
  </script>
</head>
<body>
  <a href="http://ow.ly/4etPl">Test 301 redirect</a>
  <a href="http://cnn.com/not_found">Test 404 not found</a>
</body>
</html>

Can someone point out where I am going wrong? When I check the 'jqxhr' object in Firebug, I can't find the status code, nor the 'Location' response header. I set the breakpoint on last line of 'complete'.

Thanks much.

I know this is old, but I think I solved it (XHR.responseURL): http://stackoverflow.com/a/39416846/4946681 — Nate, Sep 09 '16 at 17:28

score 269 · Answer 1 · answered Mar 17 '11 at 19:30

269

I see the status field on the jqXhr object, here is a fiddle with it working:

http://jsfiddle.net/magicaj/55HQq/3/

$.ajax({
    //...        
    success: function(data, textStatus, xhr) {
        console.log(xhr.status);
    },
    complete: function(xhr, textStatus) {
        console.log(xhr.status);
    } 
});

answered Mar 17 '11 at 19:30

Adam Ayres

8,732
1
32
25

4

It seems to be working in jsFiddle. Based on that and jQuery documentstion, xhr.status should do what I want. However, when I try the same in my original code (txt_status replaced with jqxhr.status), I keep getting jqxhr.status of 0. Here's a screenshot: http://twitpic.com/4alsqj – Mahesh Mar 18 '11 at 09:36
11

I believe the issue is you are not running against a web server but locally from the file system. I think if you fired up a local web server this would work correctly, here are some articles on the subject: http://www.pearweb.com/javascript/XMLHttpRequest.html https://developer.mozilla.org/En/Using_XMLHttpRequest "The key thing to note here is that the result status is being compared to 0 for success instead of 200. This is because the file and ftp schemes do not use HTTP result codes." – Adam Ayres Mar 18 '11 at 20:24
this is great. Especially when I can have my backend send out status codes. – pizza247 Jan 10 '12 at 16:15
Note that if the response is a redirect status like 302 , this will give 200 – Accountant م Jun 18 '20 at 15:04

score 59 · Answer 2 · edited Jan 27 '18 at 16:41

Came across this old thread searching for a similar solution myself and found the accepted answer to be using .complete() method of jquery ajax. I quote the notice on jquery website here:

The jqXHR.success(), jqXHR.error(), and jqXHR.complete() callbacks are deprecated as of jQuery 1.8. To prepare your code for their eventual removal, use jqXHR.done(), jqXHR.fail(), and jqXHR.always() instead.

To know the status code of a ajax response, one can use the following code:

$.ajax( url [, settings ] )
.always(function (jqXHR) {
    console.log(jqXHR.status);
});

Works similarily for .done() and .fail()

This is returning "undefined" – Pedro Joaquín Aug 26 '19 at 21:49 — Pedro Joaquín, Aug 26 '19 at 21:49

score 57 · Answer 3 · edited May 23 '17 at 12:26

57

It is probably more idiomatic jQuery to use the statusCode property of the parameter object passed to the the $.ajax function:

$.ajax({
  statusCode: {
    500: function(xhr) {
      if(window.console) console.log(xhr.responseText);
    }
  }
});

However, as Livingston Samuel said, it is not possible to catch 301 status codes in javascript.

edited May 23 '17 at 12:26

Community

1
1

answered Aug 02 '12 at 13:16

rstackhouse

2,238
24
28

while I'm trying to catch multiple status code like this, net::ERR_CONNECTION_RESET accurse. any idea about fixing this? – Saghachi Oct 24 '20 at 07:46
it doesn't work with redirects – Alex78191 Nov 16 '21 at 15:24

score 43 · Answer 4 · edited Aug 02 '12 at 13:30

When your XHR request returns a Redirect response (HTTP Status 301, 302, 303, 307), the XMLHttpRequest automatically follows the redirected URL and returns the status code of that URL.

You can get the non-redirecting status codes (200, 400, 500 etc) via the status property of the xhr object.

So you cannot get the redirected location from the response header of a 301, 302, 303 or 307 request.

You might have to change your server logic to respond in a way that you can handle the redirect, rather than letting the browser do it. An example implementation.

score 33 · Answer 5 · answered Oct 26 '16 at 08:03

You can check your respone content, just console.log it and you will see whitch property have a status code. If you do not understand jsons, please refer to the video: https://www.youtube.com/watch?v=Bv_5Zv5c-Ts

It explains very basic knowledge that let you feel more comfortable with javascript.

You can do it with shorter version of ajax request, please see code above:

$.get("example.url.com", function(data) {
                console.log(data);
            }).done(function() {
               // TO DO ON DONE
            }).fail(function(data, textStatus, xhr) {
                 //This shows status code eg. 403
                 console.log("error", data.status);
                 //This shows status message eg. Forbidden
                 console.log("STATUS: "+xhr);
            }).always(function() {
                 //TO-DO after fail/done request.
                 console.log("ended");
            });

Example console output:

error 403 
STATUS: Forbidden 
ended

Thanks for providing the full code of how to use done, fail and always, with full function parameters. — IvanD, Dec 22 '16 at 04:02

score 19 · Answer 6 · answered Nov 12 '19 at 20:29

NB: Using jQuery 3.4.1

$.ajax({
  url: URL,
  success: function(data, textStatus, jqXHR){
    console.log(textStatus + ": " + jqXHR.status);
    // do something with data
  },
  error: function(jqXHR, textStatus, errorThrown){
    console.log(textStatus + ": " + jqXHR.status + " " + errorThrown);
  }
});

score 4 · Answer 7 · answered Mar 17 '11 at 19:32

jqxhr is a json object:

complete returns:
The jqXHR (in jQuery 1.4.x, XMLHTTPRequest) object and a string categorizing the status of the request ("success", "notmodified", "error", "timeout", "abort", or "parsererror").

see: jQuery ajax

so you would do:

jqxhr.status to get the status

How to get response status code from jQuery.ajax?

7 Answers7

Linked

Related