Вот очень простой пример прототипа.
Все, что он делает, это при загрузке окна 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 действительно есть что-то.
Если вы посмотрите на часть onSuccess вызова ajax, вы увидите, что в этот момент $ ('content'). InnerHTML содержит в себе материал.
Однако, когда я проверяю $ ('content'). InnerHTML сразу после вызова ajax, он кажется пустым.
Это должно быть фундаментальное недоразумение с моей стороны. Кто-нибудь хочет мне это объяснить?
Редактировать
Я просто хочу кое-что уточнить. Я понимаю, что вызов Ajax является асинхронным.
Вот фактический порядок выполнения вещей и почему меня это смущает:
- Страница загружается.
- Выполнен Ajax-запрос к get-table.php.
- Вызов click1 () INSIDE onSuccess происходит. Я вижу предупреждение, что у div есть содержимое.
- Вызов click1 () ПОСЛЕ вызова Ajax. Я вижу предупреждение о том, что 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!
}
});
}
* *} Тысяча сорок-одина);