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? 
Y btw, IE7 no soporta json.parse
Hey, si lo soporta. El último proyecto que tengo en producción en este momento hace mucho uso de xAJAX tal como lo ves en el artículo. El único problema que he tenido son ciertas transparencias que sólo van bien en el IE 8-9.
Hay casos donde el soporte a browsers viejos no es una opcion, es una obligacion. Claro, es mejor no hacer nada y cargarle al usuario la responsabilidad. Si para justificar usar tu propia libreria recurres al letrerito de “este site tiene que verse con x browser” entonces estas reduciendo tu base de usuarios por puro capricho.
Que haces si JSON.parse no esta disponible ese browser? Tendrias que hacer feature detection primero y decidir si haras eval o json.parse cierto? Tal cual lo hacen las miles de librerias disponibles que ya hacen esto perfectamente bien (como json2 por ejemplo).
Te respondo por navegador:
- Internet Explorer 6: Me importa tres pitos si funciona o no, porque hace bastante tiempo dejé de darle soporte.
- Internet Explorer 7-8-9: Funcionan perfectamente con JSON.parse. El IE mínimo al que doy soporte es al 7 y por el momento no he tenido problemas con mi función xAJAX para cargar y actualizar data.
- Firefox: Por defecto viene activado la opción de actualización automática. En los casos de versiones mayores (5->6, 7->8, etc.), es el usuario que debe descargarlo manualmente, sin embargo, la mayoría de los que usan este navegador tienen la cultura de actualizar cuando se enteran de versiones nuevas. Olvidé mencionar que soporta perfectamente JSON.parse desde FF 3.1.
- Chrome: También se actualiza automático y está demás decir que lo soporta debido al soporte de ECMAScript 3.1 de Webkit y el V8 de Google.
- Safari: Igualito que Chrome (pero sin el V8).
Si piensas en navegadores que no soporten JSON.parse, te pones en una posición retrógrada. Muchas veces he dicho en Twitter y en algún artículo por acá que a los clientes hay que enseñarles a actualizar. La mayoría de los usuarios se están moviendo a un navegador más actualizado porque el FKN todo-poderoso Facebook prácticamente los obliga (el mes pasado recomendaron como mínimo el 8).
Que un usuario use IE6, es la minoría y eso es de lo que el cliente debe convencerse.