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.
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);
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) }
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"; } ?>
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>
Para consultar los datos de una tabla hemos realizado lo siguiente:
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.
Twitter
Chat Room (0)