Barra de progreso mediante Ajax

Una de las necesidades con las que nos encontramos a la hora de realizar procesos largos en la web, es indicar al usuario que le toca esperar. A veces es bastante complicado realizar una barra de progreso que indice el estado actual del proceso que estamos ejecutando.

Una forma de realizarlo es usando Ajax. Realizamos una llamada Ajax que ejecuta la acción, y cuando el objeto Ajax tiene el estado LOADING (readyState == 3), podemos obtener la respuesta del script llamado y parsearlo para mostrar el porcentaje de acción que se ha realizado.

Para ello, estoy pensando en que un script (res.php por ejemplo) devuelva el porcentaje que lleva seguido de un guión. Por ejemplo, cuando pasa por el 1% habrá devuelto “1-” cuando lleve el 5% habrá devuelto “1-2-3-4-5-“. Parseando esto podemos saber por el último número cuanto lleva ejecutado.

El PHP sería el siguiente:

  1. for($i=0; $i<10000000; $i++) {
  2. if ($i%10000 == 0) echo ((int) $i/100000).'-';
  3. flush();
  4. }

Y el javascript sería así:

  1. function ajaxobj() {
  2. try {
  3. _ajaxobj = new ActiveXObject("Msxml2.XMLHTTP");
  4. } catch (e) {
  5. try {
  6. _ajaxobj = new ActiveXObject("Microsoft.XMLHTTP");
  7. } catch (E) {
  8. _ajaxobj = false;
  9. }
  10. }
  11. if (!_ajaxobj && typeof XMLHttpRequest!='undefined') {
  12. _ajaxobj = new XMLHttpRequest();
  13. }
  14. return _ajaxobj;
  15. }
  16. function prueba () {
  17. ajax = ajaxobj();
  18. ajax.open("GET", "res.php", true);
  19. ajax.onreadystatechange=function() {
  20. if (ajax.readyState == 3) {
  21. // Mostramos porcentaje
  22. var res = ajax.responseText;
  23. res = res.split('-');
  24. alert(res[res.length-2]);
  25. } else if (ajax.readyState == 4) {
  26. // Fin
  27. alert('FIN');
  28. }
  29. }
  30. // Enviamos algo para que funcione el proceso
  31. ajax.send(null);
  32. }

Como no hay nada perfecto, y menos aún Internet Explorer, sólo he sido capaz hacer que funcione en FF, Opera, Safari y Chrome.

Fuente: sentidoweb.com

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: