Webmaster Forum / HTML, CSS, Scripts / JavaScript / February 2007

This is my first firefox extension, and I'm trying to collect some
information from several sites and mash'em up into one page. But I
need to do processing specific to each asynchronous request. All the
examples I've found use a global httpRequest object that is processed
by a callback function. But I can never know what request is actually
in the httpRequest at a given time. So I tried to make an array of
such requests. But I can't seem to get around the global problem
because I can't seem to tell the processing functions what they should
process.

I thought this would work, but apparently because of closures or
something, the i variable is global with respect to the anonymous
function:

//----------------- start code -----------------------
var httpRequest = Array();
// urls is an array of URLs
// searchData is an array the same size as URLs containing data to be
searched on the corresponding URL

for (var i=0; i< urls.length; i++) {
    httpRequest[i] = false;
    httpRequest[i] = new XMLHttpRequest();
    httpRequest[i].onreadystatechange = function() {
        var id = i;
        alert("der "+ id + " " + httpRequest[id]);
        if (httpRequest[id].readyState == 4) {
            if (httpRequest[id].status == 200) {
                var processedData = getData(httpRequest[id].responseText,
searchData[id]);
            }
        }
    };
    httpRequest[i].open('GET', URL, true);
    httpRequest[i].send(null);
}
//------------------ end code -----------------------

Any ideas on how I can make my callback function (anonymous here, but
didn't work the normal way either) know which httpRequest it is
answering?