Постоянно возвращать результат ajax с Javascript / jQuery?

Question

Мне было интересно, можно ли будет использовать функцию jjuery ajax, чтобы постоянно возвращать результат на страницу и соответственно обновлять.

Что я имею в виду, это: - Пользователь запускает поиск - jQuery использует функцию ajax, чтобы получить первые 25 результатов и добавить их в таблицу. - Пока пользователь просматривает этот список, jQuery продолжает захватывать результаты 25 и добавлять их в таблицу.

Идея заключается в том, что ваш пользовательский поиск имеет 10000 результатов. Я хотел бы загрузить их в таблицу, в которой управление страницами контролируется Javascript, чтобы нам не приходилось возвращаться на сервер каждый раз, когда пользователь хочет перейти на следующую страницу. Время, которое требуется пользователю, чтобы просмотреть первые 25 результатов, вероятно, мы могли бы загрузить следующие 50, что означает, что у нас будет очень быстро выглядящий интерфейс со всеми результатами.

Теперь у этого есть определенные недостатки: - пользователь не может сразу перейти к «Последнему» - пользователь не может сразу отсортировать таблицу (или, если он это сделает, он может сразу получить таблицу, которая не отсортирована правильно)

Тем не менее, я думаю, что это интересная идея, и я хотел бы попробовать ее ... но я не знаю, с чего начать.

Как заставить функцию ajax продолжать работать, пока не произойдет определенный результат? Можете ли вы добавить результаты в таблицу, и эта таблица будет постоянно изменяться, не давая пользователю плохой интерфейс?

Answer 1

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

В базовой таблице пейджинга AJAX, которая отображает 25 результатов на страницу, вы бы захватили первую страницу при загрузке страницы, а когда ваш пользователь нажмет на ссылку 2 страницы, захват 26-50, страница 3 = 51-75 и т. Если вы хотите быть немного умнее и сделать приложение немного более умным, вы бы захватили следующий набор, пока они смотрят на текущий набор.

function get_results(start_record) {
    $.get("results.php", function(data) {
         // do something with the data
    });
}

События

// Page load

$(document).ready(function() {
get_results(0); //page 1
get_results(25); // page 2
});


// When user clicks second page link, results appear instantly, meanwhile...
get_results(50); // 3rd page data

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

Кроме того, если вам не нужны данные, удалите имя_переменной , чтобы освободить память.

Answer 2

Похоже, что оба предоставленных решения будут запускать один вызов ajax для каждых 25 результатов.Так что, если есть 10000 записей, это будет означать 400 вызовов ajax ... на загрузку страницы!Этот тип игнорирует цель вызова ajax.

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

Answer 3

Не можете ли вы поставить обратный вызов? (Псевдокод)

var keepCalling = function(){ $.getJSON(url,function(data){
    if(data.last){
      //Finish
    } else {
     sleep(5);
     keepCalling();
  })
};

Answer 4

Вы можете использовать обратный вызов, а затем в возвращаемых данных просто есть флаг, который говорит, является ли это последний набор данных. Тем не менее, здесь есть некоторые недостатки, которые вы хотите рассмотреть. Хранение информации в JavaScript не является бесплатным. Так что, если вы храните 10000 результатов, это будет вам чего-то стоить. Сколько будет зависеть от размера записи. Другая проблема, с которой вы можете столкнуться, заключается в том, что если пользователь попытается сделать что-то еще, пока ваш цикл обрабатывает ответ нескольких записей, он заметит задержку, потому что JavaScript является однопоточным. Поэтому возможно, что, пытаясь сделать вашу страницу более быстрой, вы на самом деле сделаете ее медленнее. Наконец, имейте в виду, что вы будете делать много запросов AJAX, которые никогда не будут использоваться, поэтому вы будете загружать серверы ненужной нагрузкой.

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

Извините, что играю здесь адвоката дьявола, просто помните некоторые вещи.

Answer 5

JQuery предоставляет обратные вызовы для $.post, $.get и $.ajax.Таким образом, вы можете написать функцию для обработки ввода и продолжать передавать функцию в качестве функции обратного вызова, пока наборы результатов не будут полностью загружены.

Если пользователь попытается отсортировать таблицу или перейти вниз по списку результатов,Таблицу нужно будет сбросить, а следующий обратный вызов должен будет обнаружить изменение сортировки / подкачки и отправить эти переменные на сервер.

Примерно так:

var page_number= 1;
var sort_by= 'column_name';
var sort_direction= 'asc';

function handle_result(data) {
  // Do something with the result/return data from the POST
  ....
  // $.post again . . . when there are more rows
  if (data.has_more_rows) {
    page_number++;
    $.post('process.php', { page_number: page_number, sort_by: sort_by, sort_direction: sort_direction }, handle_result);
  }
}

// The initial post . . .
$.post('process.php', { page_number: page_number, sort_by: sort_by, sort_direction: sort_direction }, handle_result);