Consulta de registros en AJAX

11.07.2006

Consulta de registros en AJAX

Por Jesús Liñán | 23,555 Lecturas
Archivado en: Ajax

Realizaremos un sencillo ejemplo de como recuperar registros de una tabla con AJAX. Este ejemplo lo he probado en IE, Firefox, Opera y Netscape sin darme errores.

Es un ejemplo sencillo si estamos familiarizados con PHP y MySQL. Aún así, daré algunas explicaciones generales sobre el código.

Creación de la tabla

Iniciaremos creando un tabla pequeña llamada empleados, no tendrá más que 5 campos: idempleado, nombres, departamento y sueldo; además insertaremos algunos datos.

CREATE TABLE empleados (  
              idempleado int NOT NULL auto_increment,
              nombres varchar(32) NOT NULL,
              departamento varchar(40)NOT NULL,
              sueldo double,
              KEY id(idempleado) )
  TYPE=MyISAM;   
INSERT INTO empleados VALUES (1, 'Juan Perez', 'Informatica',500.00);
INSERT INTO empleados VALUES (2, 'Laura Morales', 'Contabilidad',550.00);
INSERT INTO empleados VALUES (3, 'Luis Gutierrez', 'Administracion',850.00);
INSERT INTO empleados VALUES (4, 'Pedro Solar', 'Informatica',500.00);
INSERT INTO empleados VALUES (5, 'David Vilchez', 'Contabilidad',550.00);

Creamos las funciones en javascript

Ahora escribiremos 2 funciones, en la primera (objetoAjax) tiene como objetivo elegir el objeto XMLHttpRequest dependiendo del navegador, y la segunda función (MostrarConsulta (parametro)) tendrá como objetivo pedir los datos y mostrarlos en una capa (<div>) que especificaremos.

Estas funciones las podemos incluir en un archivo javascript (.js) al cual llamaremos ajax.js.

Ejemplo de ajax.js:

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 MostrarConsulta(datos){

        divResultado = document.getElementById(’resultado’);

        ajax=objetoAjax();

        ajax.open("GET", datos);

        ajax.onreadystatechange=function() {

               if (ajax.readyState==4) {

                       divResultado.innerHTML = ajax.responseText

               }

        }

        ajax.send(null)

}

Pedir los datos con PHP

En esta parte escribiremos un script en PHP para realizar una consulta de todos los registros de la tabla empleados en la base de datos.

Ejemplo de
consulta.php:

<?php
//Configuracion de la conexion a base de datos
$bd_host = "localhost";
$bd_usuario = "root";
$bd_password = "";
$bd_base = "ribosomatic"; 

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

mysql_select_db($bd_base, $con); 

//consulta todos los empleados

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

//muestra los datos consultados
echo "</p>Nombres - Departamento - Sueldo</p> \n";
while($row = mysql_fetch_array($sql)){
	echo "<p>".$row['nombres']." - ".$row['departamento']." - ".$row['sueldo']."</p> \n";
}
?>

Formulario de consulta

Finalmente creamos un archivo html que contendrá un Form y un Button el cual realizará la consulta.

Ejemplo de
consulta_empleados.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Consulta Registro con AJAX</title>
<!-- referenciamos al archivo ajax.js donde se encuentra nuestra funcion objetoAjax-->
<script language="JavaScript" type="text/javascript" src="ajax.js"></script>
</head>

<body>
<p>Consultar registros con ajax</p>"</p>"<p><!-- En "onsubmit" escribimos la función 'MostrarConsulta' que creamos en javascript,
con su parametro que es el archivo que vamos a mostrar, en este caso 'consulta.php'-->
<form name="consulta" action="" onsubmit="MostrarConsulta('consulta.php'); return false">
<label>
<input type="submit" value="Consultar" />
</label>
</form>
<div id="resultado"></div></body>

</html>

En resumen

Para consultar los datos de una tabla hemos realizado lo siguiente:

Una función para crear el objeto XMLHttpRequest dependiendo del navegador.
Una función que realizará la petición de datos e indicará donde se mostrarán estos.
Una script en PHP que consulta los datos y los muestra.
Y finalmente el formulario de consulta.

Pueden descargar todos los archivos de este tutorial en el archivo consultaajax.zip

Califica esta nota:

(16 votos, promedio: 4.38 de 5)

Loading ...

Sobre el autor

Jesús Liñán
Webmaster del sitio ribosomatic.com

Comentarios

29 comentarios en total.

Miguel Martinez 12.07.2006 - 05:31 - #

gracias por el articulo. me gustaria un ejemplo para ver el trabajo final.
yo 12.07.2006 - 08:00 - #

Miguel ahi tienes el ejemplo del codigo y tienes los archivos para poder ver el ejemplo
Miguel Martinez 12.07.2006 - 11:04 - #

me refiero a un ejemplo funcionando, ya que no cuento con un servidor apache aca;
pero bueno si es mucho pedir asi nomas esta bien
jesus liÃ±an 17.07.2006 - 11:35 - #

en la seccion ejemplos de la web estan los tutoriales desarrollados.

// http://www.ribosomatic.com //
Gaspar 25.07.2006 - 10:28 - #

Solo quisiera saber como modifico los archivos para hacer la conexion a otra base de de datos, porque ya modifique tu archivo consulta.php, pero no a resultado
jesus liÃ±an 25.07.2006 - 23:06 - #

Modifica los datos de la parte superior del archivo consulta.php, como el nombre de host, usuario, password y bd. Puedes ver una muestra en la seccion Ejemplos de la web ribosomatic.

// http://www.ribosomatic.com //
No Registrado 26.07.2006 - 10:29 - #

Bueno lo intentare de nuevo, a ver si me funciona. de todas maneras gracias mano.
Bladi 27.07.2006 - 15:38 - #

Felicidades sobre el articulo, esté es un ejemplo muy claro de uso de ajax al menos a mi me parecia así bueno suerte a todos me funciono bien.. gracias =)
Semyaza 08.08.2006 - 08:24 - #

Tengo la version en Coldfusion de este ejemplo en PHP para el quien quiera o utilice coldfusion.

Un saludo.
vbGopher 13.08.2006 - 14:28 - #

“La vida se entiende a traves de ejemplos….” muy buen articulo, gracias por compartirlo

Saludos
Mexicali, BC. Mex
Paquirri 18.08.2006 - 12:09 - #

Ese ejemplo es usando PHP .. como seria usando Java?
david Aroca 24.08.2006 - 08:37 - #

pienso que ajax facilita muchas cosas a nivel de presentacion del usuario, pero es una limitante cuando de hablar explorardores se trata pues no hay un estandar para el manejo de javascript y aun se cuenta con explorardores que no aceptan muchas funciones de javascript, he trabajado ajax con java y es excelente para el manejo dinamico de la informacion, pero aun asi se encuentran cositas que tocas revisarlas con detenimiento para implementar un buen desarrollo
Marc 09.10.2006 - 13:38 - #

Gracias por este formidable ejemplo para iniciarse en ajax.Tengo que hacer un formulario para facturar en PHP i esto me va a servir de mucha ayuda.
Saludos.
anabel 10.10.2006 - 15:50 - #

muy buen ejemplo me sirvio mucho porque apenas estoy aprendiendo a utilizar y entender ajax si tienen otros ejemplos pues envienlos
lola_any@hotmail.com
Vicnte 13.10.2006 - 19:48 - #

Hola a todos lo q estan en este minuto me llamo Vicnte y quiero pedirles q si qren chatear con migo lo agan en este msn vicentito55_@hotmail.com q esten muy bnbnbn
Ricardo 27.10.2006 - 00:07 - #

Excelente!!

tendras algun ejemplo de como llenar un combobox con datos desde una mysql a partir de lo seleccionado en un primer combobox?

Algo asi como un combobox donde se seleccionan Provincias y otro donde se muestren Ciudades de la Provincia seleccionada anteriormente.

Saludos
Rodrigo 01.11.2006 - 10:04 - #

Muy buen ejemplo, claro, sencillo y muy util.
Salvatore 22.11.2006 - 06:49 - #

Hola a todos, mmm, les dejo una inquietud, estoy haciendo un buscador mejor dicho tengo un buscador heccho con php y ajax, funciona bien pero lo que necesito es que cuando se este buscando las palabras que se ecriban en la caja de texto este inmediatamente apareciendo resultados, es decir que a medida que se escriben palabras este apareciendo los resultados con dichas primeras palabras.
gracias, si alguien sabe de algo me avisa por favor salva_web@hotmail.com
Armando 24.11.2006 - 08:12 - #

Te felicito, por esta manera tan facil de explicar un concepto un poco complejo como el AJAX. que sigas publicando más ejemplos interesante.
LAZARO BETANCOURT 12.01.2007 - 12:06 - #

tengo un problema con con un codigo ajax, yo valido que no repita un dato si el dato que pone no existe en la base de datos agrego todo, esto trabaja muy bien pero cuando le doy un submit para agregar los datos que que me vuelve a cargar la pagina si pongo el valor ultimo que introduje no me lo valida o sea el dato esta en la base de datos pero al ponerlo en el text me deberia dar “dato existente” y no lo hace sin embargo pongo cualquier otro dato existente y me da el error esperado, tengo que salir del ie volver a entrar y entonces todo ok, si me pudieran ayudar se los voy a agraceder, desde cuba lazaro
ciber116 13.03.2007 - 22:43 - #

Gracias a este código pude realizar mi primera implementación para un registro de usuarios en mi pagina web. Con el objetivo de verificar si el nombre de usuario que se desea ya esta haciendo usado por otro usuario.
Raton 06.11.2007 - 15:02 - #

Saludos y buen tutorial..

Ahhh! y salvatore viejo perro que hasta en los foros me salgai preguntando ….
Fideox 25.01.2008 - 13:52 - #

Muchas gracias por el aporte, muy buen tutorial!!!
martin 28.03.2008 - 12:56 - #

El ejemplo es buenismo, lo unico que necesito yo es que le mande por parametro el codigo del empleado a lisar para q no liste todos. Como puedo hacer para mandar por parametro un codigo asi la consulta me devuelve ese codigo nada mas????
Juancito 05.04.2008 - 14:44 - #

Quisiera saber si el script “ajax.js” tiene algún tipo de vulnerabilidad. Recuenden que se ejecuta del lado del cliente, por lo tanto se puede modificar.
LARRY9000 03.05.2008 - 20:40 - #

Hola, saludos. Trabajo con java, pero es muy interesante lo expuesto. Me gustaría si me puedes resolver un problema. Tengo una aplicación que hasta el momento hace lo siguiente:
1.- Se carga una ventana y digito una clave y doy buscar.
2.- Para esto utilizo ajax, y los datos se reflejan como corresponde. Ya que el registro existe.
3.- Le doy click a un botón para eliminar el registro y lo hace. Reviso la base de datos y efectivamente ya no existe el registro.
4.- Aún no salgo de la aplicación y voy a la página para consultar por el registro eliminado y sorpresa ¡EL REGISTRO EXISTE!.
5.- Le doy click para volver a eliminar y no puede ya que no existe¿?.
6.- ¿Cómo puede ser?.
7.- Para eliminar no uso ajax.
8.- Hice otra ventana de consulta. Vuelvo a la principal y busco otro registro y lo elimino.
9.- Vuelvo a buscarlo y ¡EXISTE!. En esta página utilizo ajax.
10.- Voy con otro botón a consultar en otra página sin ajax y ¡NO EXISTE!.
11.- Resumiendo: AJAX se comporta en forma extraña.
Agradeceré enormemente tus observaciones.
EDNET 02.06.2008 - 16:15 - #

¿Si la base de datos se actualiza como hago para que se recargue la tabla actualizada desde la pagina web, ya sea en PHP JSP o la que sea.?
raquel 19.06.2008 - 14:27 - #

Deseo realizar una consulta en la bd usando ajax, para colocar los datos en un combobox, que está elaborado con un codigo javaScript, como hago para colocar esa consulta en el combo?
raquel 19.06.2008 - 14:27 - #

Buenas Tardes, Deseo realizar una consulta en la bd usando ajax, para colocar los datos en un combobox, que está elaborado con un codigo javaScript, como hago para colocar esa consulta en el combo?