0

これは非常に単純なプロトタイプの例です。

それが行うのは、ウィンドウのロード時に、html を div に貼り付ける ajax 呼び出しだけです。

<html>
    <head>
        <script type="text/javascript" src="scriptaculous/lib/prototype.js"></script>
        <script type="text/javascript">
            Event.observe(window, 'load', function(){
                new Ajax.Request('get-table.php', {
                    method:  'get',
                    onSuccess:  function(response){
                        $('content').innerHTML = response.responseText;
                        //At this call, the div has HTML in it
                        click1();
                    },
                    onFailure:  function(){
                        alert('Fail!');
                    }
                });
                //At this call, the div is empty
                click1();
            });

            function click1(){if($('content').innerHTML){alert('Found content');}else{alert('Empty div');}}
        </script>
    </head>
    <body><div id="content"></div></body>
</html>

紛らわしいのは、プロトタイプが div に実際に何かがあることを理解するコンテキストです。

ajax 呼び出しの onSuccess 部分を見ると、その時点で $('content').innerHTML に内容が含まれていることがわかります。

ただし、ajax 呼び出しの直後に $('content').innerHTML を確認すると、空のように見えます。

これは私の根本的な誤解に違いありません。誰か私に説明してくれませんか？

編集
何かを明確にしたいだけです。Ajax 呼び出しが非同期であることを認識しています。

物事が実行されている実際の順序と、それが私を混乱させる理由は次のとおりです。

  1. ページが読み込まれます。
  2. get-table.php への Ajax リクエストが行われます。
  3. click1() INSIDE onSuccess の呼び出しが発生します。div にコンテンツがあるというアラートが表示されます。
  4. Ajax 呼び出しが発生した後の click1() への呼び出し。div が空であるという警告が表示されます。

つまり、コードは書かれた順序で実行されているようですが、DOM は同じ順序で更新されていません。

編集 2 したがって、短い答えは、コードを onSuccess に配置することが正しい場所であるということです。

考慮すべきもう 1 つのケースは、次のように、Ajax 呼び出しを実行してから、最初の呼び出しの onSuccess から別の Ajax 呼び出しを実行する場合です。

new Ajax.Request('foo.php',{
  method:  'get',
  onSuccess:  function(response){
    doAnotherAjaxCall();
  }
});

function doAnotherAjaxCall(){
  new Ajax.Request('foo.php',{
    method:  'get',
    onSuccess:  function(response){
      //Anything that needs to happen AFTER the call to doAnotherAjaxCall() above
      //needs to happen here!
    }
  });
}
4

4 に答える 4

5

AJAX の最初の文字は「非同期」を表します。これは、AJAX 呼び出しがバックグラウンドで実行されることを意味します。つまり、AJAX 要求呼び出しはすぐに を返します。これは、onSuccess ハンドラーが呼び出される前 (および AJAX 要求が終了する前)に、通常その直後のコードが実際に実行されることを意味します。

編集した質問を考慮してください。一部のブラウザー (Firefox など) では、アラート ボックスが思ったほどモーダルではありません。非同期コードは、別のアラート ボックスが既に開いている場合でも、アラート ボックスをポップアップ表示する場合があります。その場合、新しいアラート ボックス (非同期コードからのアラート ボックス) が古いアラート ボックスの上に表示されます。これにより、非同期コードが最初に実行されたという錯覚が生じます。

于 2008-09-16T18:08:21.963 に答える
0

非同期の Ajax 呼び出しです。つまり、そのリクエスト呼び出しの直後に、レスポンスがまだ返されていないため、 $('content') はまだ空です。

于 2008-09-16T18:11:16.153 に答える
0

AJAX 呼び出しを処理する関数呼び出しの onSuccess 要素は、get-table.php からの応答を受け取った時点で実行されます。これは、get-table.php から応答を取得したときにブラウザーに呼び出すように指示する別の Javascript 関数です。AJAX.Request 呼び出しの下のコードは、AJAX.Request 呼び出しが行われるとすぐにアクセスされますが、必ずしも get-table.php が呼び出される前ではありません。そうです、おそらくライブラリを使用して詳細を隠しているために、AJAX がどのように機能するかについて少し根本的な誤解があると思います。

于 2008-09-16T18:31:19.803 に答える
0

コードを試していない場合: AJAX 呼び出しは非同期で実行されます。つまり、Ajax.Request が起動し、div が空であることを通知する click1() 呼び出しに進みます。その後のある時点で、Ajax リクエストが終了し、コンテンツが実際に div に配置されます。この時点で onSuccess 関数が実行され、期待どおりのコンテンツが得られます。

于 2008-09-16T18:09:03.757 に答える