c





  
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.

c

 

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.

c



 

  
  
  !" 

  

#
$
  
$%
&'()*'+
)*
)
 ,
*-./%0..)1 .2""3"" +
)*
)
 ,
*.' 
..c 
.22"3"" +
)*
)
 ,
*.40.
. .52"3"" +
)*
)
 ,
*!.% *
..)1 .2""3"" +
)*
)
 ,
*2.6,
0..c 
.22"3"" +

c
 





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.

i   

1  7 78 9
8
 &1
+
(9
8
 &:;7<'8
3;'=%< +
> 9
(9
8
 &:;7<'  13;'=%< +
>
9
8
 &1
+
>
>

1?8
 @@(  1;'= A?&.1. 9
8
 &:;'= A +


>


8
 +


>





1 ' c 

  9


 
 & 3B

().
 . +


78& 7 78 +



783 <4
<  +


783 (B&1  9



1783(*&&! 9



 
 3='&783 8


>


>


783




>

 
  
 
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.

i   



†  
CCc 1B 
 8  
D &<

 <+
D &< <+
D : &<<+
D&<  <+

D &(A
 D D D :  +

(A

DD  +

CC 
  

 

DA
&(A
A(<*

cEF '
 <D  +

CC
  
 
 <†C G H6  H*
 †C GI<+
:
D :&(A
1(DA
9
  <† G<3D :J. .K3<H<3D :J.  .K3<H
<3D :J.
 .K3<†C GI<+
>
G

O

  


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

i   

   

†
G
†G
† HA&<c H( < &<8C
+& H552LH-<
CG
†
Gc 
 B  /;†C
G
†?HH1 
 7837 1 
7 78HHG
† 
BB&</* <( &<8C7 <
&<7837<G†C G
†CG

† (G
† Gc 
B  78†C G<†C G<† G†?HH
< < 

1M.' c 

.A 7 
   A
 A   
. 
3  .HHG
†1 &< 
< &<<
&<' c 
. 
3  . +1
<G
†

G
† ( &<<
&<c 
<CG
†C

G
†C1 G
†&<
 <G†CG†C (G

†C
G

i




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

y? ÿna función para crear el objeto XMLHttpRequest dependiendo del navegador.

y? ÿna función que realizará la petición de datos e indicará donde se mostrarán estos.
y? ÿna 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