Que fácil es AJAX con Prototype

AJAX, quien no ha oído hablar de AJAX o a leído algo acerca. Esta es una de las tecnologías fundamentales de la web 2.0 y la rama que mas se quiere aprovechar y potenciar para las próxima etapa, web 3.0. Ahora les explicare otra razón mas de porque un framework nos ayuda tanto, a optimizar recursos y ser mas productivos.

Antiguamente, y ni tan antiguo, uno creaba un largo código para ocupar ajax, por ejemplo.

function newAjax(){
   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 setContent(page, container)
{
   container = document.getElementById(container);
   ajax=newAjax();
   ajax.open("GET", "/pages/"+page,true);
   ajax.onreadystatechange=function() {
      if (ajax.readyState==4) {
         container.innerHTML = ajax.responseText
      }
   }
   ajax.send(null)
}

Si se fijan es un código extenso y que obviamente tiene errores, ya que solo es capaz de crear un solo objecto XMLHttpRequest, es decir si uno realiza dos llamadas simultaneas realizaba ambas pero se sobreescribían, teniendo resultados inesperados y desconcertadores. Pues con Prototype es tan simple como esto:

function setContent(page, container)
{
   new Ajax.Updater(container, "/pages/"+page);
}

Simplemente con una linea podemos hacer lo mismo, y aquí ya no tendremos el error que comente anteriormente. Con Ajax.Updater primero identificamos el id el contenedor que actualizaremos, después la dirección del documento que llamamos, y hay un tercer parámetro que son sus opciones, que pueden ver en mas detalle en la wiki de scriptaculous.

Como para extender mas las funcionalidades, contamos por ejemplos con Ajax.Request, que es el encargado de realizar la consulta, este no inserta el contenido devuelto automáticamente, simplemente tiene parámetros como onComplete con el cual podemos definir que hacer con el contenido, bastante practico si queremos hacer por ejemplo un sistema de identificación. Además tenemos Ajax.PeriodicalUpdater, que es muy similar a Ajax.Updater, solo que nos da un parámetro extra con el cual podemos hacer que se actualiza cada n segundos.

Si ven las opciones son varias, la herramienta esta, solo falta que la ocupes, y como dije en otro articulo, el limite solo lo pones tu.

Enlaces:

Ajax en scriptaculous
Prototype JS
.

Ver Videos – Te Verde – Videos 3GP – 3GP – somos tu y yo