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

Javascript Ajax save result of onreadystatechange in global variable

本文关键字：保存 存在 全局变量 结果 Ajax onreadystatechange Javascript      更新时间：2023-09-26

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

然而，当我把URL存储为一个可以在其他函数中使用的字符串时，我遇到了麻烦。经过初步阅读，onreadystatechange和scope似乎是个问题，但我似乎无法理解它，无法存储我的变量。

这是我到目前为止的代码：

 //<![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);似乎产生了正确的字符串，但第二个没有，所以我知道这个值没有固定下来。

如果有人能帮忙，请提前感谢。

您关注的不是范围问题，而是时间问题。AJAX请求（至少按照您配置的方式）是异步发生的，因此脚本的其余部分将在加载AJAX请求时执行。所以yql直到最后才会更新。

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

生命周期如下：

  1. 脚本执行正常
  2. 匿名函数绑定到onreadystatechange
  3. readyState从"unsent"变为"headers received"，从"loading"变为了"done"。函数每隔调用一次，但只有在就绪状态为"完成"时才设置yql
  4. readyState完成，然后生成yql

所以，只需从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

相关文章：