[prototype.js] Ajax.Requestの取得データをコールバック関数外で取得する方法

質問

下記のコードを実行すると、
'undefined'
'hello'
と表示されます。

（A）の箇所でグローバル変数gTestに'hello'が格納されている事を期待するのですが、undefinedとなります。
どういった理由でこうなるのでしょうか？

また、onCompleteで定義した処理内で、
値をグローバル変数に格納するにはどのような方法がありますか？

何卒よろしくお願い致します。

--
<script src="/js/prototype.js" type="text/javascript"></script>
<script type="text/javascript">
var gTest;
function load()
{
new Ajax.Request('http://～/', { method: 'get', onComplete: displayData });
alert(gTest); //（A）undefinedと表示
}

function displayData(httpObj)
{
gTest = 'hello';
alert(gTest); //（B）helloと表示
}
load();
</script>
--

回答No.2

steel_gray · ベストアンサー

#1さんのおっしゃる通りです。

Requestの通信モードのデフォルトは非同期通信です。
よって、Requestの結果を待たずに次のステップに移るので
最初はundefinedになります。
もし、Requestの結果を待ってから次のステップに移るように動作させたいのであればRequestのパラメータにasynchronousを加えて同期通信にする必要があります。
new Ajax.Request('http://～/', { asynchronous : false , method: 'get', onComplete: displayData });

こうすると、コールバック関数(B)が先に実行され、次のステップ（A)に移ります。

お礼

返答ありがとうございます。

大変良く分かりました。
とても当たり前の動作をしていただけなのですね。
もっと明確に「非同期通信」を意識しなくてはダメでしたね。

回答No.3

神崎 渉瑠（@taloo）

非同期っぽいサンプル。

<script type="text/javascript">
var gTest;
function load()
{
setTimeout(displayData, 5000);
alert(gTest); //（A）undefinedと表示
}

function displayData(httpObj)
{
gTest = 'hello';
alert(gTest); //（B）helloと表示
}
load();
</script>

お礼

サンプルありがとうございます。
理解の一助になりました。

回答No.1

auty

alert(gTest); //（A）undefinedと表示
が先に実行され、 このときは、gTest はまだ
undefined
です。

new Ajax.Request('http://～/', { method: 'get', onComplete: displayData });
が完了するときに、
displayData ()の
alert(gTest); //（B）helloと表示
が実行されるのだと思います。

gTestに異なる初期値を与えて実験しても面白いとでしょう。

お礼

返答ありがとうございました。

その挙動までは捉えていましたが、
もう一歩突っ込んだところまで考えが及んでなかったようです。