Вопрос по ajax, jquery – Несколько вызовов AJAX одновременно

24

Я разработал несколько веб-сайтов, и я всегда сталкиваюсь с одним и тем же: множественные вызовы ajax У меня есть главная страница, где весь контент загружается асинхронно. Когда страница загружена, есть четыре НЕЗАВИСИМЫХ вызова, которые «рисуют» страницу по областям (сверху, слева, справа и снизу), и пока она загружается, я показываю пользователю типичные вращения ajax. Итак, когда запрос получен браузером, я выполняю обратный вызов, и разные области рисуют в разное время. Дело в том, что ответ для сервера иногда путается, я имею в виду, ответ сверху рисуется слева или наоборот.

Я пробовал некоторые решения, такие как создание отметки времени в каждом запросе, чтобы указать браузеру и серверу, что каждый запрос отличается.

Также я попытался настроить некоторые параметры кэша на сервере, на всякий случай.

Единственный способ, которым работает, - это включить request2 в обратный вызов и т. Д.

Кто-нибудь знает правильный способ сделать это, или когда-либо побеждал эту проблему ?? Я не хочу делать цепочку запросов.

Благодарност

Вот пример того, что я имею в виду:

<code>$(document).ready(function() {

$.get('/activity',Common.genSafeId(),function(data){$('#stream').html(data);$("#load_activity").addClass("empty");});
$.get('/messages',Common.genSafeId(),function(data){$('#message').html(data);$("#load_messages").addClass("empty");});
$.get('/deals',Common.genSafeId(),function(data){$('#new_deals_container').html(data);$("#load_deal").addClass("empty");});
$.get('/tasks',Common.genSafeId(),function(data){$('#task_frames').html(data);$("#load_task").addClass("empty");});});
</code>

И HTML-это простой jsp с четырьмя контейнерами каждый с различным идентификатором.

Да, я обновил пост. Контент добавляется в DOM, но иногда запрос рисует контент в неподходящем идентификаторе. Я знаю, это странно, по этой причине я обычно делаю цепочку запросов. Спасибо за ваш ответ. krazy_joss
Вы добавляете контент на свою страницу с помощью чего-то вроде $ ('# container'). Append ()? jimw
Что значит, ответ получен не в том месте? Правильно сконструированный, вызов Ajax обновит очень специфическую часть HTML, которая находится в очень специфическом месте в макете. Разместите простой код, демонстрирующий проблему. Eric J.

Ваш Ответ

2   ответа
-5

что у вас есть разные обратные вызовы для каждого вызова ajax, похоже, что вы пытаетесь использовать одну и ту же функцию для всех четырех, поэтому, когда они вызываются не по порядку (потому что они занимают разное количество времени на стороне сервера), они рендеринг в неправильном месте. Если вы настаиваете на использовании одной и той же функции для всех ваших обратных вызовов, тогда вам нужно что-то поместить в полезную нагрузку, чтобы обратный вызов знал, куда нужно выполнить рендеринг.

Отдельные функции не способ приблизиться к этому. Довольно просто сохранить значение в замыкании, чтобы определить, куда должен идти ответ. Beetroot-Beetroot
True Beetroot-Beetroot, но держу пари, что он не использует jQuery. Robert Louis Murphy
Кто говорит, что тебе нужен jQuery для закрытия? Elliot Bonneville
Никто не говорит, что даже я, просто говоря, что с помощью jQuery или подобной библиотеки вы можете заполнять элементы на своей странице без обратных вызовов, если ваш ответ будет просто HTML-фрагментом, что, как я полагаю, он и сделал. Обычно я использую ответы json, которые добавляют переменные к ответу, которые охватывают коды ответов, сообщения об ошибках и подробности об исходном вызове. Думаю, это то, что вы предлагаете, поэтому я согласен с вам Robert Louis Murphy
{ "Элемент": "верх", "HTML": "<р> Hello </ p>"} Robert Louis Murphy
39

CLOSURES

Затворы поначалу немного ошеломляет. Они являются функцией javaScript и нескольких других современных вычислительных языков.

Закрытие формируется выполненным экземпляром функции, которая имеет внутреннюю функцию (обычно это анонимный обработчик событий или именованный метод), которой требуется доступ к одной или нескольким внешним переменным (т. Е. Переменным, которые находятся внутри внешней функции, но вне внутренней функция). Сногсшибательная вещь заключается в том, что внутренняя функция сохраняет доступ к внешним переменным, даже несмотря на то, что внешняя функция завершена и вернулась в момент выполнения внутренней функции!

Более того, переменные, захваченные замыканием, доступнытольк для внутренних функций, а не для дальнейшей среды, которая привела к закрытию. Эта функция позволяет нам, например, создавать классоподобные структуры с частными, а также открытыми членами даже при отсутствии языковых ключевых слов «Public» и «Private».

Закрытие стало возможным благодаря использованию внутренними функциями внешних переменных, подавляющих «сборку мусора» javaScript, которая в противном случае разрушила бы среду внешней функции в некоторой неопределенной точке после завершени

Важность замыканий для хорошего и аккуратного программирования на Java не может быть переоценена.

В коде под функциейgetData() формирует при каждом вызове ловушку закрытияid1 а такжеid2 (а такжеurl), которые остаются доступными для анонимного обработчика ответа ajax (третий аргумент $ .get).

$(document).ready(function() {

    function getData(url, id1, id2) {
        $.get(url, Common.genSafeId(), function(data) {
            $(id1).html(data);
            $(id2).addClass("empty");
        });
    }

    getData('/activity', '#stream', '#load_activity');
    getData('/messages', '#message', '#load_messages');
    getData('/deals', '#new_deals_container', '#load_deal');
    getData('/tasks', '#task_frames', '#load_task');

});

Таким образом, вместо написания четырех отдельных обработчиков, мы используем способность языка формировать замыкания и называемодно и тож функция,getData(), четыре раза. При каждом звонкеgetData() формирует новое замыкание, которое позволяет обработчику ответа $ .get (который вызывается асинхронно при ответе сервера) на адресег DOM элементы.

@ eselk, глядя на это снова 9 месяцев спустя, я не уверен, как / почему код в вопросе мог все перепутать. Я думаю, что это должно было быть добавлено после того, как я начал отвечать на вопрос, и мне интересно, является ли это собственным решением ОП, а не кодом, который дал описанные симптомы. Не вызывает сомнений то, что четыре независимых функции, одна на$.get(), не нужны. МойgetData()ункция @ упрощает дела. Если у вас есть разумные замыкания, они становятся довольно простыми - и, конечно, гораздо проще на практике, чем формальное определение заставило бы вас поверить. Beetroot-Beetroot
Я многому научился из этого ответа, но мне потребовалось некоторое время, чтобы выяснить, что не так с исходным кодом в вопросе. Это потому, что переменная «data» на самом деле является одним и тем же объектом / экземпляром для каждого вызова, поэтому также повторно используется внутренними функциями (замыканиями)? Я полагаю, я наполовину ожидал, что во время выполнения JavaScript будет известно, что здесь будут созданы 4 отдельных объекта, поскольку они используются в этой (несколько странной) области, и никогда до или вне этого. Конечно, я рад, что мне не приходится сталкиваться с таким уровнем мутности в большинстве других языков, с которыми я работаю. eselk
@ Beetroot-Beetroot Мне нужно сделать 12 вызовов ajax одновременно при загрузке страницы. Кажется, что один ответ копируется в другой для некоторых. Связано ли это с ограничениями количества одновременных вызовов в браузере? techie_28

Похожие вопросы