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

Question

我正在尝试编写一个脚本来检索 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); 似乎生成了正确的字符串，但第二个没有，所以我知道该值没有卡住。

如果有人能提供帮助，在此先感谢

Answer 1

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

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

生命周期是这样的:

1. 脚本正常执行
2. 匿名函数绑定(bind)到onreadystatechange
3. readyState 从“未发送”变为“已接收 header ”再变为“正在加载”再变为“完成”。您的函数每次 都会被调用，但您只在就绪状态为“完成”时才设置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