Comunidad PHPeros
Lenguajes => JavaScript => AJAX => Mensaje iniciado por: Mixvice en 09 de Marzo de 2010, 21:44:13 pm
-
Bnaz!, aver si me pueden ayudar xD En mi web agrege un poco de ajax, pille el código que dejo Judoka en un post anterior, (judoka te mande +K).
Como sea lo que intento hacer es que me salga una imagen o algun texto que diga "Cargando" antes de que muestre el contenido, como podria ser?
Espero puedan ayudarme, un saludo y gracias de antemano ;)
-
En el código habrá una parte que diga algo como "if(ajax.readyState == 2) { ACCION", debes añadir un else a ese if y en él poner lo que quieras que ocurra
-
Será en este? :
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
-
tenías que pasa todo, pero bueno..
dentro de la funcion
xmlhttp.onreadystatechange=function()
{
}debes poner el readystate correspondiente a lo que quieres (la informacion se está procesando)
El número 3 indica que la información se está procesando.. así que dentro de la función que te he dicho debes poner
if(xmlttp.readyState == 3) {
// aqui mostramos la imagen de cargando
}
Ahora, como mostramos la imagen que se está cargando? Pues debemos tener un div (<div> </div>) llamado de cierto modo, ejemplo <div id ='cargando'></div> entonces dentro del if del readyState ponemos..
document.getElementById('cargando').innerHTML = 'imagen.gif';
Analizemos éste último código por partes..
document.getElementById coge en el documento, el elemento que tenga el id igual al que el programador pone entre las parentesis.
innerHTML cambia el contenido del elemento seleccionado en la misma web.
Atención: puede que a la variable xmlhttp (que debería contener el objeto del xml) le hayan puesto otro nombre, busca el nombre correcto y remplazalo en el código si es necesario.
Creo que se hace así, no lo he probado así que puede que me equivoque, corríjanme por favor :)
-
Bueno me ganarón mara y west, básicamente es lo que dicen ello más arriba, primero haces el objeto xml y luego verificar que readyState sea igual a 3.
-
Disculpen por revivir tema pero no logre aclarar mi duda =/, no encotre la funcion que me dijeron aver si pueden ayudarme a localizarla..
var bustcachevar=1 //bust potential caching of external pages after initial request? (1=yes, 0=no)
var loadedobjects=""
var rootdomain="http://"+window.location.hostname
var bustcacheparameter=""
function ajaxpage(url, containerid){
var page_request = false
if (window.XMLHttpRequest) // if Mozilla, Safari etc
page_request = new XMLHttpRequest()
else if (window.ActiveXObject){ // if IE
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else
return false
page_request.onreadystatechange=function(){
loadpage(page_request, containerid)
}
if (bustcachevar) //if bust caching of external page
bustcacheparameter=(url.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', url+bustcacheparameter, true)
page_request.send(null)
}
function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText
}
function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}
Un saludo
-
Simplemente ponle en el innerHTML del contenedor donde se cargará la página el texto que quieres que muestre mientras se carga el archivo, una vez cargado el archivo, el texto se quitará automáticamente para dar lugar a lo que se cargó por AJAX ;)
Saludos ^^
-
function loadpage(page_request, containerid){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1))
document.getElementById(containerid).innerHTML=page_request.responseText || document.getElementById('cargando').innerHTML = 'imagen.gif';
}
function loadobjs(){
if (!document.getElementById)
return
for (i=0; i<arguments.length; i++){
var file=arguments
var fileref=""
if (loadedobjects.indexOf(file)==-1){ //Check to see if this object has not already been added to page before proceeding
if (file.indexOf(".js")!=-1){ //If object is a js file
fileref=document.createElement('script')
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src", file);
}
else if (file.indexOf(".css")!=-1){ //If object is a css file
fileref=document.createElement("link")
fileref.setAttribute("rel", "stylesheet");
fileref.setAttribute("type", "text/css");
fileref.setAttribute("href", file);
}
}
if (fileref!=""){
document.getElementsByTagName("head").item(0).appendChild(fileref)
loadedobjects+=file+" " //Remember this object as being already added to page
}
}
}
Seria así? :S ando perdido.. es mi primera vez con js xD!