Forzando el contenido de la página para cambiar a través de Javascript

Me gustaría mostrar algún progreso visual a un usuario durante una solicitud ajax. Por ejemplo, cuando hace clic en un botón ‘procesar’ que realiza una solicitud AJAX a un script del lado del servidor, verá un mensaje ‘cargando …’ y un gráfico, pero también quiero mostrarle algo de progreso en cuanto al procesamiento. hecho. Ej. 5/10 processed, 6/10 processed... y así sucesivamente.

¿Hay alguna forma de hacer esto?

Sí, hay, pero es un poco complicado. La única forma que encontré es usando un iframe en el cliente y response.writeing en el servidor para enviar bloques de javascript al cliente, que javascript llama a la ventana principal para procesar los mensajes de estado.

Aquí hay un código de ejemplo. Puede haber problemas con esto, lo estoy eliminando de una aplicación mucho más grande.

html:

  

javascript:

 //This one will be called from the HTML the javascript is streaming back function updateStatus(message) { $('#status').html(message); } $('#doStuff').click(function(event) { event.preventDefault(); var url="your.page.html"; $('#iframeHolder').html(''); } 

del lado del servidor (esto es vb asp.net, pero debería poder hacerlo en el idioma de su elección):

 dim message as string = "hello world" dim script = String.Format("",message) Response.Write(script) Response.Flush() 

Algunas observaciones

  • Querystring será tu amigo aquí. No estoy seguro de si se puede devolver a un iframe mediante progtwigción
  • Es probable que tenga que agregar basura en la cadena de consulta, de lo contrario el navegador probablemente almacenará en caché el contenido. Será muy, muy rápido, pero equivocado 🙂
  • Es posible que tengas que enviar “algunos” html antes de que el navegador comience a procesar el iframe. Descubrí que enviar un comentario HTML de aproximadamente 1k de basura ayuda
  • Para evitar problemas de actualización en FF y problemas de “carga permanente” en chrome y safari, establezca src de iframe en aproximadamente: en blanco una vez que haya terminado ( $('#iframeHolder iframe').attr('src','about:blank') )
  • La barra de progreso de la interfaz de usuario de jQuery parece bastante elegante para mostrar el porcentaje procesado

Espero que ayude. Me arranqué la cabeza con esto hace un par de meses 🙂

No sé cuál es realmente el proceso del lado del servidor, pero ¿tendría algún sentido dividirlo en una serie de llamadas Ajax, cada una de las cuales forma parte del proceso? Entonces podrías incrementar la visualización en cada paso.

Ejemplo de jQuery + PHP de implementación de la barra de progreso, sondeo del lado del servidor para los porcentajes restantes. haga clic aquí

En Safari 4 y Firefox 3.5, puede determinar el progreso de un XMLHttpRequest siguiente manera:

 var url = "[URL to file]"; var request = new XMLHttpRequest(); request.onprogress = function(e) { if (e.lengthComputable) { var percentComplete = (e.loaded / e.total) * 100; console.log("Progress: " + percentComplete + "%"); } else { // Code to execute when we can't get the progress } }; request.open("GET", url, true); request.send(""); 

Para obtener más información, consulte esta página en la Red de desarrolladores de Mozilla