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.
Comentarios
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.
# · Alex Barros · hace 1907 días
Bastante bien, por no decir exelente, podrias extender un poco mas usando todas las opciones del hash.
# · ImZyos! · hace 1906 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.
# · Alex Barros · hace 1906 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.
# · IceBeat · hace 1906 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. ;)
# · show · hace 1906 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.
# · IceBeat · hace 1906 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
# · ImZyos! · hace 1905 días
A la saca todo el paquete!! jejeje
# · IceBeat · hace 1905 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!
# · Alvaro · hace 1903 días
es una excelente pagina
# · Davis · hace 1903 días
excelente
# · Davis · hace 1903 días
Alvaro has incluido la libreria mootools en la pagina? puede ser por eso, no lo se.
# · IceBeat · hace 1903 días
Muy bueno tio!! :D
# · aNieto2K · hace 1896 días
Mas currao tienes tu tuto sobre el comienzo con mootools jeje.
# · IceBeat · hace 1894 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();
# · ozzyfries · hace 1891 días
Hi, can you please post an example of this.
Regards
# · fausto pacheco · hace 1870 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
# · juan · hace 1830 días
Juan pues en la web de mootools encontraras toda la documentación necesaria ademas de una utilidad para crear el js.
# · IceBeat · hace 1827 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!
# · ARES1983 · hace 1779 días
Buen detalle @ARES1983 seguro que se me fue la pinza.
Se hace lo que se puede jeje.
# · IceBeat · hace 1775 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.
# · angvp · hace 1740 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.
# · IceBeat · hace 1740 días
aki no hay nda de juegos para las consolas
# · interface_06@hotmail.com · hace 1740 días
Mmm juegos? google?
# · IceBeat · hace 1739 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
# · Welk · hace 1724 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.
# · IceBeat · hace 1723 días
nice (y)
# · samuel · hace 1711 días
Excelente web
# · Danny · hace 1681 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.
# · Gabriel · hace 1668 días
claro qeu lo hay
$('elemento').setText(repuesta de ajax)
# · ImZyos! · hace 1665 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.
# · Danny · hace 1648 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 · hace 1603 días
@nhttp://www.dynamicdrive.com/dynamicindex2/crosstick.htm
# · AyllonDark · hace 1603 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
# · Diego Martorelli · hace 1479 días
¡ Felicitaciones !
Muy buen diseño y muy buen contenido
# · Mario Rojas · hace 1423 días
@Mario Rojas gracias mister
# · IceBeat · hace 1417 días
muy bueno muchas gracias!!!
# · manu · hace 1343 días
Brother alguiens abe proque nio puedo cargar unxml directamente usando xhr o ajax
# · Pcrusal · hace 1325 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.-
# · Diego · hace 1298 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
# · IceBeat · hace 1296 días
No lo entiendo demasiado bien, es todo en un mismo archivo php? en archivos html y php? agradeceria la informacion gracias
# · Pablo · hace 974 días
Daniel, no hay caso de que funcione, es por que tengo la 1,2 de mootools? cuando te haras el mismo ejemplo para la version nueva?
Saludos
# · dhanny · hace 967 días
La misma pero para 1.2 disfrutenla
var cargar = function(el,ruta) { el = $(el); new Request({ method: 'get', url: ruta, onRequest: function(e){ el.set('html', ''); }, onSuccess: function(e){ el.set('html', e).morph({opacity: [0,1]}); el.toggleClass('loading');}, onFailure: function(e){el.set('html', ' Link con Problemas.'); }
return false; }
# · Dhanny · hace 966 días
gracias por el manual de ajax y la web esta muy linda y suerte espero que sigas ayudando a todos.
# · zeusblack · hace 774 días