AJAX Request - get HTTP Code/Response Header for successful request

Question

I'm trying to get the HTTP Response Code/Response Header from my AJAX request. Here's my original script:

$("#callContact1").click(function() {
  $.ajax({
      url: "https://www.server.com?type=makecall",
      data: {},
      type: "GET"
    })
    .then(function(data) {
      $('#ajaxResponse').html(data).show();
    })
    .fail(function(xhr) {
      var httpStatus = (xhr.status);
      var ajaxError = 'There was an requesting the call back. HTTP Status: ' + httpStatus;
      console.log('ajaxError: ' + ajaxError);
      //make alert visible 
      $('#ajaxResponse').html(ajaxError).show();
    })
})

which is working fine. I've updated this to try and get the HTTP response code/header and view this in the console.log but I'm not seeing anything there. Here's my updated script:

$("#callContact1").click(function() {
  console.log('starting call back request');
  $.ajax({
      url: "https://www.server.com?type=makecall",
      data: {},
      type: "GET"
    })
    .then(function(data) {
      $('#ajaxResponse').html(data).show();
      var httpStatus = (data.status);
      var httpResponseCode = (data.getAllResponseHeaders);
      console.log('httpStatus: ' + httpStatus);
      console.log('httpResponseCode: ' + httpResponseCode);
    })
    .fail(function(xhr) {
      var httpStatus = (xhr.status);
      var ajaxError = 'There was an requesting the call back. HTTP Status: ' + httpStatus;
      console.log('ajaxError: ' + ajaxError);
      //make alert visible 
      $('#ajaxResponse').html(ajaxError).show();
    })
})

but I'm not getting anything in the console (the request is executed successfully though). I also noticed the output from the 2nd line of the updated script is also not appearing in the console either.

anything in the console about CORS perhaps? or Access-Control-* headers? — Jaromanda X
– Jaromanda X, Commented May 22, 2017 at 5:13
I restarted by browser and I'm now seeing the entries in the console, but I'm getting "undefined" values instead of the expected values: httpStatus: undefined httpResponseCode: undefined — user982124
– user982124, Commented May 22, 2017 at 5:17

HARI · Accepted Answer · 2017-05-22 05:22:14Z

2

Modify the above code to

.then(function(data,status,xhr) {
      $('#ajaxResponse').html(data).show();
      var httpStatus = status;
      var httpResponseCode = (xhr.status);
      console.log('httpStatus: ' + httpStatus);
      console.log('httpResponseCode: ' + httpResponseCode);
    })

answered May 22, 2017 at 5:22

HARI

4063 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Victor Lia Fook · Accepted Answer · 2017-05-22 06:00:05Z

As you can find in jQuery's documentation for jQuery.ajax()

https://api.jquery.com/jQuery.ajax#jqXHR

you can use .done() and .fail() or using .then() which incorporates both, using two callback functions as parameters, the first for success and the second for fail.

So, you could use smt like this:

.then(function(data, status, xhr) {
    $('#ajaxResponse').html(data).show();
    var httpStatus = status;
    var httpResponseCode = (xhr.status);
    console.log('httpStatus: ' + httpStatus);
    console.log('httpResponseCode: ' + httpResponseCode);
}, function(data, status, xhr) {
    var ajaxError = 'There was an requesting the call back. HTTP Status: ' + status;
    console.log('ajaxError: ' + ajaxError); //make alert visible 
    $('#ajaxResponse').html(ajaxError).show();

})

Collectives™ on Stack Overflow

AJAX Request - get HTTP Code/Response Header for successful request

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related