Cristalab

Estás en: Cristalab > Tutoriales > Precarga (preloader) en AJAX

Precarga (preloader) en AJAX

Por: dave73
20 de Julio del 2006
CSS y Javascript
860 de clabLevel
Otros artículos de dave73
93,437 visitas

Es fundamental, durante procesos largos de carga de datos, incluir un método para informar al usuario el estado del proceso. Lo más común es un "preloader". El método AJAX nos da la posibilidad de hacer un preloader simple. De cada uno depende darle estilo y buen gusto, y lograr un efecto profesional.

Antes de empezar, es necesario recordar que este documento se basa en el Tutorial de AJAX (Asynchronous Javascript and XML), realizado por Sisco. Usaré el mismo ejemplo, sólo cambiaré algunos valores en el CSS y el documento de Javascript. No es necesario recordar que se requieren conocimientos previos en HTML, Javascript y CSS, pero sí es necesario que lean el tuto de Sisco antes de este.

Conceptos

Al realizar la petición para cargar contenidos, se invoca al evento "onreadystatechange". Este contiene unas sentencias capaces de establecer el "estado" de la carga. Veamos las propiedades disponibles:

Comenzando

Con lo anterior dado por entendido, nos disponemos a empezar. Primero, entendamos la "técnica" a utilizar: mediante propiedades y eventos, haremos un preloader simple usando CSS para colocar una imágen representativa de la carga. Disponemos de un documento con 3 divs. Un menú, el contenido y el preloader.

El HTML

La index tendrá el siguiente formato:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Preloader en AJAX</title>
<link href="estilo_ajax.css" rel="stylesheet" type="text/css" />
<script language="javascript" type="text/javascript"></script>
</head>
<body>
<div id="menu"><a href="javascript:Cargar('texto1.html');">Texto 1</a><br />
  <a href="javascript:Cargar('texto2.html');">Texto 2</a></div>
<div id="contenido">Aquí se cargará el contenido.</div>
<div id="preloader">Este es el preloader</div>
</body>
</html>

Como ven, están las 2 divs que mencionamos antes. En el menú se hacen links a la funcion Javascript encargada de cargar el contenido. Le enviamos la URL del archivo como un parámetro. Dentro de las estiquetas "Script", irá el código de Javascript que mencionaré más adelante. También se puede ver la referencia al archivo CSS, que también mencionaré luego.

El Javascript

Nuestro script está conformado por dos funciones básicas: la primera crea el objeto XMLHttpRequest y la segunda, carga el contenido en la div correspondiente. Verán que cambiamos el estilo de la div "preloader" mediante Javascript. La idea es agregar una imagen representativa del proceso de carga, tanto al principio como al final de la misma. Para esto utilicé dos pequeños gifs, invocados durante los eventos de carga.

Trataré de comentar aquellas cosas que considere como "nuevas" y que no hayan sido explicadas en el tutorial al cual hago referencia, aunque no creo que sea necesario. 

function NuevoAjax(){
        var xmlhttp=false;
        try{
                xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        }catch(e){
                try{
                        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }catch(E){
                        xmlhttp = false;
                }
        }

        if(!xmlhttp && typeof XMLHttpRequest!='undefined'){
                xmlhttp = new XMLHttpRequest();
        }
        return xmlhttp;
}

function Cargar(url){
        var contenido, preloader;
        contenido = document.getElementById('contenido');
        preloader = document.getElementById('preloader');
        //creamos el objeto XMLHttpRequest
        ajax=NuevoAjax(); 
        //peticionamos los datos, le damos la url enviada desde el link
        ajax.open("GET", url,true); 
        ajax.onreadystatechange=function(){
                if(ajax.readyState==1){
                        preloader.innerHTML = "Cargando...";
                        //modificamos el estilo de la div, mostrando una imagen de fondo
                        preloader.style.background = "url('loading.gif') no-repeat"; 
                }else if(ajax.readyState==4){
                        if(ajax.status==200){
                                //mostramos los datos dentro de la div
                                contenido.innerHTML = ajax.responseText; 
                                preloader.innerHTML = "Cargado.";
                                preloader.style.background = "url('loaded.gif') no-repeat";
                        }else if(ajax.status==404){
                                preloader.innerHTML = "La página no existe";
                        }else{
                                //mostramos el posible error
                                preloader.innerHTML = "Error:".ajax.status; 
                        }
                }
        }
        ajax.send(null);
}

El CSS

Aquí no hay mucho que explicar. En todo caso, si tienes dudas, puedes postearlas en el foro o revisar los tutoriales de CSS que hay disponibles.

body{
        background:#3366CC;
        font-family:Arial, Helvetica, sans-serif;
        font-size:10px;
        padding:20px;
        text-align:center;
}

#contenido{
        border:solid 1px #999999;
        margin:10px auto;
        padding:10px;
        width:400px;
        height:400px;
        //agrega scrolls en caso de ser necesario.
        overflow:auto; 
        float:left;
}

#menu{
        border:solid 1px #999999;
        background:#9999CC;
        margin:10px;
        padding:5px;
        width:100px;
        float:left;
}

#preloader{
        border:solid 1px #999999;
        margin:10px;
        width:200px;
        height:14px;
        padding:0;
        float:left;
}

Notas

Información adicional

Archivos del tutorial
Si tienes alguna pregunta de este tutorial; puedes hacerla aqui en los foros

Tutoriales relacionados