Consulta de Registros en AJAX

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>

<script language="JavaScript" type="text/javascript"
src="ajax.js"></script>
</head>
<body>
<p>Consultar registros con ajax</p>"</p>"<p>
<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

Consulta de Registros en AJAX

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Consulta de Registros en AJAX

Hochgeladen von

Copyright:

Verfügbare Formate

Consulta de registros en AJAX

CREATE TABLE empleados (

Creamos las funciones en javascript

Ahora escribiremos 2 funciones, en la primera (objetoAjax) tiene como objetivo elegir el

return xmlhttp;

divResultado = document.getElementById('resultado');

ajax.open("GET", datos);

divResultado.innerHTML = ajax.responseText

Pedir los datos con PHP

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

//consulta todos los empleados

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

//muestra los datos consultados

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

 Una función para crear el objeto XMLHttpRequest dependiendo del navegador.

Pueden descargar todos los archivos de este tutorial en el archivo

Das könnte Ihnen auch gefallen