当来自Ajax调用的div内容访问问题
这是一个非常简单的原型示例。
它所做的只是在窗口加载时进行的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请求。
- 发生对onSuccess内部的click1()的调用。我看到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!
}
});
}
});
解决方案
回答
AJAX的首字母代表"异步"。这意味着AJAX调用是在后台执行的，即AJAX请求调用立即返回。这意味着紧随其后的代码通常在onSuccess处理程序被调用之前(甚至在AJAX请求完成之前)实际执行。
考虑到我们编辑后的问题：在某些浏览器(例如Firefox)中，警报框没有我们想象的那样模态。即使已经打开了另一个异步代码，异步代码也可能会弹出一个警告框。在这种情况下，较新的警报框(来自异步代码的一个)将显示在较旧的警报框的顶部。这产生了先执行异步代码的错觉。
回答
无需尝试代码：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的工作方式存在一些根本性的误解，可能是由于使用了一个库来隐藏细节。
