sábado, 20 de septiembre de 2008

Como añadir 'Cargando' (loading) a AJAX

Retomando el post anterior "Cargar páginas con AJAX y PHP", haremos que al momento de darle mandar llamar la página a cargar dentro del DIV, aparezca una imagen de "Cargando (loading)" como indicador que esta próximo en mostrar el contenido de la página que se mando llamar.
Pasos a seguir:
  1. A la función Enviar, compararemos los estados del ReadyState, estos son:
    0 = uninitialized
    1 = loading
    2 = loaded
    3 = interactive
    4 = completese
    Si se encuentra en loading enviará como HTML, un mensaje de "Aguarde por favor.." y además una GIF animado.

    function Enviar(_pagina,capa) {
    var
    ajax;
    ajax = ajaxFunction();

    ajax.open("POST", _pagina, true);

    ajax.setRequestHeader("Content-Type",
    "application/x-www-form-urlencoded");
    ajax.onreadystatechange = function()
    {

    if (ajax.readyState==1){
    document.getElementById(capa).innerHTML =
    }

    if (ajax.readyState == 4)
    {
    document.getElementById(capa).innerHTML =
    ajax.responseText;
    }}
    ajax.send(null);
    }
  2. Si notan, en el textarea, estoy enviando un GIF, llamado loading, es el clasico GIF animado de AJAX, el cual lo pueden bajar en AJAXLOAD, una página dedicada a la creación de imagenes para AJAX. Lo copian y lo pegan en el directorio que pongan en la función Enviar, en mi caso fue en /img, pero pueden cambiarlo.
  3. Por último, añadiran el siguiente código, debajo del DIV en donde se esta cargando las páginas con AJAX.

7 comentarios:

Anónimo dijo...

Simplemente comentar que donde pone

"< img src="img/loading.gif...";

debería estar englobado con comillas simples

Anónimo dijo...

Resulta todo sin problemas, salvo lo de la imagen, no logro hacer que aparezca la imagen del loading, que debo hacer?

Héctor Guedea dijo...

Hola,
Recuerda que yo le puse la ruta > img/nombreimagen.gif, tienes bien escrita la ruta a tu imagen?, esta en la misma carpeta?,

Un saludo

Anónimo dijo...

Aka encontre Otro ejemplo

http://sam-jp.blogspot.com/

G dijo...

Hola, el codigo me daba error al aplicarlo al sitio que estoy desarrollando, por lo que suplante las comillas dobles con las simples (donde se especifica la ruta de la imagen y el texto que va a aparecer) y elimine las simples de la propiedad align (de la imagen) y dio resultado.

Muy bueno el ejemplo.
Saludos.

Anónimo dijo...

Hola amigos...

Tengo el codigo siguiente...

function ajaxFunction() {
var xmlHttp;

try {

xmlHttp=new XMLHttpRequest();
return xmlHttp;
} catch (e) {

try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
return xmlHttp;
} catch (e) {

try {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
return xmlHttp;
} catch (e) {
alert("Tu navegador no soporta AJAX!");
return false;
}}}
}




function Enviar(capa) {
var
ajax;
ajax = ajaxFunction();

ajax.open("POST", true);

ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

ajax.onreadystatechange = function()
{
if (ajax.readyState==1){
document.getElementById(capa).innerHTML='(<)img src="http://misitio.com/ajax/loader.gif"(>)';
}
if (ajax.readyState == 4) {

document.getElementById(capa).innerHTML="http://www.micodigo.com/bf058ad365f61587f08fd32512813372bf058ad365f61587f0/3/3/";
}}

ajax.send(null);
}

eso en la funcion js... y en el div que va dentro del cuerpo del HTML tengo esto...

(<)div id="contenido"(>)

(<)img src="javascript:Enviar('contenido')"(>)

(<)/div(>)

Lo que quiero hacer amigos... es que este contador de visitas que cito en la funcion en

readyState == 4

el link del contador es

http://www.micodigo.com/bf058ad365f61587f08fd32512813372bf058ad365f61587f0/3/3/

para poder ayudarnos mejor con la explicacion... este contador de visitas genera un gif automatico en cada visita... entonces lo que quiero hacer es...

que mientras se carga el gif de este link EXTERNO que funciona como contador de visitas, se visualice el clasico gif animado de en proceso...

Se que estoy cerca pero me faltan unos detallitos... Gracias por su apoyo...

beata dijo...

Hola, he aplicado a Ajax el icono de loading y funciona a la perfección, poniendo simples comillas....ahora tengo otra duda, pues me sale el loading en la parte superior izquierda del div content y no hace caso al align="center", de que manera lo puedo agregar a mis estilos css para personalizarlo???

un saludo y graciaaaaassss