Marcofbb Noticias y Artículos Webmasters



Publicidad marcored

Actualizar contenido Ajax

  • 13/01/2011
  • 1:53 am
  • marcofbb

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 AJAX</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.

Creditos: kapry

¿Necesitas ayuda? o ¿Asesoramiento webmaster? Registrate en nuestro foro de consultas

Posts Relacionados

Total de Comentarios: 12

Avatar
13/01/2011
2:15 am

Información Bitacoras.com…

Valora en Bitacoras.com: 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 tu…..


Enviar Comentario

(*)

(*)