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

问题描述：

下面是一个非常简单的原型示例。当内容来自Ajax调用时访问div的内容时出现问题

它所做的只是在窗口加载时，将一些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>

令人困惑的是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调用，然后做另一个Ajax调用从的onSuccess这样，第一次调用的：

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! 
    } 
    }); 
}

}）;

我已更新我的答案，以解释您添加的信息。对不起，噪音。 – 2008-09-16 18:33:57

答

AJAX的第一个字母代表“异步”。这意味着AJAX调用在后台执行，即AJAX请求调用立即返回。这意味着代码刚好在之后，在之前onSuccess处理程序被调用（并且在AJAX请求完成之前）。考虑到您编辑的问题：在某些浏览器（例如Firefox）中，警报框并不像您想象的那样模式化。即使另一个已经打开，异步代码也可能会弹出一个警告框。在这种情况下，较新的警报框（来自异步代码的警报框）将显示在较旧警报框的顶部。这造成了异步代码首先被执行的错觉。

请阅读我的编辑。您所描述的流程在实践中并不完全准确。 – 2008-09-16 18:25:13

答

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

答

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

答

您在接收来自get-table.php的响应时执行的用于处理AJAX调用的函数调用的onSuccess元素。这是一个单独的Javascript函数，当您从get-table.php获得答案时，您正告诉浏览器进行调用。一旦AJAX.Request调用完成，就会访问AJAX.Request调用下面的代码，但不一定在调用get-table.php之前。所以是的，我认为对AJAX的工作原理有一点基本的误解，可能是因为使用库来隐藏细节。

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

相关推荐