Carga dinámica de contenido HTML con XMLHttpRequest

| www.blogonautia.tk ©2007-2008

extraido de:fuente <----a

Mar, 2008-07-08 09:58 — jalbusac

El objetivo principal de este mini tutorial es describir cómo podemos cargar código HTML de forma dinámica con el objeto XMLHttpRequest; todo ello sin necesidad de que la página recargue todo su contenido. No me centraré en hablar sobre AJAX ya que hay multitud de páginas que hablan sobre ello.

Veamos un ejemplo en el que disponemos de un menú con tres enlaces y una zona central donde se muestran los contenidos (dependiendo de la pestaña o enlace que pulse el usuario se mostrará un contenido u otro). Aunque visualmente dé la sensación de que la página no se recarga, con el objeto XMLHttpRequest podemos realizar peticiones en segundo plano al servidor. En primer lugar debemos crear el objeto XMLHttpResquest; su creación varía en función del navegador en uso:

<script language=”javascript”>
var xmlhttp = false;
try{
//comprobamos si es IE
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();
}
</script>

Una vez que el objeto XMLHttpResquest ha sido creado, podemos comenzar a trabajar con él para realizar peticiones al servidor. Para este ejemplo, antes de utilizarlo, necesitamos otra serie de ingredientes para completar la receta, como son el menú desplegable con los diferentes enlaces y la capa donde se cargará el contenido de forma dinámica.

Creación del menú:

<select id="menu" name="menu" onchange="javascript:cambiaTexto();">
 <option value="pagina1.html">Texto 1</option>
 <option value="página2.html">Texto 2</option>
 <option value="pagina3.html">Texto 3</option>

</select>

Es muy importante que cuando creemos el menú le asociemos un nombre y sobre todo un identificador (id), ya que será necesario para recuperar su valor desde javascript. También asociamos al menú el evento onchange, de tal forma que, cuando cambie su estado (se seleccione una opción diferente) se produzca la llamada a una función, en este caso la hemos denominado cambiaTexto().

Creación de la capa donde se cargará el contenido de forma dinámica:

<div id="texto" name="texto" width=”500” height=”400”></div>

Al igual que ocurría con el menú, también es necesario asociar un identificador para la capa (creada con la etiqueta ). Una vez que tenemos los ingredientes preparados ya podemos implementar la función en código JavaScript que se encargará de variar el contenido de la capa utilizando el objeto XMLHttpRequest.

Función cambiaTexto():

function cambiaTexto(){ 
 var menu = window.document.getElementById("menu");
 var capa = window.document.getElementById("texto"); 
 xmlhttp.open("GET", menu.value);
 xmlhttp.onreadystatechange = function(){
  if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
   capa.innerHTML = xmlhttp.responseText;   
  }  
 }
 xmlhttp.send(null);    
}

Para poder manipular el menú y la capa creada con código HTML, utilizamos la función getElementById. El valor actual del menú contendrá el enlace de la página que hemos elegido menu.value. Por tanto, podemos hacer la petición del contenido de dicha página con el objeto xmlhttp y la función open. Además, podemos apreciar que en este ejemplo hemos realizado la petición con el método GET, pero es importante saber que no es la única forma, ya que existe varios métodos: GET, POST, HEAD, DELETE, TRACE, OPTIONS y CONNECT.

Finalmente, cuando la petición es satisfecha podemos cargar el contenido que ha sido solicitado en la capa (capa.innerHTML = xmlhttp.responseText)

Como hemos podido apreciar en este breve tutorial, AJAX se basa principalmente en el uso del objeto XMLHttpResquest. Además, se ha descrito cómo cargar en una capa contenido html de forma dinámica sin recargar todo el contenido de la página principal. Por otra parte, también podemos destacar que la combinación de AJAX y PHP es sencilla y de gran utilidad; en este ejemplo, hemos utilizado el objeto XMLHttpResquest para solicitar páginas html pero, de la misma forma, podríamos haber solicitado páginas PHP que accedan a una base de datos, recuperar información y construir código HTML de forma dinámica. El uso de AJAX cobra sentido cuando tenemos la intención de crear aplicaciones web similares a las aplicaciones de escritorio.

Referencias:

• Introducción a AJAX con PHP. Babin, Lee (Ed. Anaya Multimedia). 2005.