AJAX es una de las alternativas más comunes para la consulta de datos. Trabajar con javascript me resulta divertido, pero no pienso lo mismo de PHP. Vamos, PHP no es tan divertido cuando tenemos que consultar datos y refrescar la página, porque esta acción requiere mucho más procesamientos y validaciones que si usamos AJAX-PHP-JSON.
“Si tenemos la herramienta perfecta, puedes mover el mundo” decía mi padre y al trabajar con AJAX para consultas, realmente necesitamos pocas herramientas (funciones en todo caso). Primero veamos esa función que hace la magia del lado del usuario:
function xAJAX (app,rqs,fnt,isString) { var xh = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); xh.open ('POST',app,true); xh.setRequestHeader ('Content-type','application/x-www-form-urlencoded'); xh.onreadystatechange = function () { if(xh.readyState == 4 && xh.status == 200) fnt( (isString) ? xh.responseText : JSON.parse(xh.responseText) ); }; xh.send (rqs); };
¿Simple, no? Como vemos, a dicha función le debemos pasar cuatro parámetros, así que expliquemos para qué sirven cada uno:
- app: Es la URL al PHP que hace las consultas a la base de datos.
- rqs: Son los parámetros que necesitamos consultar, aplicado de la forma común variable1=valor1&variable2=valor2&variable3=valor3…
- fnt: Una función anónima que se ejecuta luego que los datos solicitados están disponibles.
- isString: Por su naturaleza PHP devuelve texto (string), pero como la idea de JSON es usarlo a modo de objeto en javascript, necesitamos parcear el texto devuelto. Dentro de la función tenemos “JSON.parse” que se encarga de ese procesamiento, pero si de todos modos necesitamos que la función devuelva texto, tenemos esta variable booleana (true/false). La función xAJAX siempre devolverá un objeto a menos que el usuario defina ese parámetro como true, entonces devolverá texto.
Ahora aplicamos la función en nuestro HTML de prueba:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es"> <head> <title>AJAX - Respuesta Object o String</title> </head> <body> <input type="button" id="btn-object" value="Request Object" /> <input type="button" id="btn-string" value="Request String" /> <script type="text/javascript"> /* < ![CDATA[ */ function xAJAX (app,rqs,fnt,isString) { var xh = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); xh.open ('POST',app,true); xh.setRequestHeader ('Content-type','application/x-www-form-urlencoded'); xh.onreadystatechange = function () { if(xh.readyState == 4 && xh.status == 200) fnt( (isString) ? xh.responseText : JSON.parse(xh.responseText) ); }; xh.send (rqs); }; var btObj = document.getElementById('btn-object') var btStr = document.getElementById('btn-string'); btObj.onclick = function() { xAJAX ('app.php','exe=objeto&userid=12345',function(resp) { console.log( resp ); }); }; btStr.onclick = function() { xAJAX ('app.php','exe=texto&userid=12345',function(resp) { console.log( resp ); },true); }; /* ]]> */ </script> </body> </html>
Para este ejemplo tenemos a “btObj” que devuelve un objeto y “btStr”, que devuelve un string. Veamos como va la cosa del lado de PHP:
< ?php
$exe = $_POST['exe'];
$userid = $_POST['userid'];
$query = mysql_query( "SELECT nombre,apellido,email,pais,nacionalidad FROM tabla_usuarios WHERE id='$userid' LIMIT 1" );
$queryRow = mysql_fetch_assoc($query);
$nombre = $queryRow['nombre'];
$apellido = $queryRow['apellido'];
$email = $queryRow['email'];
$pais = $queryRow['pais'];
$nacionalidad = $queryRow['nacionalidad'];
if ( $exe == 'objeto' )
{
$dat = array(
"nombre" => $nombre,
"apellido" => $apellido,
"email" => $email,
"pais" => $pais,
"nacionalidad" => $nacionalidad
);
echo( json_encode($dat) );
}
if ( $exe == 'texto' )
{
$dat = $nombre . " || ";
$dat .= $apellido . " || ";
$dat .= $email . " || ";
$dat .= $pais . " || ";
$dat .= $nacionalidad;
echo($dat);
}
?>
Primero solicitamos los datos con xAJAX, diciendo a “app.php” que filtre con “exe” qué tipo de dato debe devolver (objeto o texto). A la misma vez paso con “userid” el id que debe consultar en la base de datos. En el caso de “btStr” defino a “isString” como true para que devuelva texto.
Los datos devueltos se imprimen en la consola del navegador (Chrome, Safari, Firefox Firebug, Opera Dragonfly).
¿Verdad que es simple cuando tienes las herramientas perfectas? 