Carga del contenido de una página HTML con AJAX

Añade Tu Web Al Directorio de NocionDigital.com

Este es un primer ejemplo del funcionamiento de AJAX y la carga de información de una página HTML a otra medienate AJAX.

Primero creamos el objeto AJAX con:

       _{ajax=crearAjax();}

que hace una llamada a la función crearAjax(); que ya expliqué en "AJAX y el objeto XMLHttpRequest"

Una vez creado el objeto, se carga la información de una página HTML (en esta página HTML puede haber cualquier contenido)

       _{ajax.open("GET", "ej_ajax.html",true);}

y se pasa el contenido a la etiqueta DIV que tiene como nombre "content"

       _{content.innerHTML = ajax.responseText}

_{<html>
<head>
<title>Carga de datos</title>
</head>

<script language="javascript">
function crearAjax()
{
   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 Contenido()
{
   var contenedor;
   contenedor = document.getElementById('content');

    // creamos un nuevo objeto ajax
    ajax=crearAjax();

    //cargar el archivo html por el método GET
    ajax.open("GET", "ej_ajax.html",true);

    ajax.onreadystatechange=function()
    {
        if (ajax.readyState==4) // Readystate 4 significa que ya acabó de cargarlo
        {
            content.innerHTML = ajax.responseText
        }
    }
    ajax.send(null)
}

window.onload= function()
{
    Contenido();
}
</script>

<style type="text/css">
#content{
border: 1px solid #336699;
padding: 10px;
margin: 14px;
}
</style>
<body>

        Cargaremos la página <a href="ej_ajax.html">ej_ajax.html</a> en el siguiente div:

        <div id="content"></div>

</body>
</html>}