Question

33

Ajax HEAD request via Javascript/jQuery

rated 0 times [ 40] [ 7] / answers: 1 / hits: 54611 / 14 Years ago, mon, january 17, 2011, 12:00:00

I seem to be having some issues with making HEAD requests, and preserving the integrity of data in an array.

Given this snippet:

var imageTemp = Array();



$('*')

    .each(function(index){

        if($(this).css('background-image') != 'none'){

            imageTemp.push($(this).css('background-image').slice(5, -2));

        }

    });

I capture the URLs of all background-images on a given page. Now, trying to grab the size of each image via HEAD requests for Content-Length, I use this snippet:

var imageData = Array();



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

    ajaxSizeRequest = $.ajax({

        type: HEAD,

        async: true,

        url: imageTemp[i],

        success: function(message){

            imageData.push([imageTemp[i], ajaxSizeRequest.getResponseHeader('Content-Length')]);

        }

    });

}

However, when I dump imageData via console.log, I each element (which should be an array containing the URL and the content-length) ends up as [undefined, XXXX] where XXXX is always the size of the last requested Content-Length

I'm stumped, though it appears to be a timing/scoping issue. Do I have a sort of race-condition occuring here?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

hadens

Add To Favorites

Follow

Total Points: 142

Total Questions: 98

Total Answers: 100

Location: Kenya

Member since Mon, Jun 14, 2021

3 Years ago

hadens questions

1 Using NextJS to do SSR with Class Components and getInitialProps, render method has undefined data

Thu, Feb 20, 20, 00:00, 4 Years ago

1 How do you get around NATs using WebRTC without a TURN server?

Sat, Jan 25, 20, 00:00, 4 Years ago

1 Fetch API: Can 'await res.json()' fail after a completed request?

Tue, Jan 14, 20, 00:00, 4 Years ago

1 Testing Headers of Axios Request

Fri, Oct 11, 19, 00:00, 5 Years ago

1 Cancelling previous API requests with Axios

Tue, Aug 6, 19, 00:00, 5 Years ago

View All

answered 14 Years ago keyonnal · Accepted Answer

The problem is that the single variables i and ajaxSizeRequest being captured by the callback function are the same variables for all instances of the callback function. I think if you call a function and pass the index variable to it and, at the same time, ~~scope the request variable locally to the function itself~~ use the response parameter of the done handler, you should end up with independent variables captured by the callback. It should then reference each array element and each response variable correctly.

var imageData = Array();



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

    updateImageData( i );

}



function updateImageData( i )

    $.ajax({

        type: HEAD,

        async: true,

        url: imageTemp[i],

    }).done(function(message,text,jqXHR){

        imageData.push([imageTemp[i], jqXHR.getResponseHeader('Content-Length')]);

    });

}