Проблема с доступом к содержимому элемента div, когда этот контент получен в результате вызова Ajax.

StackOverflow https://stackoverflow.com/questions/75181

  •  09-06-2019
  •  | 
  •  

Вопрос

Вот очень простой пример прототипа.

Все, что он делает, это при загрузке окна вызов 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 является асинхронным.

Вот фактический порядок выполнения вещей и почему меня это сбивает с толку:

  1. Страница загружается.
  2. Выполняется Ajax-запрос к get-table.php.
  3. Происходит вызов click1() INSIDE onSuccess.Я вижу предупреждение о том, что в div есть контент.
  4. Вызов 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!
    }
  });
}

});

Это было полезно?

Решение

Первая буква AJAX означает «асинхронный».Это означает, что вызов AJAX выполняется в фоновом режиме, т.е.вызов запроса AJAX немедленно возвращается.Это означает, что код сразу после него обычно фактически выполняется. до вызывается обработчик onSuccess (и еще до завершения запроса AJAX).

Принимая во внимание ваш отредактированный вопрос:в некоторых браузерах (например.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, вероятно, из-за использования библиотеки для сокрытия деталей.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top