Mi blog de notas

AJAX en 30 segundos

El otro día me topé con un correo que escribió Rasmus Lerdordf (el de PHP) hace unos meses, burlándose un poco de todo el bombo que se ha formado en torno a la palabra AJAX, una técnica que ya se usaba desde hace tiempo sin tan telamonio nombre. Lo bueno es que al mismo tiempo da una explicación de la técnica que se lee en 30 segundos.

Encuentro todo este bombo del AJAX un poco exagerado. Mucha gente ha estado haciendo cosas parecidas mucho antes de que se convirtiera en "AJAX". Y en realidad no es tan complicado como mucha gente pretende hacerlo ver. Esto es un ejemplo de una de mis aplicaciones. Primero el Javascript:

function createRequestObject() {
    var ro;
    var browser = navigator.appName;
    if(browser == "Microsoft Internet Explorer"){
        ro = new ActiveXObject("Microsoft.XMLHTTP");
    }else{
        ro = new XMLHttpRequest();
    }
    return ro;
}

var http = createRequestObject();

function sndReq(action) {
    http.open('get', 'rpc.php?action='+action);
    http.onreadystatechange = handleResponse;
    http.send(null);
}

function handleResponse() {
    if(http.readyState == 4){
        var response = http.responseText;
        var update = new Array();

        if(response.indexOf('|' != -1)) {
            update = response.split('|');
            document.getElementById(update[0]).innerHTML = update[1];
        }
    }
}

Esto crea un objeto request además de una función para enviar la petición y otra para manejar la respuesta. Así que para usarla podríais incluir este js en vuestra página. Luego, para hacer una de esas peticiones traseras tendríais que asociarla a algo. Como un evento onclick o un href directo como este:

  <a href="javascript:sndReq('foo')">[foo]</a>

Esto significa que cuando alguien pulse en este enlace, lo que sucede realmente es que se enviará una petición a rpc.php?action=foo.

En rpc.php podéis tener algo como esto:

  switch($_REQUEST['action']) {
    case 'foo':
      /* hacer algo */
      echo "foo|foo hecho";
      break;
    ...
  }

Ahora mirad handleResponse. Analiza la cadena "foo|foo hecho" y la divide con el '|', y usa lo que haya antes del '|' como el elemento dom id de vuestra página y la parte de detrás como el nuevo innerHTML de ese elemento. Esto significa que si tenéis una etiqueta div como esta en vuestra página:

  <div id="foo">
  </div>

Una vez que pulséis en ese enlace, esto cambiará dinámicamente a:

  <div id="foo">
  foo hecho
  </div>

Eso es todo lo que hay. Todo lo demás es construir sobre esto. Sustituír la sencilla sintaxis de mi respuesta "id|texto" por un formato XML más rico y también hacer la petición mucho más complicada. Antes de que instalar ciegamente grandes librerías "AJAX", probad a escribir vuestra propia funcionalidad y así sabréis exactamente cómo funciona y sólo lo complicaréis lo necesario. A menudo no se necesita mucho más de lo que he mostrado aquí.

Por ejemplo, sería muy sencillo extender un poco este ejemplo para que envíe varios parámetros en la petición. Algo como:

  function sndReqArg(action,arg) {
    http.open('get', 'rpc.php?action='+action+'&arg='+arg);
    http.onreadystatechange = handleResponse;
    http.send(null);
  }

Y vuestro handleResponse puede extenderse fácilmente para que haga cosas mucho más interesantes que sólo reemplazar el contenido de un div.

-Rasmus

Vale, a mí me ha costado más de 30 segundos, pero se entiende muy bien y el tema es más sencillo de lo que yo pensaba. Para probar he hecho un pequeño fortune ajaxizado que ejecuta fortune en otro servidor y recibe la salida. ¡Ahora con indicador de actividad web2.0 compliant!