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

Share

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

Posts Relacionados

Total de Comentarios: 11

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

Avatar
13/01/2011
9:41 pm

muy buenooo

Avatar
21/01/2011
10:29 pm

genial, si funciona xDe
esto lo pueden usar en pwg por que no usa php :)

Avatar
21/01/2011
11:57 pm

Gracias por el comentario =)

Avatar
18/10/2011
1:42 am

malisimo te dijo xq no termina de cargar seria bueno crearle un ciclo que cada ves qeu llege un dato actualize no todo el momento este cargando

    Avatar
    18/10/2011
    1:49 am

    Para que sepa si llego un dato tendría que hacer otro select a la base de datos y comprobar si hay otro dato, pero el código lo podes adaptar a tus necesidades. También podes hacer que cada vez que apreten en un icono que sea para resfrescar el contenido se refresque.

    Saludos

Avatar
20/12/2011
6:35 pm

hola amigos, disculpen necesito ayuda eso mismo estoy buscando como loco pero no encuentro lo que dijo el amigo jstoni, yo quiero hacer un actualizador que busque haber si hay nuevos datos para ctualizar ejemplo como el twitter que dice hay tantos tweet y buysca el base de datos para mostrar, le agradezcoi bastante si me ayudan, gracias!

Avatar
20/12/2011
7:29 pm

Por ahi esto te sirve:

http://www.marcofbb.com.ar/ver-mas-al-estilo-twitterfacebook/

Lo que podes hacer es que cuando alla datos haga un conteo y lo imprima en un div.

Salu2

Avatar
Yuuki
13/11/2012
7:48 pm

Hola, es muy buena aportación, no sé si podrías ayudarme en algunas dudas que tengo..
Tngo que actualizar el contenido de una página Web por ejemplo tiene que habilitar un link, un botón el 3 de diciembre (X fecha]) o quitar un botón de una "convocatoria" al día siguiente que se puso, todo d forma automatica claro esta. no tengo bien la idea de cómo hacer el código :(

Avatar
xoceunder
19/08/2013
1:49 pm

muy bueno pero no es en tiempo real si fuera como este seria muy bueno

http://www.forosdelweb.com/f127/aporte-como-hacer-tiempo-real-con-ajax-833915/


Enviar Comentario

(*)

(*)