Javascript Ajax在全局变量中保存onreadystatechange的结果

时间:2012-03-18 15:31:27

标签: javascript onreadystatechange

我正在尝试编写一个脚本来检索WOEID并与Yahoo Weather API接口。我正在构建一个基于我正在使用的数据库中的东西的纬度和经度值的URL,并且可以做得非常好。

但是,当把这个URL存储为我可以在其他功能中使用的字符串时,我遇到了麻烦。经过一些初步阅读后,似乎与onreadystatechange和范围有关,但我似乎无法理解它能够存储我的变量。

到目前为止,这是我的代码:

 //<![CDATA[

var latitude = "";
var longitude = "";
var yahooAppID = "";
var yql = "";

//example yahoo request
//http://where.yahooapis.com/geocode?q=38.898717,+-77.035974&gflags=R&appid=SKUTk24k


function getLatLng() {
    var routeID = 5;
    var get = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
    get.open('POST','process.php', true)
    get.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    get.send('command=fetch&rid='+routeID);
    get.onreadystatechange = function(){
        if(get.readyState==4 && get.status == 200) {
                os = eval('(' + get.responseText + ')');
                latitude = os.start.lat;
                longitude = os.start.lng;
                //var yql = 'select * from flickr.places where lat='+latitude+' and lon='+longitude;
                yql = "select * from flickr.places where lat=" +latitude+ " and lon="+longitude;
            }
            document.write(yql);
        }
        document.write(yql);
    }


function test() {
    getLatLng();
}
//]]>

第一个document.write(yql);似乎产生了正确的字符串,但第二个没有,所以我知道该值没有卡住。

如果有人可以提供帮助,请提前致谢。

1 个答案:

答案 0 :(得分:2)

你不是在看范围问题 - 而是一个时间问题。 AJAX请求(至少是你配置它的方式)是异步发生的,所以你的脚本的其余部分将在加载AJAX请求时执行。因此yql直到最后才会更新。

另外,警告:在请求完成时,您将无法再使用document.write。使用alert()或DOM操作。

生命周期如下:

  1. 脚本正常执行
  2. 匿名函数绑定到onreadystatechange
  3. readyState从“未发送”更改为“已接收标头”更改为“已加载”至“已完成”。您的函数在每个时间被称为,但只有在就绪状态为“完成”时才设置yql
  4. readyState已完成,您生成yql
  5. 因此,只需从if:

    中调用您的处理函数
    if(get.readyState==4 && get.status == 200) {
            os = get.responseXML;
            //find lat + lng
            yql = "select * from flickr.places where lat=" +latitude+ " and lon="+longitude;
            process(yql); //here!
    }
    
    
    
    function process(yql) {
       alert(yql);     //do something more useful eventually
    }
    

    jsFiddle