Actualizar el contenido en tiempo real con AJAX
Prohibida la reproducción total o parcial de este artículo sin el previo consentimiento de Webtutoriales.com
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. 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 suele usarse, aunque no es el más elegante, puedes aunque 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 el cache: Estas instrucciones deben ponerse arriba del todo del archivo php que llamemos.
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)
{
// 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();
}
</script>
<body onload="llamadaAjax();">
<h2>Usuarios Online </h2>
<div id="online"></div>
</body>
</html>
<?header('Cache-Control: no-cache');
header('Pragma: no-cache');?>
Detalles sobre este artículo
Enviado por WebTutoriales.com:
Fecha Publicación: 25.03.2006
Este artículos ha sido visto 17.919 veces.
Vota este artículo:
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 |
 |