Recargar consulta cada tres segundos

[Usa_Firefox]

¡Hola!

Tengo un chat.... y un iframe a un script php que saca los mensajes recibidos.

Puse un iframe para evitar tener que recargar toda la página.

Este iframe se recarga cada tres segundos... y quiero evitar que se note en el chat.

Es decir... que se recargue el chat.php... sin notarse que se está cargando el iframe, ya que es muy muy molesto.

¿Cómo puedo hacer si no para recargar la consulta sql que hace renovar los mensajes enviados?...

El chat en beta es este...

Saludos!

[jaao_death]

Lo que quieres es bastante complicado, pero si te empeñas averigua todo lo que puedas sobre AJAX, o intenta hacer el chat en otro lenguaje como Flash y ActionScript, o JAVA.

Eso sí, por que cambies de lenguaje eso no quiere decir que diseñar un chat es fácil.

[Usa_Firefox]

Jmmm.... gracias, pero a mi me interesa hacerlo con ajax.

Solo hacer que cada 3 segundos, la función de php vermensajes()... se recargue sin recargar la página...

¿Qué hay que hacer en ajax para eso?

¿Hay algún script ya hecho?

[SetheR]

Debes hacer en una funcion ajax que llame al archivo php que llama a esa funcion:
más o menos, para que te hagas una idea (y partiendo de la base de que no sabes nada de ajax):

Creamos un objeto Ajax:

Código PHP:

  function crearObjeto() {
    var req = null;
    var acv = ["MSXML2.XMLHttp.5.0","MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp","Microsoft.XMLHttp"];
    if(window.XMLHttpRequest) {
        req = new XMLHttpRequest();    
    }
    else if(window.ActiveXObject) {
        for (var i = 0; i < acv.length; i++) {
            try {
                var actx = new ActiveXObject(acv[i]);
                req = actx;
            }catch (error) {}
        }
    }
    else {
        alert('Error fatal. Tu ordenador va a explotar');    
    }
    return req;
}  
   

Y creamos la funcion que llama a tu querida funcion (si sólo quieres que se ejecute esa function, métela aislada en un archivo php. Hasta dónde yo se (novato), no se puede llamar a una funcion específica sin usar frameworks en plan XAJAX)

No se si le debes pasar argumentos o no. Presupongo que no.

Código PHP:

  function getMensajes() {
    peticion = crearObjeto();
    peticion.open('GET', 'ver_mensajes.php', true);
    peticion.onreadystatechange = function() {
    if(peticion.readyState == 1){
        document.getElementById('divdondetieneslosmensajes').innerHTML = "Cargando comentarios...";
    }
    else if(peticion.readyState == 4) {
        if(peticion.status == 200) {
            document.getElementById('divdondetieneslosmensajes').innerHTML = peticion.responseText;
                    }
                }
    peticion.send(null);
}  
   

Datos: divdondetieneslosmensajes -> no hace falta explicar...
ver_mensajes.php -> archivo donde está la función vermensajes(). Recuerda que debe "escribir" algo, pues lo que hace la funcion es mas o menos meter en el div lo que te hace dicha funcion php.

Para hacerlo cada tres segundos, una sencilla línea que llamas al principio:

Código HTML:

setInterval("getMensajes()",300);

Repasa bien los corchetes, pues puede que me haya comido alguno.. Un saludo

[GatorV]

Tema trasladado desde PHP

[Usa_Firefox]

Muchas gracias

Pero es que no funciona...

Esto es lo que hay entre body y /body... (antes hay un estilo css y todo el rollo de metas y eso )

Código javascript:

<script language="javascript">
function messageon(i){
document.getElementById('messagewrap_' + i).className="messagedivon";
}
 
function messageoff(i,par){
   if(par=="yes"){
   document.getElementById('messagewrap_' + i).className="messagedivpar";
   }else{
   document.getElementById('messagewrap_' + i).className="messagediv";
   }
}
 
//Para los mensajes
function crearObjeto() {
    var req = null;
    var acv = ["MSXML2.XMLHttp.5.0","MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp","Microsoft.XMLHttp"];
    if(window.XMLHttpRequest) {
        req = new XMLHttpRequest();    
    }
    else if(window.ActiveXObject) {
        for (var i = 0; i < acv.length; i++) {
            try {
                var actx = new ActiveXObject(acv[i]);
                req = actx;
            }catch (error) {}
        }
    }
    else {
        alert('Tu navegador no soporta ajax... Bájate uno nuevo');    
    }
    return req;
}  
</script>
<title>CHAT beta</title></head>
<body style="width:700px;" onLoad='setInterval("getMensajes()",300);'>
 
 
<script language="javascript">
function getMensajes() {
    peticion = crearObjeto();
    peticion.open('GET', 'mensajes.php', true);
    peticion.onreadystatechange = function() {
    if(peticion.readyState == 1){
        document.getElementById('mensajesajax').innerHTML = "Cargando mensajes...";
    }
    else if(peticion.readyState == 4) {
        if(peticion.status == 200) {
            document.getElementById('mensajesajax').innerHTML = peticion.responseText;
                    }
                }
    peticion.send(null);
}
</script>
 
<div id="mensajesajax"></div>
 

Saludos!

Pd:. Hay un fichero en la misma carpeta que es este (mensajes.php)

Por cierto: Cuando lo consiga recuerda que tengo que darle Karma a sether y al que termine de ayudarme

[SetheR]

No te funciona porque no estás usando divs, si no iframes. Con iframes es muy facil hacer la recarga. En este caso debería poner un meta refresh cada 3 seg en el archivo textarea.php
Para hacerlo con Ajax deberías cambiar bastantes cosas.

Ésta es tu estructura (mas o menos, corrigeme si me equivoco):

Iframe id="sendform"(que porcierto, id repetida. >.<) que contiene-> textarea.php -> con un include a -> mensajes.php.

Cambia ésto:

Código HTML:

<iframe id="sendform" frameborder="0" width="720" height="400" src="./textarea.php" scrolling="no">
<!-- Contenido para navegadores que NO soportan los Iframes -->
Este navegador es demasiado antiguo.

</iframe> 

por algo así:

Código HTML:

<div id="mensajesajax"></div> 

luego en los scripts del head:

Código HTML:

window.onload=init;
function init(){
getMensajes();
}

EDIT:
1.Recuerda que mensajes.php debe llamar a la funcion, no sólo definirla
2.No revisaste los corchetes..xD falta uno delante de ->peticion.send(null);
3.No veo el set interval en ningún sitio de tus scripts
4.Los scripts es recomendable ponerlos en el head...

Si quieres mantener tu "estilo", debes hacer que mensajes.php también printe las clases css, recuerdalo eh!

[Usa_Firefox]

Jmm... Gracias de nuevo.

Mira la estructura es esta:

--Chat.php

Contiene:

a) --Iframe textarea (mensajes enviados)

Contiene --- Include a la mensajes.php

b) --Iframe sendform (Enviar mensaje)

Esto está en el iframe textarea.php

Código javascript:

<html>
<head>
<style type="text/css">
 //CSS QUITADO PARA EVITAR TANTO ESPACIO
</style>
 
<script language="javascript">
function messageon(i){
document.getElementById('messagewrap_' + i).className="messagedivon";
}
 
function messageoff(i,par){
   if(par=="yes"){
   document.getElementById('messagewrap_' + i).className="messagedivpar";
   }else{
   document.getElementById('messagewrap_' + i).className="messagediv";
   }
}
 
//Para los mensajes
function crearObjeto() {
    var req = null;
    var acv = ["MSXML2.XMLHttp.5.0","MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp","Microsoft.XMLHttp"];
    if(window.XMLHttpRequest) {
        req = new XMLHttpRequest();    
    }
    else if(window.ActiveXObject) {
        for (var i = 0; i < acv.length; i++) {
            try {
                var actx = new ActiveXObject(acv[i]);
                req = actx;
            }catch (error) {}
        }
    }
    else {
        alert('Tu navegador no soporta ajax... Bájate uno nuevo');    
    }
    return req;
}  
 
//Ver los mensajes
function getMensajes() {
    peticion = crearObjeto();
    peticion.open('GET', 'mensajes.php', true);
    peticion.onreadystatechange = function() {
    if(peticion.readyState == 1){
        document.getElementById('mensajesajax').innerHTML = "Cargando mensajes...";
    }
    else if(peticion.readyState == 4) {
        if(peticion.status == 200) {
            document.getElementById('mensajesajax').innerHTML = peticion.responseText;
                    }
                }
    peticion.send(null);
}
 
//ONLOAD
window.onload=init;
function init(){
getMensajes();
}
</script>
<title>CHAT beta</title></head>
<body style="width:700px;">
<div id="mensajesajax"></div>
</body>
</html>
 

Bueno saludos

Pd:. Porbé el refresh de 3 segundos... pero hace que la página del chat parpadée cada vez que se recarga el iframe y eso molesta

Saludos!

[SetheR]

Mira el edit de arriba (la hora es tan tarde porque vi tu mensaje cuando refresqué, que me había ido a cenar..):
Ahora ya veo cómo lo haces. Te falta llamar al setInterval, para que se ejecute la funcion de getter de los mensajes cada 3000 milisegundos.

[Usa_Firefox]

Muchas gracias Sether.. Ahora mismo te doy el Karma... auqnue hay unas cosas que te voy a poner...

-He quitado el if que decía "cargando mensajes...", porque hacía parpadear (sale el texto de cargando y de nuevo los mensajes). Ahora en vez de salir "cargando mensajes...", se quedan puestos los mensajes viejos, hasta que llegan los nuevos.

-El estilo no ha sido necesario ponerlo en el php, porque lo que hace es devolver un html, e insertarlo en el div ajaxmensajes.... y ahí ya coge los estilos.

Por lo demás muchísimas gracias

Ver el chat en beta (Faltan cosas, pero ya no parpadea)

Por cierto, he cambiado el título para que sea más accseible desde google cuando alguien lo busque

[SetheR]

De nada, me alegro de que te funcione.
Ahora, sólo te falta acabar con los iframes y hacerlo completamente en Ajax xD.

Busca por el foro cómo pasar datos POST por Ajax, es facil (es siempre lo mismo, muy mecánico), y te quedará un chat aun mas flexible.

PD:Lo del parpadeo no debería ocurrir, ya que solo lo muestra cuando el readyState es 1..Comprueba las llaves, corchetes y demás cosas, que al escribirlo directamente aqui, me habré comido algo.

pd2:quita el setInterval la primera vez que llames al metodo (en el init), ya que si no, tarda 3 segundos en aparecer los mensajes.
haz algo así:

Código HTML:

window.onload=init;
function init(){
getMensajes();
setInterval("getMensajes()",3000);
}

Un saludo

[Usa_Firefox]

Gracias de nuevo .... por lo de los tres segundos.

El parpadeo ya está solucion ado también

Y... ahora me han pedido smilies... he creado un tema aquí sobre ello.

Última petición:

-Un manual ajax que no sea muy difícil de entender. (Yo sé algo de javascript), pero es que en todos los manuales dan por sabido el httprequest y el try catch de IE y eso, y me lío

Saludos!