Question

这是一个非常简单的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>

令人困惑的是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!
    }
  });
}

}）;

Answer 1

AJAX的第一个字母代表“异步”。这意味着AJAX调用是在后台执行的，即AJAX请求调用立即返回。这意味着紧跟在它之后的代码通常在 on_ccess处理程序被调用之前（以及在AJAX请求完成之前）实际执行。

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

Answer 2

没有尝试过您的代码：AJAX调用是异步执行的。这意味着你的Ajax.Request会触发，然后继续执行click1（）调用，告诉你div是空的。在此之后的某个时刻，Ajax请求已完成，内容实际上已放入div中。此时，执行onSuccess函数，您将获得预期的内容。

Answer 3

这是Ajax调用，它是异步的。这意味着在请求调用之后，响应还没有回来，这就是为什么$（'content'）仍然是空的。

Answer 4

当您从get-table.php收到响应时，将执行您处理AJAX调用的函数调用的onSuccess元素。这是一个单独的Javascript函数，当你从get-table.php得到答案时，你告诉浏览器调用它。一旦进行了AJAX.Request调用，就会访问AJAX.Request调用下面的代码，但不一定在调用get-table.php之前访问。所以是的，我认为对AJAX如何工作存在一些根本性的误解，可能是因为使用了库来隐藏细节。

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

4 个答案: