consulta con ajax y php

edie8 · #1 (**permalink**) 02/02/2012, 08:18

Buenas tardes
No tengo mucha idea de ajax, queria saber lo siguiente puedo hacer que sin actualizar la web ni nada que me aga una consulta cada x tiempo a la base de datos??? gracias un saludo.

neisserian89 · #2 (**permalink**) 02/02/2012, 10:05

Hola edie8, si puedes, para ello te digo la forma que a mi parecer es más simple.
1.a Si esa consulta genera datos que quieres mostrar, crea un DIV, maquetalo donde quieras y pone un "ID", por ejemplo "divConsulta".
1.b Si esa consulta genera datos que NO quieres mostrar, crea un DIV, maquetalo donde quieras y pone un "ID", por ejemplo "divConsulta" Y ponte un display:none en css, width:0 height:0... en fin, cualquier cosa para ocultarlo
2. Descarga JQuery o enlazalo directamente desde tu página.

Código:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>

3. Ten una web que solo tenga el query a la BD y lo que quieras mostrar, llamala query.php
4. Haz un Interval a una funcion JQuery que se encargue cargar la pagina query.php en el DIV que has creado anteriormente.

Función:

Código:

<script>
setInterval(refrescada(),1000) // el 2do parametro es el tiempo en ms
function refrescada()
{
$("#divConsulta").load("query.php");
]
</script>

Lee acerca de ello, tiene mucho más juego, pudiendo romper el intervalo, empezar cuando quieras, etc.

Creo que en setInterval no es necesario el "()" de la función && La version de JQ que te enlace arriba esta muy obsoleta.

Saludos

edie8 · #3 (**permalink**) 02/02/2012, 11:20

gracias mirare mas sobre ello me sirvio de idea muchas gracias.

edie8 · #4 (**permalink**) 02/02/2012, 15:42

oye tengo una duda estoy probando lo que mas dixo y mira esto es lo que he hecho:
index.php

Código PHP:

  <html>
<head>
<title>Registro con AJAX</title>
<script language="JavaScript" type="text/javascript" src="jquery-1.7.1.min.js"></script>
<script>
setInterval(refrescada(),1000) // el 2do parametro es el tiempo en ms
function refrescada()
{
$("#divConsulta").load("query.php");
}
</script>
</head>
<body>

    
<div id="divConsulta"></div>
</body>
</html>

query.php

Código PHP:

  <?php
//Desarrollado por Jesus Liñán
//ribosomatic.com
//Puedes hacer lo que quieras con el código
//pero visita la web cuando te acuerdes

//Configuracion de la conexion a base de datos
$bd_host = "localhost"; 
$bd_usuario = "root"; 
$bd_password = ""; 
$bd_base = "pruebas"; 

$con = mysql_connect($bd_host, $bd_usuario, $bd_password); 

mysql_select_db($bd_base, $con); 

//consulta todos los empleados

$sql=mysql_query("SELECT * FROM amigos",$con);

//muestra los datos consultados
//haremos uso de tabla para tabular los resultados
?>
<table style="border:1px solid #FF0000; color:#000099;width:400px;">
<tr style="background:#99CCCC;">
    <td>id</td>
    <td>id_logueado</td>
    <td>id_amigo</td>
    <td>Estado</td>
</tr>

<?php
while($row = mysql_fetch_array($sql)){
    echo "    <tr>";
    echo "         <td>".$row['id']."</td>";
    echo "         <td>".$row['id_logueado']."</td>";
    echo "         <td>".$row['id_amigo']."</td>";
    echo "        <td>".$row['estado']."<td>";
    echo "    </tr>";
}
?>
</table>

nose si hago algo mal o nose pero no me sale nada en la pagina entonces como debo de hacer esto??? gracias un saludo.

caricatos · #5 (**permalink**) 02/02/2012, 16:35

Hola:

La verdad es que usar una librería para una consulta ajax tiene poco sentido... Tan solo se debe usar el objeto Ajax (XMLHttpRequest), y controlar que el resultado sea el correcto e insertar la respuesta donde quieras...

Si puedes evitar la dependencia de las librerías conseguirás un mejor control de lo que haces.

Saludos

neisserian89 · #6 (**permalink**) 03/02/2012, 01:47

Cita:

Iniciado por edie8

oye tengo una duda estoy probando lo que mas dixo y mira esto es lo que he hecho:
index.php

Código PHP:

  <html>

<head>

<title>Registro con AJAX</title>

<script language="JavaScript" type="text/javascript" src="jquery-1.7.1.min.js"></script>

<script>

setInterval(refrescada(),1000) // el 2do parametro es el tiempo en ms

function refrescada()

{

$("#divConsulta").load("query.php");

}

</script>

</head>

<body>

 
    

<div id="divConsulta"></div>

</body>

</html>

query.php

Código PHP:

  <?php

//Desarrollado por Jesus Liñán

//ribosomatic.com

//Puedes hacer lo que quieras con el código

//pero visita la web cuando te acuerdes

 
//Configuracion de la conexion a base de datos

$bd_host = "localhost"; 

$bd_usuario = "root"; 

$bd_password = ""; 

$bd_base = "pruebas"; 

 
$con = mysql_connect($bd_host, $bd_usuario, $bd_password); 

 
mysql_select_db($bd_base, $con); 

 
//consulta todos los empleados

 
$sql=mysql_query("SELECT * FROM amigos",$con);

 
//muestra los datos consultados

//haremos uso de tabla para tabular los resultados

?>

<table style="border:1px solid #FF0000; color:#000099;width:400px;">

<tr style="background:#99CCCC;">

    <td>id</td>

    <td>id_logueado</td>

    <td>id_amigo</td>

    <td>Estado</td>

</tr>

 
<?php

while($row = mysql_fetch_array($sql)){

    echo "    <tr>";

    echo "         <td>".$row['id']."</td>";

    echo "         <td>".$row['id_logueado']."</td>";

    echo "         <td>".$row['id_amigo']."</td>";

    echo "        <td>".$row['estado']."<td>";

    echo "    </tr>";

}

?>

</table>

nose si hago algo mal o nose pero no me sale nada en la pagina entonces como debo de hacer esto??? gracias un saludo.

Hola de nuevo, como te decía, no estaba seguro de si dentro del setInterval había que eliminar los "()" a la función en el primer parámetro, y ahora lo estoy, es por eso que te da error.

Y caricatos, creo que tiene menos sentido tu post (XMLHttpRequest, buscate la vida) que usar la librería . Edie8, lo que dice caricatos es que no uses JQuery, que básicamente lo que hace es eliminarte líneas de código en tus scripts a cambio de 31kb de código, además de esto, es muy amigable para el programador por que te facilita mucho las cosas con una sintaxis más entendible.. extra! si lo cargas desde la API de google no tomara ancho de banda de tu servidor!. De todas formas, el core de lo que te digo es JS puro, y el objeto que se usa en este caso es el que el menciona, si quieres aprender más, ahí tienes la info.

Saludos.

caricatos · #7 (**permalink**) 03/02/2012, 02:16

Hola:

Cita:

Iniciado por neisserian89

... Edie8, lo que dice caricatos es que no uses JQuery, que básicamente lo que hace es eliminarte líneas de código en tus scripts a cambio de 31kb de código, además de esto, es muy amigable para el programador por que te facilita mucho las cosas con una sintaxis más entendible.. extra! si lo cargas desde la API de google no tomara ancho de banda de tu servidor!. De todas formas, el core de lo que te digo es JS puro, y el objeto que se usa en este caso es el que el menciona, si quieres aprender más, ahí tienes la info.

Saludos.

¡Ja, ja!

... "Sintaxis más entendible"... sigo pensando que "$()" es un nombre de función más apropiado para un conversor de divisas que para un alias de "document.getElementById"... un poco extendido...

Y sobre líneas de código, usando el mismo "refrescada":

Código:

setInterval(refrescada,1000);
function refrescada()	{ 
	ajax = new XMLHttpRequest();
	ajax.open("get", "query.php", true);
	ajax.onreadystatechange = function() {
		if (ajax.readyState == 4)
			document.getElementById("divConsulta").innerHTML = ajax.responseText
	}
	ajax.send(null);
}

Unas pocas líneas que funcionan en todos los navegadores modernos frente a unos pocos Ks (dices que son 31Ks

), la mayoría de ellos "innecesarios"

...

Saludos

neisserian89 · #8 (**permalink**) 03/02/2012, 02:20

Cita:

Iniciado por caricatos

Hola:

¡Ja, ja!

... "Sintaxis más entendible"... sigo pensando que "$()" es un nombre de función más apropiado para un conversor de divisas que para un alias de "document.getElementById"... un poco extendido...

Y sobre líneas de código, usando el mismo "refrescada":

Código:

setInterval(refrescada,1000);
function refrescada()	{ 
	ajax = new XMLHttpRequest();
	ajax.open("get", "query.php", true);
	ajax.onreadystatechange = function() {
		if (ajax.readyState == 4)
			document.getElementById("divConsulta").innerHTML = ajax.responseText
	}
	ajax.send(null);
}

Unas pocas líneas que funcionan en todos los navegadores modernos frente a unos pocos Ks (dices que son 31Ks

), la mayoría de ellos "innecesarios"

...

Saludos

Código:

setInterval(function(){$("#div").load("jquery.php"},1000);

Acorta, quieras o no jajaja. PD: Almenos te hice poner código y currarte un poco el post :DD.

Saludos

caricatos · #9 (**permalink**) 03/02/2012, 02:41

Hola:

Cita:

Iniciado por neisserian89

Código:

setInterval(function(){$("#div").load("jquery.php"},1000);

Acorta, quieras o no jajaja. PD: Almenos te hice poner código y currarte un poco el post :DD.

Saludos

... Parece que no te fijaste en mi número de mensajes... y no tengo que currar mucho para poner ese tipo de código (ya bastante tengo con currarme mis páginas), y muchos de esos mensajes llevan código incluído.

A tú línea no te olvides de que también debe existir una línea que enlace a la librería. Y también podría poner mi código en una sola línea (aunque admito que sería más larga... o también podría crear una librería mucho más reducida (menos de 1K seguro).

Saludos

neisserian89 · #10 (**permalink**) 03/02/2012, 04:02

Cita:

Iniciado por caricatos

Hola:

... Parece que no te fijaste en mi número de mensajes... y no tengo que currar

Si ya lo ví, creo que los mensajes hay que currarselos sea cual sea tu número de mensajes, y te trataré como a un igual, dando mi opinión con respeto y evitando los "Ja,ja" en la medida de lo posible.

Cita:

Iniciado por caricatos

Y también podría poner mi código en una sola línea (aunque admito que sería más larga...

Bien, estamos de acuerdo entonces.

Me mantengo esperando noticias de si te ha funcionado, edie8. PD: Usa Mozilla Firefox con FIREBUG, te ayudará mucho con el desarrollo en JS.

Saludos, en especial a ti, compatriota malagueño (soy de Vélez-Málaga

) , no te tomes a mal mis mensajes.

edie8 · #11 (**permalink**) 03/02/2012, 04:35

Correcto era los () habia que quitarlos muchas gracias, he encontrado una web donde no usan jquery, lo hacen con funciones ajax como dice caricato asique como supongo que habra mas gente con el mismo problema que yo aqui la dejo:
http://vcomputadoras.com/usa-ajax-pa...ar-un-tag-div/
un saludo, y gracias.

edie8 · #12 (**permalink**) 03/02/2012, 07:16

Estoy probandolo pero no me funciona cuando lo incorporo a mi web mira este es el codigo
index.php

Código PHP:

  <?php include("header.php"); 

if (!isset($_SESSION['logueado_usuario'])) { 
    include ("login.php");  
echo "<a href='registro.php'>Registrarse</a>" ;} 
    else {  
    $nombre =$_SESSION['logueado_nombre']; 
    $id_usuario=$_SESSION['logueado_id']; 
?> 
 <script src="ajax.js"></script>
<?php
include("privados/config.php");
$registros=mysql_query("select * from usuarios WHERE id = '$id_usuario'", $conexion)or
  die("Problemas en el select:".mysql_error());
  while($reg=mysql_fetch_array($registros))
  {
  ?><div id="izquierda">
  <div class="nombre"><? echo $nombre; ?></div>
<div class="img_usuario"> <img src="<?php echo "".$reg['imagen']. "";?>" /></div> 
<div id="notificaciones"></div>
<div class="amigos_agregados"></div></div> 

<?php
  }
?>

 <div class="contenedor_muro"> 
¿Que estas pensando? 
     <form name="form" method="post" > 
     <textarea cols="30" rows="2" name="textarea_noticia" class="textarea_noticia" id="textarea_noticia"></textarea><br /> 
     <input type="submit" value="Compartir" class="enviar_noticia" /> 
     </form> 
</div> 

<div id="cargando"></div> 

<div id="mostrar"></div> 
<?php

include("consulta.php"); 




} // cerramos el else 

include ("footer.php");  
?>

ajax.js

Código PHP:

  var seconds = 1; // el tiempo en que se refresca
    var divid = "notificaciones"; // el div que quieres actualizar!
    var url = "registro1.php"; // el archivo que ira en el div

    function refreshdiv(){

        // The XMLHttpRequest object

        var xmlHttp;
        try{
            xmlHttp=new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari
        }
        catch (e){
            try{
                xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); // Internet Explorer
            }
            catch (e){
                try{
                    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                }
                catch (e){
                    alert("Tu explorador no soporta AJAX.");
                    return false;
                }
            }
        }

        // Timestamp for preventing IE caching the GET request
        var timestamp = parseInt(new Date().getTime().toString().substring(0, 10));
        var nocacheurl = url+"?t="+timestamp;

        // The code...

        xmlHttp.onreadystatechange=function(){
            if(xmlHttp.readyState== 4 && xmlHttp.readyState != null){
                document.getElementById(divid).innerHTML=xmlHttp.responseText;
                setTimeout('refreshdiv()',seconds*1000);
            }
        }
        xmlHttp.open("GET",nocacheurl,true);
        xmlHttp.send(null);
    }

    // Empieza la función de refrescar

    window.onload = function(){
        refreshdiv(); // corremos inmediatamente la funcion
    }

registro1.php

Código PHP:

  <?php
echo "probando el refrescado del div";
?>

os ice caso lo ice con ajax pero funciona cuando ago la prueba en otra pagina si la ago en esta no funciona nose en que fallo me pueden ayudar. gracias.

edie8 · #13 (**permalink**) 08/02/2012, 03:55

Buenas ya consegui que funcione otra vez pero aora el problema es que en la pagina donde tengo el div que se actualiza tengo otros div que no se actualizan pero que al ingresar texto en uno de ellos que es un formulario se me crean mas de un registro nose como solucionar este error, es lo de actualizar porque al quitarlo ya no sucede que puedo hacer para que esto no pase?? necesito alguna idea. gracias.