Benji
kerberoS
MarcosBLTutorial AJAX con mootools
Mucha gente cree que usar AJAX es difícil pero en realidad es facilísimo, lo que es difícil es aprender javascript para poder usar AJAX en condiciones.
Con mootools tenemos resueltas muchas dificultades, con muy pocas lineas podemos conseguir cosas muy curiosas.
Antes de ponernos hacer algo, hay que tener en cuenta 2 conceptos básicos sobre AJAX.
La codificación: Es lo mas jodido que tenemos nosotros (los que no escribimos en ingles), si usamos acentos o similar suelen aparecer caracteres raros, lo que pasa es que el navegador no sabe que tipo de codificación tiene que devolver ya que no es una pagina entera y no contiene el encode-type (<meta http-equiv="content-type" content="text/html; charset=UTF-8" />).
<?php header('Content-Type: text/html; charset=utf-8'); ?>El cache: Nuestro amigo el IE suele cachear todas las paginas y en el caso de AJAX si usas datos dinámicos no te servirá de nada, ya que mantiene el cache de la ultima carga. Para ello tienes dos opciones, enviar un argumento con algún parámetro dinámico (una fecha o un random) o enviar una cabecera de respuesta diciendo que no cachee el tema.
<?php header ("Cache-Control: no-cache, must-revalidate "); ?>Y dicho esto vamos a crear un cargador de paginas.
//mootools.js + cargar.js
//Pasamos 2 argumentos, el div donde cargaremos los datos y la ruta a cargar.
var cargar = function(el,ruta) {
el = $(el);
//mientras este cargando no enviamos mas peticiones
if(el.pg.hasClass('loading')) return false;
el.toggleClass('loading');
//estamos cargando
el.setHTML('Cargando datos...');
new Ajax(ruta, {
onComplete:function(e) {
el.toggleClass('loading');
//actualizamos contenedor
el.setHTML(e).effect('opacity').custom(0,1);
}
}).request();
return false;
}Con esta función tenemos resuelta toda la parte javascript que necesitamos. Ahora toca la parte del servidor, como ya mencione antes hay que tener en cuenta las dos cabeceras (codificación y cache) y para enviarlas usaremos PHP.
<?php
//mi_pagina.php
header('Content-Type: text/html; charset=utf-8');
header ("Cache-Control: no-cache, must-revalidate ");
?>
<p>Este es el texto html que queremos cargar.</p>
Por ultimo la parte de interacción con el usuario.
<a href="enlace_en_caso_de_no_usar_AJAX.html"
onclick="return cargar('box','mi_pagina.php');" title="Cargar">Cargar</a>
<!-- Donde cargaremos los datos -->
<div id="box"></div>Para mantener un poco de paz con aquellos que no tienen javascript activado usamos este tipo de enlaces. Con este ejemplo ya podrás usar AJAX en tus paginas web, con opacidad y todo :P.
Ver post
Comentar
Alex Barros#1 hace 613 días
Muchísimas gracias por echar esa mano. A la vez que he aprendido a usar la extensión ajax de MooTools, que es la librería que uso, he aprendido muchas cosas muy útiles, como hacer que explorer no cachée, o hacer enlaces para quin no tiene javascript activado.
estoy empezando con el JavaScript, y como soy muy ambicioso no paro de hacer aplicaciones, me ha venido muy bien el tutorial.
De corazón, muchas gracias.
ImZyos!#2 hace 613 días
Bastante bien, por no decir exelente, podrias extender un poco mas usando todas las opciones del hash.
Alex Barros#3 hace 613 días
Podrías especificar la opción de librería MooTools, o los "paquetes" necesarios?
A mi me funciona, pero no estaría mal saber los mínimos requerimientos para que funcione.
Un saludo.
IceBeat#4 hace 612 días
No hay de que Alex, para eso estamos :).
@ImZyos! cierto es que no utilizo todas las opciones, pero bueno para eso tenemos la documentación.
Pues creo que uso Element.js, AJAX.js y los efectos de STYLE. Mas o menos son aquellos que necesitamos habitualmente.
Un saludo.
show#5 hace 612 días
No tengo ni idea de esto pero se supone que en el header debe de estar cargado mootools entero o las 3 librerías que mencionas @4.
Me va a servir esto de incentivo para ponerme a aprender AJAX y demás. ;)
IceBeat#6 hace 612 días
@show es mejor que tengas el paquete completo, ya que puedes hacer muchas más cosas.
En tu html dond vayas a usar AJAX metes en el head los enlaces a la libreria. Los headers son para la carga dinamica.
ImZyos!#7 hace 612 días
@Alex Barros Para Ajax se necesitan Moo.js, Function.js, Array.js, String.js, Element.js no tiene mucho caso dividirla ya que no pesa mucho, y habra mucha documentacion pero anda como un ejemplo completo XD
IceBeat#8 hace 612 días
A la saca todo el paquete!! jejeje
Alvaro#9 hace 610 días
Se que soy un poco burro pero no lo saco adelante, tienes que hacer una página inicial con el script y el enlace y luego otra página php con el texto y las cabeceras a incluir no?
El problema es que al poner el enlace como indicas no me hace la carga en ajax sino que se va directamente a la página del enlace.
Muy buena página y un diseño muy bueno por cierto. Gracias!
Davis#10 hace 610 días
es una excelente pagina
Davis#11 hace 610 días
excelente
IceBeat#12 hace 610 días
Alvaro has incluido la libreria mootools en la pagina? puede ser por eso, no lo se.
aNieto2K#13 hace 602 días
Muy bueno tio!! :D
IceBeat#14 hace 601 días
Mas currao tienes tu tuto sobre el comienzo con mootools jeje.
ozzyfries#15 hace 597 días
Hi,
You don't need to use :
header ("Cache-Control: no-cache, must-revalidate ");
in the PHP response page. The moo's ajax is making a POST by default, so there's no need to worry about the cache (vs GET method).
If you really need to use the GET method, it's more browser-proof to use in the PHP response page :
session_start();
fausto pacheco#16 hace 577 días
Hi, can you please post an example of this.
Regards
juan#17 hace 536 días
hay algun tutorial de mootols, completo. Y algun lugar en donde esten todos los ".js" zipeados en la version compacta y con comentarios
IceBeat#18 hace 533 días
Juan pues en la web de mootools encontraras toda la documentación necesaria ademas de una utilidad para crear el js.
ARES1983#19 hace 485 días
Hola, a mi no me andubo el script como esta escrito en la pagina
para que me funcione necesite cambiar la linea que dice
if(el.pg.hasClass('loading')) return false;
por
if(el.hasClass('loading')) return false;
Ya que me tira el error " 'pg' es nulo o no es un objeto", sin el anda perfectamente.
Por cierto exelente pagina!
IceBeat#20 hace 482 días
Buen detalle @ARES1983 seguro que se me fue la pinza.
Se hace lo que se puede jeje.
angvp#21 hace 446 días
Cuando en JavaScript se usa responseText en el metodo de respuesta para luego usar innerHTML no estamos usando AJAX propiamente.
AJAX es la combinacion de las tecnologias JavaScript, y XML usando un objeto 'asynchronous' para obtener una respuesta XML y procesarla.
Este script y todos aquellos que usen responseText e innerHTML no son propiamente AJAX sino mas bien AXAH o AJAH
para mas informacion revisa este link
http://en.wikipedia.org/wiki/AHAH
Esta mal que confundan terminos, casi hoy en dia existen muchos que se hacen programadores en tecnologias como AJAX y no conocen nada de Document Object Model :/
Saludos, muy bueno el diseño de tu web.
IceBeat#22 hace 446 días
@angvp jeje eres un purista no?
Me alegra ver gente asi por estos lares.
Es cierto lo que comentas e incluso en mootools han creado una clase JSON independiente de la clase AJAX.
Esta claro que primero es la harina y luego va el pan.
Pero creo que como tutorial de iniciación a la libreria Mootools cumple su función.
Saludetes.
interface_06@hotmail.com#23 hace 446 días
aki no hay nda de juegos para las consolas
IceBeat#24 hace 446 días
Mmm juegos? google?
Welk#25 hace 431 días
En el tutorial ajax con mootools no conseguí que me salieran las tildes en español aun poniendo la codificación a utf-8, probé cambiarlo por charset=iso-8859-1 y voilá!!!!
Que buenos tutoriales hace este niño
IceBeat#26 hace 430 días
La codificiación da verdaderos dolores de cabeza, yo normalmente suelo pasar todo a sus entidades, para luego no me pasen cosas raras.
samuel#27 hace 417 días
nice (y)
Danny#28 hace 387 días
Excelente web
Gabriel#29 hace 374 días
Hay algun modo de tomar con mootools y su funcion ajax o xhr, un XML y poder manejar los datos que devuelve (ej: insertar el valor de un nodo en un H3)??
no encontre documentacion que me pueda ayudar y me termine pasando a prototype donde si pude hacer lo que queria.
ImZyos!#30 hace 371 días
claro qeu lo hay
$('elemento').setText(repuesta de ajax)
Danny#31 hace 354 días
No pude hacer funcionar el ejemplo ni en PHP ni tampoco en ASP. Alguien tiene los archivos del ejemplo que me puedo mandar a mi correo porfavor.
Gracias y muy buena pagina, los Felicito.
AyllonDark#32 hace 310 días
Hola a todos pues navegando por la web llege aki y la verdad k aki he encontrado respuestas concretas a lo q es Mootools pues la verdad q me interesa pues kiero experimentar con MooTools,tengo aplicaciones en AJAX y pues. pero hay un CSS k me parecio interesante pero lo q no se pues es como llamarlo desde mi php pues las otras CSS como de estilos y mas son mas sencillas en llamar. Miren este CSS hace un Menu de Mensajes o bnoticias dinamico q parece en flash. en estas noticias van subiendo una por una en el cuadro bueno mejor dense una pasada por la pagina de donde la saque:
http://www.dynamicdrive.com/dynamicindex2/crosstick.htm
Lo copiaria aki pero no kiero hacer SPAM
Bueno espero me ayuden a saber como poder llamar a esa CSS desde un archivo .php . pues para poder conectar las noticias dedes una BD
AyllonDark#33 hace 310 días
@nhttp://www.dynamicdrive.com/dynamicindex2/crosstick.htm
Diego Martorelli#34 hace 185 días
estaba buscando lo del header para el charset, me vino de 10, el resto no lo leí pero eso era lo que estaba buscando, saludos
Mario Rojas#35 hace 129 días
¡ Felicitaciones !
Muy buen diseño y muy buen contenido
IceBeat#36 hace 123 días
@Mario Rojas gracias mister
manu#37 hace 50 días
muy bueno muchas gracias!!!
Pcrusal#38 hace 31 días
Brother alguiens abe proque nio puedo cargar unxml directamente usando xhr o ajax
Diego#39 hace 4 días
Hola!
Estoy probando el ejemplo que has puesto, pero obtengo el siguiente error: el.setHTML is not a function
El error me lo da en la siguiente linea:
el.setHTML('Cargando datos...');
Alguna sugerencia?
Desde ya muchas gracias!
Diego.-
IceBeat#40 hace 3 días
Diego el ejemplo solo funcionaria para la version 1.1 de Mootools, con la nueva versión ha cambiado sustancialmente la nomenclatura de algunas cosas. Sin duda se avecina un tutorial con este mismo ejemplo para la 1.2