当内容来自Ajax调用时访问div内容时出现问题

Question

当内容来自Ajax调用时访问div内容时出现问题

这是一个非常简单的Prototype示例.

所有这一切都是在窗口加载时,ajax调用将一些html粘贴到div中.

<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>

Run Code Online (Sandbox Code Playgroud)

令人困惑的是Prototype理解div实际上有东西的上下文.

如果你看一下ajax调用的onSuccess部分,你会看到那时$('content').innerHTML里面有东西.

但是当我在ajax调用之后立即检查$('content').innerHTML时,它似乎是空的.

这对我来说必定是一些根本性的误解.有人在乎向我解释吗？

编辑
我只想澄清一些事情.我意识到Ajax调用是异步的.

这是事情正在执行的实际顺序以及为什么它让我感到困惑:

页面加载.
发出了对get-table.php的Ajax请求.
发生对click1()INSIDE onSuccess的调用.我看到div有内容的警报.
在Ajax调用发生后调用click1().我看到div是空的警报.

所以它就像代码按照它编写的顺序执行,但是DOM没有以相同的顺序更新.

编辑2 所以简短的回答是将代码放入onSuccess是正确的地方.

另一个要考虑的情况是你进行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!
    }
  });
}

Run Code Online (Sandbox Code Playgroud)

});

Answer 1

Jan*_*ger 5

AJAX的第一个字母代表"异步".这意味着AJAX调用在后台执行,即AJAX请求调用立即返回.这意味着,紧随其后通常实际执行的代码之前的onSuccess处理被调用(和之前的AJAX请求甚至已经完成).

考虑到您编辑过的问题:在某些浏览器(例如Firefox)中,警报框并不像您想象的那样模态化.异步代码可能会弹出一个警告框,即使另一个已经打开.在这种情况下,较新的警报框(来自异步代码的警报框)显示在较旧的警报框之上.这就产生了异步代码首先被执行的错觉.

归档时间：	17 年前
查看次数：	1347 次
最近记录：	13 年，8 月前