¿Hay eventos de actualización de progreso en jQuery ajax?

Question

Tengo una tarea de larga ejecución que se llama usando jquery ajax. Estoy usando el block ui plugin to show "cargando". de todos modos, puedo enviar mensajes de progreso al cliente para mostrar el progreso y tenerlo actualizado en el mensaje del plugin ui plugin.

Esto lo mostrará (mientras el servidor hace su trabajo). .

"Carga de primera fuente..."
"Carga segunda fuente..."
"Carga tercera fuente..."
"Resultados de análisis..."

Answer 1

Por lo que Ya se ha visto en el caso de cargar cosas: las personas crean una puerta de enlace independiente y la consultan para obtener información sobre el progreso, ya que solo está disponible en el servidor. Pero creo que no es lo mejor en tu caso.

Si desea cargar material con información de progreso o permitir que el servidor muestre información sobre el progreso mientras genera resultados, entonces http streaming es lo que desea. Está bien cubierto here. Básicamente se trata de una única solicitud http, a la que el servidor responde en fragmentos durante aproximadamente un minuto (por lo tanto, envía cosas cuando lo desea) y luego se abre una nueva conexión.

Esto fue todo un descubrimiento para mí;)

[editar]

Actualmente hay un montón de mejores técnicas disponible, y todos ellos están envueltos en Socket.IO - websockets con retrocesos a otras técnicas que incluyen http streaming

Socket.IO es un módulo para nodeJS, pero hay otras implementaciones similares. Ya he intercambiado algunos paquetes con la implementación JAVA Socket.IO desde https://github.com/Atmosphere/atmosphere

Answer 2

Recientemente me di cuenta de un proyecto que hace ajax "push". Es posible que desee comprobar que funciona:

http://www.ape-project.org/

Por lo que yo sé que hay algunos otros proyectos por ahí haciendo cosas similares, este es el más verdadero que: "enviar mensajes de progreso de vuelta al cliente", donde la otra solución requiere una solicitud para sondear el progreso (sigue siendo una solución muy legítima y buena).

Answer 3

Me gustaría que cada petición AJAX devuelve una respuesta JSON que contiene un mensaje, los datos, y la siguiente URL para la solicitud: {message: "Loading second resource...", data: ..., next_url: "/next_part"}

Antes de su primera petición AJAX, configurar el mensaje BlockUI a "Cargando ..." . Cuando obtenga la respuesta, configure el mensaje BlockUI en el mensaje que recibe de su llamada AJAX. Luego realice la próxima llamada AJAX al valor de "next_url", y así sucesivamente, hasta que complete todas las tareas.

Si está cargando un gran conjunto de datos, pero en trozos, es posible que desee hacer algo como un progressive loading design pattern, pero también establecer un mensaje de progreso a medida que obtiene cada respuesta.

Answer 4

Una forma es usar los controladores HTTP y AJAX con jQuery.

1. Iniciar petición del lado del servidor

$("#btnCreateInvoice").click(function() {    
     $.ajax({ type: "POST", url: "YourHttpHandler.ashx", 
     contentType: "text/html; charset=utf-8", 
     dataType: "html", 
     success: function(data) { start the block UI } 
     }); 
    }); 

2. Sondeo

Lo siguiente que hay que hacer es consultar al servidor a intervalos 't' y obtener el estado. Para eso tenemos que llamar a una función en el intervalo 't' que iniciaría una llamada AJAX a un HTTPHandler para obtener el estado.

$(function() { 
    setInterval(updateStatus, 't'); 
}); 

function updateStatus() { 
    $.ajax({ type: "POST", url: "GetStatusHandler.ashx", 
     contentType: "text/html; charset=utf-8", 
     dataType: "html", 
     success: function(data) { process 'data' here and update the block UI message box } 
     }); 
} 

En el caso aquí, el GetStatusHandler.ashx puede devolver el innerHtml completa para el estado. Por ejemplo, en el primer llamarlo volverá 'Cargando Primera fuente ...', entonces podría volver:
Loding Primera fuente ...
Cargando segunda fuente ...
y así sucesivamente.

Answer 5

Lo que estás tratando de hacer es algo similar a Comet. Los servidores web tradicionales ("no cometarios") no están diseñados para este tipo de modelo de transacción y, por lo tanto, no son una solución deseada.

Mi sugerencia es para romper el procesamiento de una solicitud de un cliente por cada fuente de datos:

function loadData() { 
    // Each call passes callback(id) as a success handler 
    fireAsynchronousRequest("source1"); 
    fireAsynchronousRequest("source2"); 
    fireAsynchronousRequest("source3"); 
} 

function callback(var source) { 
    if (source == "source1") { 
     updateStatus("Source 1 loaded"); 
    } 
    else if (source == "source2") { 
     updateStatus("Source 2 loaded"); 
    } 
} 

Este es un ejemplo de una solución asincrónica. Puede implementar la gestión de estado en callback() si necesita que sea sincrónico.

Answer 6

Bueno, tuve una situación similar y la resuelvo con otro enfoque. Es un trabajo MUY feo, lo sé, así que no empieces a decir lo malo que es, porque lo sé, pero estuvo bien para lo que necesito.

Estoy poniendo el progreso en un archivo, en el lado del servidor. Por ejemplo, tengo process.php llamado que necesita mucho trabajo y lleva un tiempo hasta que se completa, por lo que el usuario se pone nervioso y cierra el navegador (no demasiado bien). Así que process.php está guardando algunos resultados en un archivo en el servidor. En la página que llamó a process.php tengo un pequeño div, span, o lo que sea donde quiero mostrar el progreso, pero sugiero div. Cada X milisegundos, o segundos, cargo otro guión desde el servidor en el div, digamos display_info.php Ahora display_info.php está leyendo el archivo que fue superado por process.php y el contenido está diplayed en el div.

Debe tener cuidado de que la salida de process.php tenga que ser única para cada ocasión, de lo contrario, se arruinará la salida de información de los navegadores.

Emil