CODEWITHSUNDEEP
javascriptasynchronousonreadystatechange
yky
yky

Reputation: 21

onreadystatechange in a loop, readystate changes too late

I issue in a loop a total of eight xmlhttprequests to a Google map server and process the json objects the server returns to retrieve the zip codes. The code works fine if the xmlhttprequests are synchronous. Since I'm supposed to use asynchronous requests, I'm trying to convert the code to asynchronous. It doesn't work.

I use two alerts to monitor myZip. When the code is run, the second alert, right above the return, runs eight times and shows myZip as null or undefined and that is what is returned. Then the first alert runs eight times and gives the desired zip code, too late, unfortunately. It seems to me the readystate doesn't change until too late.

How should I modify the code so it will return the zip code, not null? Any help will be greatly appreciated.

var url = "http://maps.googleapis.com/maps/api/geocode/json?address="+address+city+state+"&sensor=false";

req.open("GET", url,true);

var myZip;

req.onreadystatechange = function()
{ 
        if(req.readyState == 4 && req.status == 200) {
        (function(data){
            var myObj = eval( '(' + data + ')' );
            if(myObj.status=="OK"){    
                  for(i=0; i <myObj.results[0].address_components.length; i++){
                  if(myObj.results[0].address_components[i].types=="postal_code"){
                  myZip=myObj.results[0].address_components[i].long_name;
                  alert('zip is '+myZip);
                  }
               }
            }    
            else    
            {
            alert("Error: returned status code "+req.status+" "+req.statusText);
            }
        })(req.responseText);
    }
}
req.send();
alert(myZip);
return myZip;

Upvotes: 2

Views: 1266

Answers (2)

tomg
tomg

Reputation: 355

You should either use a callback instead of return statement, or you should run this as Stratified JavaScript: http://stratifiedjs.org. Then you can write it in a synchronous fashion, like you kind of did, even though it will NOT block your browser.

Upvotes: 1

Dr.Molle
Dr.Molle

Reputation: 117334

I guess you use the same object(req) a couple of times and will be overwritten on each loop.

So use separate objects for every requests or start a new request if the last one is finished.

How exactly you can do this I cannot say without knowing what req is.

Upvotes: 1

Related Questions