Manera totalmente diferente de hacer solicitudes asíncronas contra un servidor, sin usar XMLHttpRequest, fetch u otro mecanismo pensado para Ajax. Tendremos un script Javascript creado dinámicamente con un src que realizará la solicitud del dato.
En este artículo vamos a ver un taller de Javascript con una manera imaginativa de hacer una consulta contra el servidor de manera asíncrona, pero sin usar Ajax. En lugar de ello lo que vamos a hacer es crear dinámicamente una etiqueta <script> insertando ésta en el contenido de la página. Esta etiqueta <script> tendrá un atributo src con la ruta del recurso del servidor que queremos invocar.
Gracias a la etiqueta <script> y su atributo src se producirá una llamada al servidor cuando la inyectemos en la página. El servidor lo que tendrá que devolvernos es el código Javascript que se debe ejecutar para realizar la manipulación necesaria en la página, a fin de mostrar el cambio deseado en el documento HTML.
Nota de mantenimiento del artículo: Lo que verás en este artículo es una práctica poco habitual. Te puede servir para tenerla como inspiración y ver que, con un poco de imaginación conseguimos efectos en el navegador, usando mecanismos alternativos. No recomendaríamos hacer Ajax de esta manera, dado que genera un código muy poco mantenible. Además, es poco natural que el servidor componga código Javascript dinámicamente que luego se tendrá que ejecutar en el cliente. Desde PHP lo ideal sería enviar un simple JSON con los datos a mostrar y en el cliente se use el JSON para generar los elementos en la página. En último caso podría incluso prepararse el código HTML en PHP, lo que resultaría más natural.
No obstante no podemos discutir que el ejemplo no funcione. De hecho funciona bastante bien y es poco probable que los navegadores tengan problemas al interpretarlo, por lo que resulta cuando menos curioso el resultado.
Motivación para buscar otras alternativas a Ajax
Estoy harto de muchas cosas, pero estas dos son destacables:
1) Que la gente (sugestionada por las muchas herramientas creadas con apoyo en esta tecnología) se crea que Ajax sirve para todo... El otro día uno me dijo que Ajax era algo que servía para hacer drag and drop... Otro pensaba que era algo que servía para generar efectos de reflejo en imágenes... Y así podría seguir enumerando a algunos que piensan que mejora el gusto del café o que preguntan "cómo se te ocurre usar un detergente para hacer una web?".
2) Todos los websites de programación que enseñan a hacer combos relacionados, ya sea con javascript puro o con Ajax.
Y bueno, un poco para sumar yo también a este tema recurrente, y otro poco porque es un buen ejemplo de que a veces no es necesario usar Ajax sino herramientas similares, más sencillas y que obtienen el mismo resultado.
Ejemplo de procedimiento remoto en Javascript
Les dejo este ejemplo, en el cual el evento onchange de un combo dispara una consulta al servidor, obtiene la respuesta que este le devuelve y la muestra en pantalla sin refrescar la página, es decir, de manera asíncrona, y, lo más importante, sin usar Ajax, sólo utilizando DOM javascript, algo que algunos llaman RPC javascript o Llamada a Procedimiento Remoto en javascript.
Este es el ejemplo y este es el código utilizado:
<?php
if (isset($_GET['p'])) {
switch ($_GET['sel']) {
case '1':
$ret = array('Final del Juego', 'Rayuela', 'El Señor de loas Anillos');
break;
case '2':
$ret = array('rock', 'new age');
break;
case '3':
$ret = array('español', 'php', 'javascript');
break;
default:
echo 'document.getElementById("pp").innerHTML="<select name=\"dos\" id=\"dos\"></select>";';
exit;
}
$html = '<select name=\"dos\" id=\"dos\">';
foreach ($ret as $v)
$html .= '<option value=\"' . $v . '\">' . $v . '</option>';
$html .= '</select>';
echo 'document.getElementById("pp").innerHTML="' . $html . '";';
exit;
}
?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test</title>
<script>
function adjs(url) {
oldsc = document.getElementById("old_sc");
if (oldsc) {
document.getElementsByTagName('body')[0].removeChild(oldsc);
}
sc = document.createElement('script');
sc.id = "old_sc";
sc.src = url + '&' + Math.random();
document.getElementsByTagName('body')[0].appendChild(sc);
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<select name="uno" id="uno" onchange="adjs('?p&sel='+this.value)">
<option value="0">seleccionar</option>
<option value="1">libros</option>
<option value="2">música</option>
<option value="3">lenguaje</option>
</select>
<div id="pp"><select name="dos" id="dos">
</select></div>
</form>
</body>
</html>
Como ven, el corazón de esto es esta función:
function adjs(url) {
oldsc = document.getElementById("old_sc");
if (oldsc) {
document.getElementsByTagName('body')[0].removeChild(oldsc);
}
sc = document.createElement('script');
sc.id = "old_sc";
sc.src = url + '&' + Math.random();
document.getElementsByTagName('body')[0].appendChild(sc);
}
Lo que hace la misma es incluir un nuevo elemento <script> en la página, cuyo atributo src es la ruta al archivo de proceso en el servidor.
Simple, sencilla, totalmente compatible con todos los navegadores modernos, y, gracias a que mediante una comprobación elimina los scripts incluídos en otras llamadas, con un consumo mínimo de recursos.
Otra ventaja frente a nuestro amigo XMLHttpRequest, aparte de su sencillez, es que puede trabajar con archivos que estén en otro dominio sin tener que apelar a ningún truco.
Andrés Fernández