Можем ли мы разделить большие ajax вызовы на несколько небольших вызовов, чтобы быстрее загружать данные? - PullRequest
4 голосов
/ 21 марта 2020

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

$.ajax({
    type: "POST", url: "MyPage.aspx/LoadGrid",
    data: "{idyear:'2020'}",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (response) {
        $(".gridBody").html(response.d);
    },
    failure: function (response) {
        alert(response.d);
    }
});

В настоящее время эта операция возвращает 1026 записей и занимает около 12 секунд.

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

Итак, я попробовал другой подход. Сначала я решил получить общее количество записей. например, теперь у меня есть 1026 записей, и если я хочу загрузить свои данные в 100 границах записей, мне нужно сделать 11 ajax вызовов одновременно и объединить результаты в конце всех вызовов ajax. Я подумал, что, применяя этот метод, я могу начать все вызовы вместе, и мне не нужно ждать окончания вызова, чтобы начать новый.

var pagesize = 100; 
getQty(function () {
    var pagesqty = Math.floor(qty / pagesize);
    if (qty % pagesize > 0) {
        pagesqty += 1;
    }
    var control = 0;
    for (var i = 0; i < pagesqty; i++) {
        $.ajax({
            type: "POST", url: "MyPage.aspx/LoadGridMtoN",
            data: "{idyear:'2020' , page:'" + i + "' , pagesize:'" + pagesize + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (response) {
                //alert(control+" succeed");
                eval("var str" + i + "='" + response.d + "'");
                control += 1;
                if (control == pagesqty) {
                    var str = "";
                    for (var i = 0; i < pagesqty; i++) {
                        eval("str += str" + i);
                    }
                    $(".gridBody").html(str);
                }
            },
            failure: function (response) {
                alert(response.d);
            }
        });
    }
});

но теперь я получаю сообщение об ошибке тайм-аута при выполнении вызовов ajax. кто-нибудь знает какой-нибудь способ лучше?

PS: я хотел попробовать веб-работника, но кажется, что я не могу использовать JQuery в веб-Workwer.

PS: я не хочу использовать пейджинг. Я должен загрузить все данные вместе.

Ответы [ 3 ]

3 голосов
/ 25 марта 2020

Обратите внимание, что одновременный вызов конечных точек со стороны клиента (вместо одного вызова) имеет больше накладных расходов и не является хорошим решением. Например, ваш сервер должен обрабатывать больше соединений от клиента, ваша БД должна обрабатывать больше соединений от вашего ORM в бэк-энде, от вашей таблицы и, соответственно, от вашего диска и ввода-вывода, и т. Д. * c ...

Кстати, учитывая, что все части вашей системы идеально спроектированы, с точки зрения UX, и с технической точки зрения, постепенная загрузка данных является хорошим решением. Я имею в виду загрузку первых 100 записей, в то время как пользователь использует их, загружая вторые 100 записей и добавляя их в конец списка (или когда пользователь прокручивает страницу вниз).

Однако, наконец, вы должны рассмотреть разбиение на страницы! Вы не можете загрузить 1M записей на свою веб-страницу! И никто не проверяет и не использует все записи на веб-странице. Таким образом, вам пришлось ограничить число извлекаемых записей и использовать нумерацию на стороне сервера или предоставить пользователям другой подход, чтобы отправить их запрос, а затем обработать запрос, создать отчет и записать его в необработанный текстовый файл или в Excel. и отправьте ему / ей ссылку для скачивания.

1 голос
/ 30 марта 2020

Предполагая, что вы можете вносить изменения на стороне сервера,

  1. создайте новую таблицу со всеми полями, которые вам понадобятся во внешнем интерфейсе
  2. , напишите хранимую процедуру для регулярного обновления этой таблицы
  3. используйте эту таблицу в своем вызове ajax для извлечения записей.
  4. Используйте нумерацию страниц. Никто не собирается использовать более 1000 записей одновременно
  5. дает возможность поиска вверху, если вы чувствуете, что пользователь должен иметь доступ ко всем записям.
  6. Как предлагается в других ответах, не создавайте несколько ajax вызовов. Вы только пожалеете и создадите для себя узкое место на более поздних этапах
1 голос
/ 21 марта 2020

Ответ, который вы не хотите слышать, заключается в том, что вам нужно исправить свою сторону сервера. 1026 записей на самом деле не должны занимать 12 секунд, особенно для данных, извлекаемых для клиента. Подумайте об уменьшении количества JOIN в вашем операторе SQL и агрегировании данных в серверной логике c, вместо этого попробуйте запустить EXPLAIN для ваших запросов и сочтите, что индексы уместны.


Чтобы ответить Ваш вопрос о разделении AJAX звонков ...

Похоже, вы реализовали разбиение на страницы, поэтому, возможно, создайте асинхронную рекурсивную функцию, которая получает 5-10 записей за один раз, увеличивая pageNum и повторяя после каждого обещания ответ. Вы можете заполнить страницу, и пользователь будет видеть данные без ожидания так долго. Однако вы должны понимать, что это увеличит объем вашего сервера, и, вероятно, потребуется больше времени для получения всех данных. Я чувствую, как ты пытаешься достичь 1010 * этой цели в плохой практике.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...