Actualizar el contenido en tiempo real con AJAX

Tutorial indispensable que sirve como punto de partida para hacer llamamientos a archivos remotos en tiempo real sin que el usuario tenga que actualizar el navegador

Con este tutorial sobre AJAX comprobaremos lo fácil que es actualizar el contenido de una página web en tiempo real sin que un usuario tenga que actualizar el navegador.

La idea es muy simple, javascript se encarga de llamar remotamente a un archivo, ejecutarlo para luego extraer la información y mostrarla en nuestra página de forma transparente para el usuario.

El archivo a llamar puede contener la información que queráis por ejemplo puede ser un contador de usuarios online. Para simplificar y ver cómo funcionará el resultado de este tutorial os recomiendo crear un archivo llamado ajax.php, ponemos un número cualquiera (en un caso real el archivo ajax.php contendría el código para contar los usuarios online) y guardaremos el archivo.

Ahora creamos un archivo llamado codigo.php con este código:

var RequestObject = false;
//directorio donde tenemos el archivo ajax.php
var Archivo = 'http://localhost/ajax.php';

// el tiempo X que tardará en actualizarse
window.setInterval("actualizacion_reloj()", 2000);

if (window.XMLHttpRequest) RequestObject = new XMLHttpRequest();
if (window.ActiveXObject) RequestObject = new ActiveXObject("Microsoft.XMLHTTP");

function ReqChange() {
  // Si se ha recibido la información correctamente
  if (RequestObject.readyState==4) {
  // si la información es válida
    if (RequestObject.responseText.indexOf('invalid') == -1) {
    // Buscamos la div con id online
      document.getElementById("online").innerHTML = RequestObject.responseText;
    } else {
    // Por si hay algun error document.getElementById("online").innerHTML = "Error llamando";
    }
  }
}

function llamadaAjax() {
  // Mensaje a mostrar mientras se obtiene la información remota...
  document.getElementById("online").innerHTML = "";
  // Preparamos la obtención de datos
  RequestObject.open("GET", Archivo+"?"+Math.random() , true);
  RequestObject.onreadystatechange = ReqChange;
  // Enviamos
  RequestObject.send(null);
  }

  function actualizacion_reloj() {
  llamadaAjax();
}

Usuarios Online

Resumiendo, el contenido del archivo ajax.php se cargará dentro de la etiqueta div con id online del archivo código.php . Este sencillo ejemplo es la base para crear muchas otras utilidades interactivas más complejas.

• Atención: En algunos navegadores como IE8 cachea las llamadas por el método GET, es por esto que en la función llamadaAjax(), al llamar el archivo ajax.php le pasamos como parámetro un valor diferente cada vez para que crea que es otro archivo. Este método no es nada elegante. Porque aunque es difícil, se podría repetir el valor aleatorio. Para solucionar esto lo mejor es que el archivo que se llama en este caso ajax.php contenga en la cabecera alguna instrucción que deshabilite la cache:

<?
 header("Cache-Control: no-cache");
 header("Pragma: no-cache");
?>

Estas instrucciones deben ponerse arriba del todo del archivo php que llamemos.

Por último, decir que este método es el que se usaría con javascript puro solamente. Hoy día es recomendable utilizar frameworks como JQuery que nos ahorran mucho código y facilitan hacer llamadas remotas.