Consultas en Bases de Datos

thi · #1 (**permalink**) 10/06/2009, 05:52

Hola a todos,

lo primero deciros que no tengo mucha idea de Ajax. Tengo una pagina casi terminada con un monton de formularios y todos ellos hacen consultas a la base de datos, estas consultas las hago con PHP, y aunque me resulte tener que volver a hacer de nuevo las consultas me gustaría intentar hacerlas con Ajax, pues por lo que he podido ver las consultas con Ajax no recargan toda la pagina como con PHP y la verdad me parece mucho más estetico que de repente salga la tabla con el resultado de la consulta que no que me recarge toda la pagina.

He oido que con jquery esta ya programado, no se si me equivoco, si es asi podría intentarlo si me dais alguna idea de como se harian las consultas con Ajax, e intentaría adaptarlo a mi pagina.

Un saludo.

matak · #2 (**permalink**) 10/06/2009, 07:28

Buenas Thi

Por lo que veo no tienes muy claros los conceptos. Hasta donde yo se, y si estoy confundido espero me rectifiquen, AJAX (Asinconous JAvascript XML) es un tecnología que te permite realizar peticiones asincronas al servidor. No es un lenguaje de programación es una metodología de trabajo combinando un lenguaje del lado del cliente (Javascript), XMLHttpRequest, y un lenguaje del lado del servidor como puede ser PHP. Estas peticiones son totalmente transparentes para el cliente (No se refresca la pantalla).

La forma de trabajar sería muy similar, ya que una petición AJAX no es más que pedirle al servidor que procese cierto script PHP (en tu caso) y que te retorne los resultados (código HTML) que tu inyectarás en el objeto de tu página que más te convenga.

Ciertamente JQuery es un buen FW para trabajar con AJAX y aunque yo no lo he usado nunca he de decirte que simplifica mucho las cosas y es bastante potente en cuestion de efectos y demás. Hay muchos ejemplos tanto en este foro como en la red.

Yo te puedo pasar algun ejemplo sencillo de como hacerlo pero sin usar FW que es como yo trabajo. Sólo tienes que pedirlo.

Espero que hayas entendido mi explicación ya que creo que es importante entender esto para empezar a trabajar de esta forma.

Saludos,

thi · #3 (**permalink**) 10/06/2009, 12:27

Hola matak,

creo que te he entendido, para utilizar Ajax se debería crear un archivo html con el formulario y en el que se pondría la petición Ajax al servidor a traves un archivo PHP que es donde se pondría la consulta SQL.

Mi problema es que estoy utilizando Joomla y entonces tengo que poner el codigo dentro del Joomla.

De todos modos si me puedes pasar algún ejejmplo sencillo para saber exactamente la sintasis de como se haría, te lo agradecería.

Un saludo.

matak · #4 (**permalink**) 11/06/2009, 02:24

Buenas thi,

Ahi va un pequeño ejemplo...

Base de Datos: prueba
Tabla: miTabla
-campo1 varchar(10)
-campo2 varchar(10)

index.php

Código php:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
 
<meta http-equiv="Content-Language" content="es">
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
 
<title>Prueba Ajax</title>
<script type="text/javascript" language="javascript" src="ajax.js"></script>
</head>
<body>
</body>
<form METHOD="POST" NAME="inert" ACTION="" ENCTYPE="multipart/form-data">
      Campo1:&nbsp;<INPUT TYPE="TEXT" id="campo1" NAME="campo1" SIZE="10" MAXLENGTH="10" />
      Campo2:&nbsp;<INPUT TYPE="TEXT" id="campo2" NAME="campo2" SIZE="10" MAXLENGTH="10" />
<br/>
      <INPUT TYPE="button" NAME="aceptar" VALUE="Enviar" onclick="javascript:peticionAjax('addTabla.php?campo1='+document.getElementById('campo1').value+'&campo2='+document.getElementById('campo2').value,'contenido');javascript:document.getElementById('campo1').value='';document.getElementById('campo2').value='';"/>
</form>
<br/>
<div id="contenido">
<table>
  <thead>
    <tr>
      <th>Campo1</th>
      <th>Campo2</th>
    </tr>
  </thead>
  <tbody>
<?PHP
 
////Conexión a la DB
 
$sql = "select * from miTabla";
$query = mysql_query($sql, $db) or die (mysql_error($db));
while ($resultado = mysql_fetch_array($query)){
?>
    <tr>
      <td><?PHP echo $resultado['campo1']; ?></td>
      <td><?PHP echo $resultado['campo2']; ?></td>
    </tr>
<?PHP
}
mysql_close($db);
?>
  </tbody>
</table>
</div>
</body>
</html>

ajax.js

Código javascript:

Ver originalvar ajax=null;
//Funcion que crea el objeto ajax
function objetoAjax(){
    var xmlhttp=false;
    try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try {
           xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (E) {
            xmlhttp = false;
    }
    }
 
    if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
        xmlhttp = new XMLHttpRequest();
    }
    return xmlhttp;
}
 
function peticionAjax(url,idDestino){
    if (ajax==null) {
      objDestino=document.getElementById(idDestino)
      ajax=objetoAjax();
      ajax.open("POST", url, true);
      ajax.onreadystatechange=function() {
          if (ajax.readyState==4) {
              objDestino.innerHTML = ajax.responseText
              ajax = null
          }
      }
      ajax.send(null)
    }else{
      setTimeout("f1('"+url+"','"+divcontenido+"')",1)
    }
}

addTabla.php

Código php:

Ver original<?PHP
header('Content-Type: text/xml; charset=ISO-8859-1');
 
/////Conexión a la BD
 
$sql="INSERT INTO miTabla (campo1,campo2) VALUES ('".$_REQUEST['campo1']."','".$_REQUEST['campo2']."')";
$query = mysql_query($sql, $db) or die (mysql_error($db));
?>
<table>
  <thead>
    <tr>
      <th>Campo1</th>
      <th>Campo2</th>
    </tr>
  </thead>
  <tbody>
<?PHP
$sql = "select * from miTabla";
$query = mysql_query($sql, $db) or die (mysql_error($db));
while ($resultado = mysql_fetch_array($query)){
?>
    <tr>
      <td><?PHP echo $resultado['campo1']; ?></td>
      <td><?PHP echo $resultado['campo2']; ?></td>
    </tr>
<?PHP
}
mysql_close($db);
?>
  </tbody>
</table>

Es un ejemplo muy muy sencillo. Si lo montas tal y como te lo pongo creando la BD y tablas tal cual funciona, lo he probado.

Ya dirás

Saludos...