Проблема с доступом к содержимому div, когда это содержимое поступило из вызова Ajax
Вот очень простой пример прототипа.
Все, что он делает, это при загрузке окна вызов 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!
}
});
}
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Первая буква AJAX означает «асинхронный». Это означает, что вызов AJAX выполняется в фоновом режиме, то есть вызов запроса AJAX немедленно возвращается. Это означает, что код сразу после того, как он обычно фактически выполняется перед, вызывается обработчик onSuccess (и до того, как запрос AJAX даже завершится).
Принимая во внимание ваш отредактированный вопрос: в некоторых браузерах (например, Firefox) окна предупреждений не такие модальные, как вы могли подумать. Асинхронный код может вызвать всплывающее окно с предупреждением, даже если другое уже открыто. В этом случае новое окно предупреждения (из асинхронного кода) отображается поверх старого. Это создает иллюзию, что асинхронный код выполняется первым.
Пожалуйста, прочтите мою правку. На практике описываемый вами поток не совсем точен.
Вы частично правы :) Firefox определенно ведет себя так, как вы описываете. IE7, однако, сначала отображает предупреждение изнутри onSuccess, что очень сбивает с толку.
Я не могу этого подтвердить. IE7 делает то же самое, что и Firefox на моем компьютере, за исключением того, что диалоговые окна появляются в разных местах, чтобы вы действительно могли видеть, что происходит.
Не пробуя свой код: вызов AJAX выполняется асинхронно. Это означает, что ваш Ajax.Request срабатывает, а затем переходит к вызову click1 (), который сообщает вам, что div пуст. В какой-то момент после этого запрос Ajax завершается, и контент фактически помещается в div. На этом этапе выполняется функция onSuccess, и вы получаете ожидаемый контент.
Это вызов Ajax, который является асинхронным. Это означает, что сразу после этого запроса ответ еще не вернулся, поэтому $ ('content') все еще пуст.
Элемент onSuccess вызова функции, который вы делаете для обработки вызова AJAX, выполняется в то время, когда вы получаете ответ от get-table.php. Это отдельная функция Javascript, которую вы указываете браузеру вызывать при получении ответа от get-table.php. Код ниже вашего вызова AJAX.Request доступен сразу после вызова AJAX.Request, но не обязательно до вызова get-table.php. Так что да, я думаю, что есть небольшое фундаментальное непонимание того, как работает AJAX, вероятно, из-за использования библиотеки для скрытия деталей.
Я обновил свой ответ, чтобы учесть вашу добавленную информацию. Простите за шум.