Como rellenar un DIV usando Ajax

En vez de refrezcar la pagina completamente, en la mayoria de las casos conviene solo hacerlo donde sea necesario, manteniendo el resto intacto.

Con este ejemplo voy a demostrar el poder de Ajax.
Es un simple HTML con un poco de Javascript
En el BODY agregue tres DIVs (div_1, div_2 y div_3) y un boton que al ser clickeado llama a la funcion "RellenarDIV"
Esa funcion lo que hace es crear una instancia del objeto Ajax para pedir asincronicamente el contenido de datos.html
Finalmente ese contenido lo deposito dentro de div_2

Aclaracion: para probar este ejemplo es necesario que lo hagas hosteandolo en tu servidor web

 

Archivo "prueba.html":

<html><head><title>Como rellenar un DIV usando Ajax</title>
<script type="text/javascript">
    function RellenarDIV() {
        var Ajax        = new XMLHttpRequest();
        var DIV_Destino = document.getElementById("div_2");
        Ajax.open("GET", "datos.html", true);        // true = asincronico, no espera a que finalice
        Ajax.onreadystatechange = function() {
            if(Ajax.readyState==4 && Ajax.status==200) {
                DIV_Destino.innerHTML = Ajax.responseText;
            }
        }
        Ajax.send();
    }
</script>
</head>
<body>
<input type="button" value="Rellenar abajo" onclick="RellenarDIV()">
<div id="div_1">Esto esta dentro de DIV 1</div>
<div id="div_2">Esto esta dentro de DIV 2 pero no por mucho tiempo...</div>
<div id="div_3">Esto esta dentro de DIV 3</div>
</body></html>

 

Archivo "datos.html":

<html>
Saludos desde www.lucianoaibar.com !
</html>

Comentarios