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:
- A la función Enviar, compararemos los estados del ReadyState, estos son:
0 = uninitialized
Si se encuentra en loading enviará como HTML, un mensaje de "Aguarde por favor.." y además una GIF animado.
1 = loading
2 = loaded
3 = interactive
4 = completesefunction 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);
} - 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.
- Por último, añadiran el siguiente código, debajo del DIV en donde se esta cargando las páginas con AJAX.
7 comentarios:
Simplemente comentar que donde pone
"< img src="img/loading.gif...";
debería estar englobado con comillas simples
Resulta todo sin problemas, salvo lo de la imagen, no logro hacer que aparezca la imagen del loading, que debo hacer?
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
Aka encontre Otro ejemplo
http://sam-jp.blogspot.com/
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.
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...
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
Publicar un comentario