Primera Aplicación con AJAX

AJAX

Hola amigos, ya en un post anterior hablamos de lo que era AJAX, en esta ocasión veremos como podemos cargar en un div de nuestro html texto y una imagen sin  necesidad de recargar nuestra página, la cual es el principal objetivo al momento de hacer AJAX, así que veamos:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<html>
<head>
    <title>Aplicacion1 AJAX</title>
</head>
<body>
    <div class="panel-heading">Aplicacion 1 AJAX</div>
    <button type="button" onclick="Cargar();">Cargar</button>

    <div id="principal"></div>
</body>
<script type="text/javascript">
function Cargar () {
    var xmlhttp;
    if (window.XMLHttpRequest)
    {
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("principal").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","ajax_info.txt",true);
    xmlhttp.send();
}
</script>
</html>

Como podemos ver en el código anterior nuestra pagina cuenta solo de un botón (por efectos de practicidad) que hace el llamado a la función Cargar con el evento Onclick de JavaScript, así mismo con la variable xmlhttp hacemos el procesamiento mediante AJAX de nuestro archivo de texto, para luego referenciar el div “principal” y cargar los datos, cabe decir que si incluimos html en nuestro archivo de texto este será procesado y mostrado en la página, un ejemplo insertando una imagen:
ajax

Si este post fue de ayuda para ti, no olvides dejar un comentario, también puedes contar tu experiencia o lo que estés haciendo. Nos ayuda a seguir creciendo. ¡Vamos!, solo te llevará 1 minuto.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *