Que fácil es AJAX con Prototype

septiembre 9, 2007 at 2:38 pm 10 comentarios

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 VideosTe VerdeVideos 3GP3GPsomos tu y yo

Entry filed under: JavaScript - AJAX, Prototype, Recursos, Scriptaculous, Web 2.0. Tags: .

Un niño mexicano fue registrado con el nombre de Yahoo Reiniciar Linux en forma segura en caso de Bloqueo

10 comentarios Add your own

  • 1. AbdelioR  |  septiembre 14, 2007 a las 4:50 am

    Hola, estoy toqueteando esto de ajax.. y me gustaria ver si me puedes hechar un cable. Actualmente uso prototype en mi web, y me gustaria implementar la funcion de refresco automatico.

    Si no es mucha molestia contestame por correo🙂

    Gracias.

    Responder
  • 2. Victor San Martin  |  septiembre 14, 2007 a las 10:10 am

    @AbdelioR: El refresco automático, como lo mencionas, se logra hacer con Ajax.PeriodicalUpdater, en este indicas la url que hará el llamado, opciones varias incluyendo el tiempo de refresco, es decir le indicas cada x segundos quieres que vuelva a realizar la petición.

    EJ:
    new Ajax.PeriodicalUpdater(‘mydiv’, ‘/foo/bar’, {asynchronous:true, frequency:2});

    Saludos

    Responder
  • 3. maderic_m  |  enero 14, 2008 a las 6:46 am

    Hola, estoy usando un ejemplo parecido pero no me funciona en IE en firefox funciona bien pero en IE lo carga una vez y después ya no actualiza nada, acá adjunto el código:
    function recargar(){
    var url = “ajax.php”;
    var pars = “op=recargar”;
    $(‘div_scroll’).innerHTML = ”;
    var myAjax = new Ajax.PeriodicalUpdater( “div_scroll”, url, { method: “get”,
    parameters:pars,
    frequency:’10’
    }
    );

    }

    function alta_mensaje(){
    var mensaje = $F(‘comentario_inicio’);
    var usuario = $F(‘usuario_inicio’);
    var url = “ajax.php”;
    var pars = “op=recargar&,mensaje=”+mensaje+”&usuario=”+usuario;
    var ajaxRequest = new Ajax.Request(
    url,
    {
    method: “post”,
    parameters: pars,
    onComplete: function(resp){
    recargar();

    }

    });
    }

    si alguien tiene una solucion se lo agradesco, un saludo

    Responder
  • 4. frank  |  julio 21, 2008 a las 6:24 pm

    Com periosdical update en IE tienes que hacer POST no GET.
    Con POST funciona bien

    Responder
  • 5. prometion  |  febrero 1, 2011 a las 10:05 am

    tengo una duda de como cargar simultaneamente 2 funciones llamadas desde un botón. os pongo el código a ver si podeis ayudarme.

    ***********La llamada parte de aqui*************
    <a href="javascript:Envia2(,’menucarga’,,’cuerpo’)” title=>
    ******************************************************
    **esta función llama a lo que habeis puesto arriba***
    function Envia2(_pagina,capa,_pagina2,capa2) {
    setContent(_pagina,capa);
    setContent(_pagina2,capa2);
    }

    ***el problema que tengo es : me carga 1 pero el menú izquierdo no me lo carga que sería el contenido de:
    $menusup2[0];?>,’menucarga’
    *** por contra**
    $menusup2[1];?>,’cuerpo’
    ***si lo carga a ver si puede ayudarme alguno.

    Responder
  • 6. prometion  |  febrero 1, 2011 a las 10:07 am

    voy a pegar la llamada porsiacaso hay dudas parece que no se pegó bien:
    <a href="javascript:Envia2(,’menucarga’,,’cuerpo’)” title=>

    Responder
  • 7. prometion  |  febrero 1, 2011 a las 10:07 am


    <a href="javascript:Envia2(,’menucarga’,,’cuerpo’)” title=>

    Responder
  • 8. prometion  |  febrero 1, 2011 a las 10:08 am

    >

    Responder
  • 9. prometion  |  febrero 1, 2011 a las 10:09 am

    nosé porque no me deja pegarlo bien, pero vamos que sin llamar a 2 etiquetas me funcionaba perfectamente la función. en cambio ahora no vá si llamo desde una función a otra para que ejecute las cargas.

    Responder
  • 10. prometion  |  febrero 2, 2011 a las 4:51 am

    He descubierto que no carga la variable lang y por eso las páginas del cuerpo no cargan variables.

    Responder

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Trackback this post  |  Subscribe to the comments via RSS Feed



A %d blogueros les gusta esto: