Ajax несколько запросов одновременно

Question

недавно я разработал проект, в который я отправлял несколько запросов ajax на одной странице aspx. Я также поставил таймер, где этот запрос происходит с интервалом 5 секунд. Кажется, все работает нормально, пока вдруг не смешаются ответы. Я знаю, что могу сделать то же самое с одним запросом, но мне интересно, почему это происходит. Я просмотрел интернет, но пока не могу найти решения. Сейчас я фактически применил такой стиль кодирования, как создание одного запроса с несколькими результатами, но мне интересно, и я действительно хочу знать, как сделать несколько запросов ajax, если ответ не будет смешиваться. Это мой пример кода:

 $(document).ready(function () {
        var a = setInterval("request1()", 5000);
        var b = setInterval("request2()", 5000);
    });

function request1() {

        $.ajax({
            url: 'ajaxhandler.aspx?method=method1' ,
            beforeSend: function (xhr) {
                xhr.overrideMimeType('text/plain; charset=utf-8');
            },
            success: function (data) {
                  alert(data);
            }

        });
    }


function request2() {

        $.ajax({
            url: 'ajaxhandler.aspx?method=method2' ,
            beforeSend: function (xhr) {
                xhr.overrideMimeType('text/plain; charset=utf-8');
            },
            success: function (data) {
                  alert(data);
            }

        });
    }

Answer 1

Если вам нужно, чтобы запросы выполнялись по порядку, вам не следует использовать AJAX (первое «a» - для «асинхронного»).

Чтобы решить эту проблему, вы можете вызвать request2 () вобратный вызов для «успеха» вашего первого запроса.

function request1() {
    $.ajax({
        url: 'ajaxhandler.aspx?method=method1' ,
        beforeSend: function (xhr) {
            xhr.overrideMimeType('text/plain; charset=utf-8');
        },
        success: function (data) {
              request2();
        }

    });
}

Answer 2

Функция ниже примет массив URL для запросов JSON и вызовет обратный вызов с массивом результатов после завершения всех запросов.Его можно легко адаптировать к использованию не в формате JSON.

Идея состоит в том, чтобы сохранять входящие ответы в массив по мере их поступления, а затем вызывать обратный вызов только после получения всех результатов. Этот подход является хорошим способомПакетные обновления DOM и чтобы избежать таймера для каждого узла, который вы хотите обновить.

function multi_getJSON(urls, callback)
{
    // number of ajax requests to wait for
    var count = urls.length;

    // results of individual requests get stuffed here
    var results = [];

    // handle empty urls case
    if(count === 0)
    {
        callback(results);
        return;
    }

    urls.forEach(function(url, index)
    {
        $.getJSON(url, function(data)
        {
            results[index] = data;
            count = count - 1;

            // are we finished?
            if(count === 0)
            {
                callback(results);
            }
        });
    });
}

Answer 3

Как уже было сказано, вы не можете гарантировать порядок, в котором возвращаются результаты. Но если необходимо иметь возможность определить это, вы можете создать уникальный идентификатор для каждого сделанного асинхронного запроса, а затем отсортировать входящие ответы соответственно.

Примером, где я вижу такое решение полезным, является выполнение действий при нажатии клавиши (например, onkeyup). Делая что-то вроде этого, вы можете захотеть закодировать метку времени, номер версии или подобное, чтобы вы могли гарантировать какой-то порядок. Если пользователь пытается выполнить поиск «test», возможно, что ответ автозаполнения «tes» будет возвращен до ответа «te». Если вы просто перезаписываете данные автозаполнения, это, очевидно, не будет желательным поведением, так как вы могли бы отображать неверные результаты для текущих поисковых токенов.

Кодирование отметки времени (или уникального идентификатора, счетчика, номера версии, ключа и т. Д.) Позволит вам проверить это, чтобы убедиться, что у вас самый актуальный ответ, или отсортировать результаты по отметке времени, если вам нужно чтобы гарантировать заказ и т. д.

Answer 4

Это не ошибка JavaScript, а ошибка, потому что вы вызываете одну страницу одновременно. Если бы у вас было две серверные страницы для ваших двух файлов AJAX, тогда все было бы хорошо. Попробуйте создать два разных aspx файла для вас, разных methods, чтобы они вызывались вместе.

Но это не будет хорошей практикой. Почему бы не отправить метод в качестве параметра, и в вашем файле aspx есть условие для разных методов? Затем, если у вас есть два (или более) метода, используемых одновременно, просто отправьте оба на сервер одним вызовом. Вы сохраните заголовок HTTP и задержку вызова для вашего вызова.

function requestAll() {

        $.ajax({
            url: 'ajaxhandler.aspx' ,
            data: ['method1', 'method2'],
            beforeSend: function (xhr) {
                xhr.overrideMimeType('text/plain; charset=utf-8');
            },
            success: function (data) {
                  alert(data);
            }

        });
    }