Consulta de registros 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
gracias por el articulo. me gustaria un ejemplo para ver el trabajo final.
Miguel ahi tienes el ejemplo del codigo y tienes los archivos para poder ver el ejemplo
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
en la seccion ejemplos de la web estan los tutoriales desarrollados.
// http://www.ribosomatic.com //
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
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 //
Bueno lo intentare de nuevo, a ver si me funciona. de todas maneras gracias mano.
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 =)
Tengo la version en Coldfusion de este ejemplo en PHP para el quien quiera o utilice coldfusion.
Un saludo.
“La vida se entiende a traves de ejemplos….” muy buen articulo, gracias por compartirlo
Saludos
Mexicali, BC. Mex
Ese ejemplo es usando PHP .. como seria usando Java?
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
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.
muy buen ejemplo me sirvio mucho porque apenas estoy aprendiendo a utilizar y entender ajax si tienen otros ejemplos pues envienlos
[email protected]
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 [email protected] q esten muy bnbnbn
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
Muy buen ejemplo, claro, sencillo y muy util.
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 [email protected]
Te felicito, por esta manera tan facil de explicar un concepto un poco complejo como el AJAX. que sigas publicando más ejemplos interesante.
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
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.
Saludos y buen tutorial..
Ahhh! y salvatore viejo perro que hasta en los foros me salgai preguntando 😛 ….
[…] Link Original : Maestros Del Web […]
Muchas gracias por el aporte, muy buen tutorial!!!
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????
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.
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.
¿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.?
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?
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?
excelente ejemplo!!
Felicidades!!
sdfa
Hola, el ejemplo esta espectacular y lo logre implementar bien adaptandolo a los datos que yo tenia, pero tengo otra duda igual a la de Salvatore, debo ingresar un dato en el textbox y al hacer click en consultar me debe traer los datos de la bd. Si alguien me puede ayudar con ese,le agradezco mucho pq estoy desarrollando un sistema q requiere de ese tipo de funcionalidad. Gracias de antemano.
muy buen ejemplo, me callo como anillo al dedo. mil gracias por publicar estos ejemplos, la verdad es que son de mucha utilidad en momentos en que no sabemos como empezar con nuevas tecnicas como es Ajax.. gracias
Buenas,
El ejemplo tiene una pinta genial y me ha servido para entender como funciona el tema de ajax, además me resultará muy útil para un proyecto que tengo entre manos.
Tengo un problema a la hora de ejecutar el código del ejemplo, cuando hago clic en el botón de consulta me salta un mensaje diciendo que apache se ha tenido que parar (en realidad siue funcionando), que puede estar ocurriendo??, es posible que haya que configurar algo para que el código ajax se ejecute correctamente??
un saludo y gracias de antemano por vuestra ayuda.
Jessica enviame tu mail o la manera de contactarme para poder resolver tu consulta
La verdad es que te debo la vida. El profesor nos mandó a hacer un trabajo con ajax para el lunes (hoy es sábado) y yo ni sé hacer consultas con ajax. Bueno, va a ser una noche de café y desvelo, pero me ayudaste un montón.
Gracias
Esta Asiendo Mal Es verga Tengo Codigo en Java que acen eso
muy bueno el ejemplo, pero me gustaría saber cómo ejecutar la consulta dependiendo del idempleado, o sea, en vez del evento onsubmit, con el evento onkeyup.
Gracias.
AL MENOS COLOCA LA URL DE DONDE LA COPIASTES NO?
Men Como Hago ese Mismo Ejemplo pero que me lo mueste en un
<input type="text" name="tci" value="ci;?>”>
xq ese ejmplo em lo muestra en tabla.
Muy bueno el ejemplo para conocer la introducción a AJAX, tengo una duda.
¿como puedo pasar este codigo en html?.
<a href=”#” onclick=”MostrarConsulta(‘http://localhost/Sh.com/wp-content/themes/sigima/consulta.php?id=1’); return false”>
sdsd
</a>
A PHP sin complicaciones debido a que al cambiar los “” a ” la consulta no se realiza.
como hago para hacer un autocompletar con ajaz q lo he querido hacer pero nada… pero q haga las consultas una base de datos mysql
Hola compañeros.
Muy buen ejemplo.
Me podriais decir alguno en que programa esta escrito ese script.
Me gusta mucho el aspecto.
Un saludo y gracias
Muchas gracias, excelente, simple y eficaz!
Maravilloso!!, este tutorial aunque es viejo me viene que ni pintado, ahora:
– En la página HTML tengo un código php donde se inicializa unas variables al realizar la consulta mediante ajax a una página php, está página no puede leer dichas variables ni siquiera a través de $_SESSION. ¿hay alguna manera de poder pasar variables?
A mi solo se me ocurre pasar esa variable a una tabla mysql y luego volver a leer dicha tabla en la página de consulta. Pero sería como matar moscas a cañonazos. ¿hay otra forma?
Gracias anticipadas.
hola esta exelente el tutorial, pero kisiera saver como implemetarlo en la siguiente forma:
digamos ke tengo una lista denoticias y solo kiero mostrar el titulo de estas y ek al hacer click en un boton o en su titulo se cargue la noticia correspondiente al titulo en el div donde se encuentra la noticia?=
las noticias se cargarian por php y mysql.
yo actualmente tengo un web en el cual muestro el listado de noticias y al hacer click abre unapagina nueva con la misma y estoy re diseñandolo el problema se me presenta al hacer que la consulta de php se cargue.
ejemplo
noticia dinamica BOTON1
noticia dinamicaBOTON2
si el div noticia dinamica es creado dinamicamente por la consulta mysql con su contenido como hago para hacer ke al clicar en su titulo solo cambie el contenido de ese titulo y no de todos los div??
te agradeseria mucho la respuesta sludos