Consulta de datos con Ajax En PHP

Saludos señores desarrolladores, en esta oportunidad les voy a presentar como se esta aplicando la tecnologia AJAX en el desarrollo de aplicaciones web. Hoy lo veremos en accion con el lenguaje PHP muy difundido y aceptado ampliamente.
Dejemos la teoria y vayamos a la practica, para empezar vamos a definir exactamente lo que queremos hacer: Haremos una consulta de a la base de datos y extraeremos los registros de la tabla Empleados para mostrarlos en pantalla, todo esto sin hacer post-back.

Requerimientos.

• Conocimiento de POO
• Algo de experiencia con PHP
• Conocimiento de Javascript + CSS + XML
• Base en Mysql
• Un gran sentido de investigacion

Antes de comenzar deberiamos tener instalado el Apache, el PHP y el mysql, para evitar la instalacion por separado usaremos el Appserver 2.5.7 que se descarga de aqui

Paso 1
Crearemos nuestra base de datos en MySql llamada:"empleados", luego creamos la tabla del mismo nombre y la llenaremos con algunos registros.

CREATE TABLE `empleados` (
`idempleado` int(11) NOT NULL auto_increment,
`nombres` varchar(32) NOT NULL,
`departamento` varchar(40) NOT NULL,
`sueldo` double default NULL,
KEY `id` (`idempleado`)
) ENGINE=MyISAM DEFAULT CHARSET=utf8 AUTO_INCREMENT=37 ;

--
-- Volcar la base de datos para la tabla `empleados`
--

INSERT INTO `empleados` VALUES (1, 'Juan Perez', 'Informatica', 5006);
INSERT INTO `empleados` VALUES (2, 'Laura Morales', 'Contabilidad', 550);
INSERT INTO `empleados` VALUES (3, 'Luis Gutierrez', 'Administracion', 850);
INSERT INTO `empleados` VALUES (4, 'Pedro Solar', 'Informatica', 500);
INSERT INTO `empleados` VALUES (5, 'David Vilchez', 'Contabilidad', 550);

Paso 2.

Ahora crearemos el script que contendra 2 funciones: la primera, nos permitira crear el objeto XMLHTTPRequest, la segunda nos ayudara a pedir datos y mostrarlos. Este archivo se llamara 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');
divResultado.innerHTML= 'Espere por favor ....';
ajax=objetoAjax();
ajax.open("GET", datos);
ajax.onreadystatechange=function() {
if (ajax.readyState==4) {
divResultado.innerHTML = ajax.responseText
}
}
ajax.send(null)
}

Paso 3.
Ahora creamos la Clase DBManager.php que nos permitira conectarnos a la base de datos, no se olviden de poner sus propios datos en los parametros que se piden

//esta clase nos permitira conectarnos a la base de datos
class DBManager{
var $conect;
function DBManager(){
}

function getCon(){
return $this->conect;
}

function conectar() {
if(!($con=@mysql_connect("localhost","root","aqui debes pooner tu clave")))
{
echo"Error al conectar a la base de datos";
exit();
}
if (!@mysql_select_db("empleados",$con)) {
echo "error al seleccionar la base de datos";
exit();
}
$this->conect=$con;
return true;
}
}

?>

Paso 4.

Vamos a crear la clase cEmpleado.php que nos permitira instanciar el objeto y a traves de su metodo consultar() devolvernos los registros de la base de datos.

include_once("DBManager.php");

//implementamos la clase empleado

class cEmpleado{

var $idempleado;

var $nombre;

var $depatamento;

var $sueldo;

//constructor

function cEmpleado(){}

function consultar()

// consulta los empledos de la BD

{

$con = new DBManager;

if($con->conectar()==true)

{

$query = "select * from empleados order by nombres";

$result = @mysql_query($query);

if (!$result)

return false;

else

return $result;

}

}

}

?>

Paso 5.

Bien sigamos adelante, crearemos el archivo consulta.php para sacar los datos, instanciamos un objeto de la clase cEmpleado.php y extraemos los registros mediante su metodo consultar(), veamos:

include_once("cEmpleado.php");

//Para chequear el gif

sleep(1);

//consulta todos los empleados

$objempleado= new cEmpleado;

$consulta=$objempleado->consultar();

//muestra los datos consultados

echo "Nombres - Departamento - Sueldo \n";

while($row = mysql_fetch_array($consulta)){

echo "

".$row['nombres']." - ".$row['departamento']." - ".$row['sueldo']."

\n";

}

?>

Paso 6.

Para terminar creamos el index.html que tiene un formulario y un boton que llama a la funcion MostrarConsulta() y esta a su vez llama a consulta.php para mostrar la data.

Con este ejemplo simple prentendo inciar esta serie de publicaciones Ajax con PHP y porsupuesto haciendo uso del paradigma de Programacion Orientado a Objetos y por ende el uso de clases que nos permitira hacer un codigo mas limpio y ordenado.

Muy pronto seran publicados otros articulos para todas aquellas personas interesadas en aprender cada dia mas y compartir sus conocimientos con el mundo.

Si tienen problemas con el codigo, descarguen los archivos desde aqui