1

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);の文字列は正しい文字列を生成しているように見えますが、2 番目の文字列は生成されていないため、値がスタックしていないことがわかります。

誰かが助けてくれるなら、前もって感謝します。

4

1 に答える 1

2

スコーピングの問題ではなく、タイミングの問題です。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
}

jsフィドル

于 2012-03-18T15:52:07.710 に答える