AJAX, PHP, MySQL - Consulta de registros

10-06-2006 AJAX 174327 hits (100 %) 122 comentarios

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í dare algunas explicaciones generales sobre el código.

Creacion de la tabla

Entonces empezemos creando un tabla pequeña llamada empleados, no tendrá mas 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 lo podemos incluir en un archivo javascript (.js) al cual llamaremos ajax.js

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.

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.

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.

Como podrán apreciar el código es realmente sencillo de entender, aún así daré mas detalles si preguntan. Pueden descargar el archivo si desean. Hasta otra oportunidad.

autor image Jesus Liñan
Programador de software, especializado en web sacando provecho de todos los recursos de la internet para el desarrollo y diseño web y compartiendolo con todos. Seguir @jesusvld

Advertisement

122 comentarios a "AJAX, PHP, MySQL - Consulta de registros"

  1. Tengo el mismo problema que el compañero juan ya intente modificar el archivo ajax pero no he podido lograr hacer una consulta pasando un parametro que me funcione para na condicion de ID en mi consulta asesoria por favoor
  2. Tengo el mismo problema que el compañero juan ya intente modificar el archivo ajax pero no he podido lograr hacer una consulta pasando un parametro que me funcione para na condicion de ID en mi consulta asesoria por favoor
  3. La verdad estoy aprendiendo y ando muy perdida con esto de AJAX. Me colaboras por favor.

    Me puedes aclarar un par de cosas del codigo, para salir de la duda. Te lo pregunto por que por mas ejemplos que veo no logro entender.

    1. En esta linea que contiene datos
    function MostrarConsulta(datos){

    Cual es la diferencia con este otro ejemplo tuyo
    function pedirDatos(fuenteDatos, divID){ que contiene fuentedatos y divID.


    2. En esta linea GET es la forma de pasar los datos, pero datos que contiene: ajax.open("GET", datos);


    3. Esta linea para que sirve: ajax.open("GET", datos+'?pagina='+divResultado);

    Disculpame lo atrevida pero es que no he podido entender y los tutoriales son muy tecnicos.

    Gracias por tu tiempo

    Isabel
  4. Tu ejemplo es muy bueno

    La verdad es que apenas estoy entendiendo como funciona AJAX, un poco dificil.

    Yo tome tu ejemplo y lo adapte a mi DB y funciona muy bien, lo que no he podido hacer, es que ademas de mostrar los registros de la consulta, me coloque en otro div el numero de registros encontrados en la consulta.

    como puedo hacer esto.

    Me colaboras por favor

    Gracias
  5. esto se podría aplicar, en un minichat? ya implemente uno en mi web, pero lo que quiero es que al momento de agregar un comentario, se actualicen en todas las ventanas y sesiones que esten activas o abierta, en el momento que yo haga un insert, todos los usuarios que estan conectados hagan la consulta automatica a la base de datos.
    asi como lo hace el messenger o hasta facebook...
    Gracias!
  6. Antes que nada, gracias por los valiosos tutoriales.

    Sería muy util podrías hacer un tutorial aplicado a este mismo donde explique como subir un archivo al servidor y cargar el nombre del archivo en una base de datos, eso sería muy interesante aporte, gracias
  7. hola mi pregunta es como puedo hacer el llamado de los registros colocando por ejemplo el id del empleado en la tabla cliente? porfa responde a mi correo andres_gabriel_124@hotmail.com y gracias
  8. Como se haria con procedimientos almacenados espero tu respuesta, probe el ejemplo tal y como dices salio bien
  9. alguien tiene algo relacionado con gestion de notas, para una institucion, estoy desarrollando algo, pero debe tener en cuenta
    1 el programa
    2 el semestre
    3 el alumno
    si alguien tiene algo que me pueda servir, gracias.
  10. Hola, muy buen ejemplo ehhh!!
  11. cargar mas ...