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

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 调用是异步的。

以下是执行操作的实际顺序以及为什么让我感到困惑：

1. 页面加载。
2. 向 get-table.php 发出 Ajax 请求。
3. 调用 click1() INSIDE onSuccess 发生。 我看到 div 有内容的警报。
4. 在 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 请求调用立即返回。 这意味着，紧随其后通常实际上是onSuccess处理之前执行的代码被称为（和AJAX请求甚至已经完成之前）。

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

Answer 2

无需尝试您的代码：AJAX 调用是异步执行的。 这意味着您的 Ajax.Request 触发，然后继续调用 click1() 告诉您 div 为空。 在 Ajax 请求完成之后的某个时间点，内容实际上被放入了 div 中。 此时 onSuccess 函数被执行，你得到你期望的内容。

Answer 3

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

Answer 4

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