Me preguntaba si sería posible utilizar la función ajax de jQuery para devolver continuamente un resultado a una página y actualizar en consecuencia.

Lo que quiero decir es esto: - El usuario dispara una búsqueda - jQuery usa la función ajax para obtener los primeros 25 resultados y los agrega a una tabla. - Mientras el usuario mira esa lista, jQuery sigue obteniendo resultados 25 a la vez y agregándolos a la tabla.

La idea detrás de esto es, digamos que su búsqueda de usuarios tiene 10,000 resultados. Me gustaría cargarlos en una tabla que tenga paginación controlada por Javascript para que no tengamos que volver al servidor cada vez que el usuario quiera pasar a la página siguiente. El tiempo que le toma a un usuario mirar los primeros 25 resultados, probablemente podríamos cargar los siguientes 50, lo que significa que tendremos una interfaz muy ágil con todos los resultados.

Ahora definitivamente hay algunas desventajas en esto: - el usuario no puede ir inmediatamente a "Último" - el usuario no puede ordenar la tabla de inmediato (o si lo hacen, podrían tener inmediatamente una tabla que no está ordenada correctamente)

Aún así, creo que esta es una idea interesante y me encantaría probarla ... pero no tengo idea de por dónde empezar.

¿Cómo hace que la función ajax continúe ejecutándose hasta que ocurre un cierto resultado? ¿Puede agregar los resultados a una tabla y hacer que esa tabla se cambie continuamente sin darle al usuario una mala experiencia de interfaz?

1
James P. Wright 15 dic. 2009 a las 06:43

5 respuestas

La mejor respuesta

JQuery proporciona devoluciones de llamada para $.post, $.get y $.ajax. Por lo tanto, puede escribir una función para manejar la entrada y seguir alimentando la función como devolución de llamada hasta que los conjuntos de resultados terminen de cargarse.

Si el usuario intenta ordenar la tabla o saltar hacia abajo en la lista de resultados, la tabla necesitaría restablecerse y la siguiente devolución de llamada necesitaría detectar el cambio de clasificación / paginación y enviar esas variables al servidor.

Algo como esto:

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);
0
leepowers 15 dic. 2009 a las 03:48

La mejor manera de hacer algo como esto es no obtener continuamente tantos resultados como sea posible, sino solo obtener lo que su usuario necesitará.

En una tabla de paginación AJAX básica que muestra 25 resultados por página, tomaría la primera página en la carga de la página, y cuando su usuario llegue al enlace de la página 2, tome 26-50, página 3 = 51-75, etc. quería ser un poco más inteligente y hacer que la aplicación sea un poco más ágil, tomarías el siguiente conjunto mientras miran el conjunto actual.

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

Eventos:

// 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

Si realmente quisieras, podrías tomar 100 a la vez. Sin embargo, como otros han mencionado, tenga cuidado con lo que está tirando por trozo, agarrar demasiado puede anular el propósito de usar AJAX.

Además, si no va a necesitar datos, elimine variable_name para liberar algo de memoria.

0
Derek Gathright 15 dic. 2009 a las 04:24

Parece que ambas soluciones proporcionadas dispararán una llamada ajax por cada 25 resultados. Entonces, si hay 10,000 registros, eso significaría 400 llamadas ajax ... ¡por carga de página! Este tipo de derrota el propósito de la llamada ajax.

Una mejor solución podría ser cargar suficientes datos para una página después de la página actual. Una vez que el usuario accede a la última página cargada, vuelva a cargar otro lote de datos. Siempre quedando una página por delante del usuario.

0
czarchaic 15 dic. 2009 a las 04:16

Puede usar una devolución de llamada y luego, en los datos devueltos, solo tiene un indicador que dice si es o no el último conjunto de datos. Sin embargo, hay algunas desventajas aquí que querrás considerar. Almacenar información en JavaScript no es gratis. Entonces, si está almacenando 10,000 resultados, eso le costará algo. Cuánto dependerá del tamaño de un registro. El otro problema con el que puede encontrarse es que si el usuario intenta hacer otra cosa mientras su ciclo analiza la respuesta de algunos registros, notará un retraso porque JavaScript tiene un solo subproceso. Por lo tanto, es posible que al intentar hacer que su página sea más ágil, en realidad la hará más lenta. Finalmente, tenga en cuenta que hará muchas solicitudes AJAX que nunca se usarán, por lo que colocará una carga innecesaria en sus servidores.

Por lo general, el compromiso que la gente hace es precargar y almacenar en caché solo algunos de los datos, no todos. Por lo tanto, sugeriría cargar previamente tal vez la siguiente página o dos y luego almacenar en caché algunas de las páginas, por lo que si el usuario realiza una copia de seguridad, eso es rápido. El YUI datasource es un buen código que maneja algunas de estas complejidades.

Lamento jugar al abogado del diablo aquí, solo algunas cosas a tener en cuenta.

0
Bialecki 15 dic. 2009 a las 04:08

¿No puedes poner una devolución de llamada? (pseudocódigo)

var keepCalling = function(){ $.getJSON(url,function(data){
    if(data.last){
      //Finish
    } else {
     sleep(5);
     keepCalling();
  })
};
0
eipipuz 15 dic. 2009 a las 03:51