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:

<html>
  <head>
  <title>Ejemplo</title>
</head>
<script language="javascript"  type="text/javascript">
var RequestObject = false; 
  var Archivo = 'http://localhost/ajax.php'; //directorio donde tenemos el archivo ajax.php 
  window.setInterval("actualizacion_reloj()", 2000); // el tiempo X que tardará en actualizarse 
  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) 
  { 
  // obtener la respuesta 
  var msgs = RequestObject.responseText.split('|');
  // Buscamos la div con id online 
  document.getElementById("online").innerHTML = msgs[0];
  }
  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 , true);
  RequestObject.onreadystatechange = ReqChange;
  // Enviamos 
  RequestObject.send(null); 
  }
  function actualizacion_reloj() {
  llamadaAjax();
  }
</script>
<body onload="llamadaAjax();">
<h2>Usuarios Online </h2>
  <div id="online"></div>
</body>
</html> 


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.

Detalles sobre este artículo

Enviado por WebTutoriales.com:
Fecha Publicación: 25.03.2006
Este artículos ha sido visto 6.056 veces.
Vota este artículo:

  • Currently 4.00/5
  • 1
  • 2
  • 3
  • 4
  • 5

4.0/5 de 4 votos

Otros Artículos Relacionados

No hay artículos relacionados.

Enlaza Este Artículo Desde tu Web

El enlace se verá así: Actualizar el contenido en tiempo real con AJAX

Comentarios

Si tienes algún comentario o sugerencia, utiliza el formulario. Enviar Comentario

  COMENTARIOS
Posteado por 3rn3st0, el 14.05.2008, 09:15
Aún no uso el código del ejemplo, pero por lo que entiendo podría cubrir una necesidad que tengo. Por una parte, tengo una lista <li> con ítems que son sacados de una base de datos (categorías), necesito que al hacer clic sobre cada elemento, se actualice un <div> donde se haya el "cuerpo" de mi página. Sin embargo, no logro dar con la manera de hacerlo. Lo que muestras actualiza el contenido de manera automática, yo necesito hacerlo es luego de un clic. De antemano gracias por el auxilio que puedas darme y gracias por la información que constantemente publicas.