[Ajax] Usando peticiones Ajax con Mootools

Ajax,Ajaxman,Javascript,Mootools,Programacion

Tendré que hacer una comparación para ver cual framework es la que trabaja mejor, y es que viendo bien a Mootools me he quedado encantado.

mootools

Tal vez siga usando Jquery por que realmente me gusta la forma en la que uno la puede usar digamos en pocas palabras es simple, pero la única pega que a veces tenemos es el peso, y recordemos que el peso tiene que ver con la experiencia del usuario, y a veces unos cuantos Kbs de Javascript, puede transformase en alejarse de nuestro sitio web/Blog.

Ahora bien veamos como usarla para poder hacer peticiones XMLHttpRequest osea Ajax.

Como primer paso necesitaremos Descargarnos Mootools de Aquí:

http://mootools.net/download

Ahí hay que elegir los componentes que deseamos bajar, ya que esta librería esta como segmentada.

Debemos elegir solamente Ajax, ya que una vez eligiendo este componente, Mootools carga sus dependencias de componentes automaticamente.

Una vez que hemos bajado el Framewokr vamos a proceder a usarlo “en caliente” o sea sin tanta explicación y saben por que, bueno pues por que su uso es muy fácil, en cuanto tenga un poco mas de tiempo explicare mejor como funciona el core de esta libreria

Primero incluiremos la Librería Mootools

PLAIN TEXT
HTML:

  1. <script type=“text/javascript” src=“mootools-release-1.11.js”></script>

Posteriormente necesitaremos nuestro código html

PLAIN TEXT
HTML:

  1. <h3>Ejemplo Ajax</h3>
  2. <p><a id=“peticion” href=“#”>Click Aqui</a> para procesar la peticion ajax</p>
  3. <div id=“resultado”>
  4.     <p>Esperando respuesta…….</p>
  5. </div>

El funcionamiento de este ejemplo es el siguiente, al darle click a el elemento con el ID “peticion”, nos hará una petición ajax y el resultado de este proceso lo mostrara en la capa(div) identificada con el id “resultado”

Como ya tenemos el HTML que usaremos ahora nos falta el Javascript, que actuara en conjunto con Mootools

PLAIN TEXT
JAVASCRIPT:

  1. $(‘peticion’).addEvent(‘click’, function(e) {
  2.     e = new Event(e).stop();
  3.     var url = “pagina2.php”;
  4.     /**
  5.      * la url en cuestion
  6.      */
  7.        /*
  8.    * nuevo objeto ajax
  9.     */
  10.     new Ajax(url, {
  11.         method: ‘get’,
  12.         // metodo ajax get o post
  13.         update: $(‘resultado’)
  14.         // donde se va  a insertar el resultado
  15.     }).request();
  16. });

Y listo

Creo que no hay mucho mas que explicar, de todos modos si tiene dudas ya saben por algo están los comentarios.

Prometo mas manuales/ayudas sobre el Framework Mootools, que seguro sera de gran ayuda en nuestros desarrollos.

Con información | Mootools Ajax

Leave a Comment

Your email address will not be published. Required fields are marked *