Read ajax response headers?

jQuery is a fast, concise, JavaScript Library that simplifies how you traverse HTML documents, handle events, perform animations, and add Ajax interactions to your web pages. jQuery is designed to change the way that you write JavaScript.

Discuss Read ajax response headers? in the jQuery forum.

Read ajax response headers?

How can I grab information from the response headers from within an
jQuery ajax callback?

I have an object, “data”, containing IDs to different items I’d like
to build a detailed list with. I need to grab these details by sending
a request to a server–one for each item.

The issue I’m running into, is the response from the server contains
half the information I need in the body of the response, and the other
half in the headers. I can’t figure out a bullet-proof way of reading
the headers at the same time as the body…

Here’s a look at what I’m working with:

function index(data) {

for (var i = 0; i < data.length; i++) {

$.ajax({

type: ‘GET’,
url: ‘http://domain.com/’,
data: ‘this=that’,
success: function(data) {

/* Here I want to create a list item out of the data returned in
the body and headers */

}, complete: function(XMLHttpRequest, textStatus) {

}, error: function() {

}

});

}

}

I’ve tried saving the $.ajax as a variable, and
using .getResponseHeader(‘name’), but that only works sometimes, and
other times returns “Error: INVALID_STATE_ERR: DOM Exception 11”,
which apparently means the headers aren’t ready to be read. I’ve tried
this both in the success and complete function.

Any help would be incredibly awesome!

Read ajax response headers?

How can I grab information from the response headers from within an
jQuery ajax callback?

I have an object, “data”, containing IDs to different items I’d like
to build a detailed list with. I need to grab these details by sending
a request to a server–one for each item.

The issue I’m running into, is the response from the server contains
half the information I need in the body of the response, and the other
half in the headers. I can’t figure out a bullet-proof way of reading
the headers at the same time as the body…

Here’s a look at what I’m working with:

function index(data) {

* * * * for (var i = 0; i < data.length; i++) {

* * * * * * * * $.ajax({

* * * * * * * * * * * * type: ‘GET’,
* * * * * * * * * * * * url: ‘http://domain.com/’,
* * * * * * * * * * * * data: ‘this=that’,
* * * * * * * * * * * * success: function(data) {

* * * * * * * * * * * * * * * * /* Here I want to create a list item out of the data returned in
the body and headers */

* * * * * * * * * * * * }, complete: function(XMLHttpRequest, textStatus) {

* * * * * * * * * * * * }, error: function() {

* * * * * * * * * * * * }

* * * * * * * * });

* * * * }

}

I’ve tried saving the $.ajax as a variable, and
using .getResponseHeader(‘name’), but that only works sometimes, and
other times returns “Error: INVALID_STATE_ERR: DOM Exception 11”,
which apparently means the headers aren’t ready to be read. I’ve tried
this both in the success and complete function.

Any help would be incredibly awesome!

try to change the paramater name inside the success function, to
something like “xhr”,
for example:


success:function (data,xhr) {}
complele:function (xhr) {}
..

You uses XMLHttpRequest. Maybe the browser think about the native
object.
On Jan 13, 9:16*pm, bryan wrote:

Read ajax response headers?

How can I grab information from the response headers from within an
jQuery ajax callback?

I have an object, “data”, containing IDs to different items I’d like
to build a detailed list with. I need to grab these details by sending
a request to a server–one for each item.

The issue I’m running into, is the response from the server contains
half the information I need in the body of the response, and the other
half in the headers. I can’t figure out a bullet-proof way of reading
the headers at the same time as the body…

Here’s a look at what I’m working with:

function index(data) {

* * * * for (var i = 0; i < data.length; i++) {

* * * * * * * * $.ajax({

* * * * * * * * * * * * type: ‘GET’,
* * * * * * * * * * * * url: ‘http://domain.com/’,
* * * * * * * * * * * * data: ‘this=that’,
* * * * * * * * * * * * success: function(data) {

* * * * * * * * * * * * * * * * /* Here I want to create a list item out of the data returned in
the body and headers */

* * * * * * * * * * * * }, complete: function(XMLHttpRequest, textStatus) {

* * * * * * * * * * * * }, error: function() {

* * * * * * * * * * * * }

* * * * * * * * });

* * * * }

}

I’ve tried saving the $.ajax as a variable, and
using .getResponseHeader(‘name’), but that only works sometimes, and
other times returns “Error: INVALID_STATE_ERR: DOM Exception 11”,
which apparently means the headers aren’t ready to be read. I’ve tried
this both in the success and complete function.

Any help would be incredibly awesome!

Ahhh good to know. Is 1.4 safe to use yet?

So XMLHttpRequest.getResponseHeader() in the complete() function is
exactly what I needed, but accessing some data with the success
function and other data with the complete function kind of sketches me
out a little bit, especially since my ajax request is asynchronous and
wrapped in a loop (see the code in the original message)… I don’t
want anything to get out of sync. Here’s what I’m doing:

for (var i = 0; i < data.length; i++) {
….
success: function(data) {

// Create a list item out of ‘data’
$(‘ul.notes’).append(‘

 

‘);

}, complete: function(XMLHttpRequest, textStatus) {

// Add a property to that new list item
var key = XMLHttpRequest.getResponseHeader(‘Note-Key’);
$(‘ul.notes > li:last-child a’).attr(‘href’, ‘#’ + key);

}
….
}

This appears to be working awesomely, but I’m unsure if the NEXT
success function could ever fire BEFORE the current complete function
fires… If it did, the wrong key href would be assigned since I’m
using :last-child to find the list item the success function just
created.

So if someone has a second, can you let me know if the above code
could potentially get out of sync? Maybe when I create the list item
in the success function, I should give it an identifier based on the
current loop functions index… Then use that same index to re-find it
in the complete function… Instead of just counting on the list item
I’m looking for to be the last-child.

So if someone has a second, can you let me know if the above code
could potentially get out of sync? Maybe when I create the list item

You don’t need to use both the success and complete fn. *You can use
complete like this:

complete: function(xhr, status) {
* * if (status == “success”) {
* * * * $(‘ul.notes’).append(‘

‘);
* * * * var key = XMLHttpRequest.getResponseHeader(‘Note-Key’);
* * * * $(‘ul.notes > li:last-child a’).attr(‘href’, ‘#’ + key);
* * }

}

Holy moly, that’s beautiful. Thanks so much for your help!

On Jan 14, 11:04 am, Mike Alsup wrote:
So if someone has a second, can you let me know if the above code
could potentially get out of sync? Maybe when I create the list item

You don’t need to use both the success and complete fn. You can use
complete like this:

complete: function(xhr, status) {
if (status == “success”) {
$(‘ul.notes’).append(‘

‘);
var key = XMLHttpRequest.getResponseHeader(‘Note-Key’);
$(‘ul.notes > li:last-child a’).attr(‘href’, ‘#’ + key);
}

}

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *