AJAX facil con Mootools: AJAX.js
14 de August, 2007
Ajax.js hereda de XHR.js y es la clase que verdaderamente nos facilita el asunto de aplicar AJAX. A continuación encontrarás una breve explicación de cada uno de sus métodos y en el siguiente enlace podrás ver ejemplos en funcionamiento: Ejemplos Ajax.js de Mootools.
Antes de empezar, recuerda que ajax.js al ser una clase hija de xhr.js, hereda todos sus métodos, propiedades, opciones y eventos. Por eso es que en los ejemplos que siguen podrás encontrar opciones como method que ya las vimos en el artículo sobre xhr.js.
Creando un objeto Ajax
1 | var miAjax = new Ajax(url, {opciones}); |
Parámetros
url
La url del script que recibe la petición.
Opciones
data
Es la información que le vamos a pasar a nuestro script. Puede ser un string como ya vimos con xhr, un formulario o un objeto.
Pasando un String:
1 2 3 4 5 6 7 | var miAjax = new Ajax('recibe.php', { method: 'get', data:'ejemplo=uno&variable=mootools', update: $('respuesta1') }); miAjax.request(); |
Pasando un formulario:
1 2 3 4 5 6 7 | var miAjax = new Ajax('recibe.php', { method: 'get', data:$('form1'), //Pasamos el objeto form a enviar update: $('respuesta2') }); miAjax.request(); |
Pasando un Objeto:
1 2 3 4 5 6 7 8 9 10 11 | var miAjax = new Ajax('recibe.php', { method: 'get', data: { ejemplo: 'tres', variable: 'mootools' }, update: $('respuesta3') }); miAjax.request(); |
update
Es el elemento HTML donde vamos a mostrar la respuesta de nuestra petición.
evalScripts
true o false. Si se indica true se evaluarán todos los scripts que vengan en la respuesta de nuestra petición. Se ejecutará todo lo que este entre etiquetas < script>. El valor predefinido es false.
1 2 3 4 5 6 7 8 | var miAjax = new Ajax('recibe.php', { method: 'get', data:'ejemplo=cuatro&variable=mootools', update:$('respuesta4'), evalScripts: true }); miAjax.request(); |
En recibe.php podría haber cualquier cosa, incluyendo cualquier etiqueta HTML. Lo único que se evalúa es lo que está entre las etiquetas < script>. Nota: Al parecer no funciona bien en ie6(¿raro no?), en ie7 no lo probé.
evalResponse
true o false. Si se indica true se evalúa toda la respuesta como si fuera un script javascript. El valor predefinido es false.
1 2 3 4 5 6 7 | var miAjax = new Ajax('recibe.php', { method: 'get', data:'ejemplo=cuatro&variable=mootools', evalResponse: true }); miAjax.request(); |
En recibe.php solo puede haber código javascript.
Eventos
onComplete
Equivale a onSucess de xhr.js (que también se puede usar), es la función que se ejecuta cuando llega la respuesta de nuestra petición AJAX.
1 2 3 4 5 6 7 8 9 10 | var miAjax = new Ajax('recibe.php', { method: 'get', data:'ejemplo=uno&variable=mootools', onComplete: function() { $('respuesta1').setHTML('Terminó!'); } }); miAjax.request(); |
Métodos
request
Con request enviamos la petición.
evalScripts
Evalua/Ejecuta los scripts que vienen en la respuesta a nuestra petición AJAX.
1 2 3 4 5 6 7 8 9 10 | var miAjax = new Ajax('recibe2.php', { method: 'get', data:'ejemplo=cuatro&variable=mootools', onComplete: function() { this.evalScripts(); } }); miAjax.request(); |
getHeader(header)
Devuelve el tipo de cabecera solicitada o null si no existe.
1 2 3 4 5 6 7 8 9 10 11 | var miAjax = new Ajax('recibe.php', { method: 'get', data:'ejemplo=cuatro&variable=mootools', onComplete: function() { alert('Content-type ' + this.getHeader('Content-type')); //Devuelve Content-type application/x-javascript } }); miAjax.request(); |
El código de recibe.php es:
1 2 3 | < ?php header("Content-type: application/x-javascript" ); ?> |
Extras
Object.toQueryString
Nos permite pasar de un objeto a un string en un solo paso.
1 2 3 4 5 6 7 | var miObjeto = { nombre: 'Juan', edad: 15 }; alert(miObjeto.toQueryString()); //Salida nombre=juan&edad=15 |
send({opciones})
send es un pequeño gran atajo. Nos permite enviar un formulario con AJAX de manera muy sencilla. La url de destino la toma del action del form al igual que las variables, el resto se puede especificar en las opciones que son las mismas que explique mas arriba salvo method, que al parecer solo se puede usar post.
1 2 3 4 | $('miForm').send( { update: $('div') }); |
Popularity: 26% [?]
Otros artículos
24 comentarios en “AJAX facil con Mootools: AJAX.js”
Deja tu comentario
El blog funciona con Wordpress y Simpla theme
August 16, 2007 a las 10:32 am
Excelente explicacion, solo me dio un problema y es ke en firefox no me funciono :S en ie si….
O quisas sea mi explorador….
Le voy a dar uso de una vez……………..
August 16, 2007 a las 10:38 am
Es raro, sobre todo porque donde más lo probe fue en firefox y no hubo problemas. IE6 si me dio problemas con evalScripts.
September 25, 2007 a las 2:39 am
y si no quiero actualizar el id mediante otra página, es decir, si quiero cambiar un div por otro que este en la misma pagina pero que este oculto, como puedo hacerlo? es mas facil usando el getelementbyid directo o por medio del mootools se puede de alguna manera, me seria de mucha utilidad para añadirle algún efecto…
September 25, 2007 a las 8:38 pm
Pues en ese caso creo que replaceWith te sirve, puedes ver como se usa al final de este articulo: link. Incluso, en algún articulo de los que hablan del DOM podrás encontrar alguna que otra función que te ayude con dicha tarea: Mootools en Español
Saludos.
October 9, 2007 a las 3:23 am
Cómo hago para añadirle un preloader para cuando la página que estoy cargando es muy grande ?, muchas gracias
October 9, 2007 a las 9:55 pm
Lubert, mas que un preloader, seria un gif animado que “entretenga” al usuario mientras espera. La idea seria que lo insertes o lo hagas visible en el momento en el que envías la petición AJAX. Luego, con ayuda del evento onComplete(ya recibiste tu pagina) borras u ocultas dicho gif.
Saludos
October 15, 2007 a las 4:07 pm
Hola que tal federico, tengo una gran duda, espero me puedas ayudar. Debo enviar informacion por medio de un formulario, llenarla en la base de datos y que me regrese un xml, basicamente es la esencia de ajax. este es mi codigo hasta el momento:
$(‘btn_submit’).addEvent(‘click’, function(e)
{
new Event(e).stop();
$(‘formulario’).send();
});
El problema radica desde el boton, no hace nada. aun asi creo que me falta especificar que lo que me regrese sea un response.xml pero no hayo de que manera. El archivo que uso del lado de servidor esta correcto puesto que lo probe antes de utilizar el script de ajax, es decir, si llena la base de datos correctamente. Que me podra hacer falta indicarle a la funcion de send y como lo hago? gracias de antemano…
October 15, 2007 a las 4:37 pm
Hola Rene,
¿Y no te indica ningún error tu navegador?
Te recomiendo que trabajes con Firefox e instales la extensión Firebug. Esta extensión te mostrará en todo momento que está pasando, que peticiones ajax son enviadas y cuales no, las respuestas, los errores, etc. Al hacer click en tu botón te darás cuenta si se envía o no la petición.
Por otro lado, es posible que no hayas armado correctamente tu paquete mootools, quizás se te olvido tildar algo. Bájate de nuevo el fichero de mootools y tilda todas las opciones, cuando funcione tu script te ocupas de optimizarlo.
En cuanto al XML, revisa este artículo de XHR, ahi comente el tema de XML y como AJAX hereda de XHR, no creo que tengas problemas con ello. Es posible que tengas que dejar de utilizar el atajo send para formularios, si deseas procesar la respuesta de tu petición creo que necesitas utilizar directamente la clase AJAX como en los ejemplos de mas arriba. Algo como:
var miAjax = new Ajax(’script.php’,
{
method: ‘get’,
data:’pais=’ + $(‘form_pais’).getProperty(‘value’) + ‘&provincia=’ + $(‘form_provincia’).getProperty(‘value’),
onComplete: function()
{
//procesar
}
});
//no lo probé, quizá hay algún error sintactico
miAjax.request();
Un saludo
October 16, 2007 a las 3:23 am
Crees que se necesite la clase AJAX directamente?
Hasta el momento he hecho lo siguiente:
Tengo 5 archivos: admin_cat.php, crea_cat.php, scripts.js, mootools-release-1.11.js y estilos.css
En mi admin_cat.php tengo el formulario que enviara los datos por metodo post. Ademas, creo una lista de las categorias el cual pretendo se actualicen al crear una nueva sin refrescar la pagina.
En crea_cat.php recibo los datos y los envio a la base de datos. Ahi mismo con la instruccion mysql_fetch_array recibo la fila maxima para extraer el id y guardar los datos en xml (me manda un warning: “mysql_fetch_array(): supplied argument is not a valid MySQL result resource”)
En scripts.js intento usar el send, como habia pensado en un principio. Le agrego una funcion onSuccess en la cual mando llamar cada dato del xml por medio de la siguiente manera: var cat_id = this.response.xml.getElementsByTagName(‘idcat’).item(0).firstChild.data; y asi con cada uno de los datos para procesar la respuesta. Aqui el punto es que, como bien dices, no me trae el valor del idcat del xml creado en crea_cat.php
Intuyo que el error radica en el mysql_fetch_array() pero no entiendo por que no funciona bien. Intentare crear la funcion con la clase AJAX directamente para ver que pasa, alguna sugerencia extra? gracias por tu tiempo
October 16, 2007 a las 5:40 am
Muy claro tu exposición. Yo he experimentado un extraño problema en firefox. Si en el html que obtengo de la petición ajax viene un fomulario, éste no se visualiza. En explorer sí que seve ok.
October 16, 2007 a las 9:41 am
Evidentemente debes revisar por el lado de php, ese warning no está bien, es probable que tu sentencia SQL sea incorrecta. Prueba con mysql_error() para averiguar el error.
La idea es que entrando por el navegador a crea_cat.php, puedas ver en pantalla el XML, si no lo ves, algo anda mal. En tal caso, has el procedimiento sin AJAX primero, y luego cuando ya funciona, lo haces con AJAX… si vamos al caso, asi deberian ser las cosas.
Saludos
October 16, 2007 a las 12:23 pm
Listo, no entiendo por que la variable en la que debo almacenar el query que cree debe guardarse con el nombre $result, deberia de poder llamarse de cualquier manera, por eso es una variable. Termine usando la clase ajax directamente para procesar el xml y me resulto genial, aunque sigo pensando que puedo usar el send puesto que obtiene las funciones de su clase padre(ajax) no? de cualquier manera me enseñaron de pequeño que si algo funciona correctamente ya no le muevas. haha
Siguiente paso, editar en vivo la lista :S Me has sido de mucha ayuda, te lo agradezco sinceramente, saludos.
October 16, 2007 a las 2:04 pm
Rene, con respecto al nombre de la variable $result, podria ser cualquiera. Si usas $foo como nombre($foo = mysql_query(…)), lo unico que debes tener en cuenta es que a la hora de usar mysql_fetch_array() debes pasar como parámetro $foo y no $result. mysql_fetch_array($foo)
Y sobre la función send, creo que tenes razon, pero como no lo habia probado fui a lo seguro a ver si te podia ayudar a resolverlo. De todos modos no me gustan mucho esos “atajos”, suelo usar directamente la clase Ajax… sobre gustos…
Un saludo y me alegro que lo hayas solucionado.
October 16, 2007 a las 9:14 pm
@Victor, es raro lo que comentas. Voy a probarlo, por lo general no tuve grandes problemas…algunos pequeños inconvenientes pero se debieron a código HTML mal formado. Veremos…
Gracias por tu aporte
November 2, 2007 a las 9:20 pm
Hola, bueno despues de todo un dia y hasta llege a rendirme de encontrar la forma de poder que el php que reciba las variables por ajax, el formulario de consulta con los TILDES y “enies” se vean….PUDE!!, me volvi loco pero pude, y rarisimo que no encontre en ninguna pagina como se hacia, les paso a contar.
utf8_decode($DATOS_RECIBIDOS_DESDE_AJAX)
era tan sensillo como eso!! no lo puedo creer, ojala que si a alguien le pasa, usen esta funcion en el php que les soluciona la vida.
Saludos
Gaston Morixe (14 años),
Montevideo Uruguay
November 2, 2007 a las 9:56 pm
Gaston, me haces sentir culpable jeje. La verdad es que es el único problema que tuve con AJAX al empezar y en su momento me robo un par de horas… pero se me paso comentarlo parece.
Gracias por el comentario, probablemente en unos dias cuando me libere un poco escriba una entrada sobre estos detalles que le hacen perder el tiempo a uno.
Saludos y muchas gracias nuevamente
November 19, 2007 a las 9:40 pm
Hola fede!, jaja.. la verdad que era una pabada pero que me queria matar en su momento..
salu2 y grax a vos x toda la explicacion de moo!!
March 31, 2008 a las 3:59 pm
Buenas…
Una consulta, hay forma de hacer el request de la funcion desde un link href como si fuera una funcion javascript comun, pudiendole pasar un parametro?….osea, sin tener que asignarle la funcion onClick desde java a un id
March 31, 2008 a las 10:56 pm
Hola martin, como poder, se puede. Creas una función:
function buscaAlgo(id)
{
var miAjax = new Ajax(‘recibe.php’,
{
method: ‘get’,
data:’id=’ + id
});
miAjax.request();
}
Y el enlace te quedaría mas o menos asi:
<a href="#" onClick="buscaAlgo(15)">Ajax</a>
Saludos
July 13, 2008 a las 12:29 am
Hola amigo como podria ahora utilizar ajax con mootools 1.2???
September 29, 2008 a las 7:26 pm
A mi me gusta mas Jquery, creo q es mas practico y menos pesado.
Aunque cada uno tiene sus razones.
December 22, 2008 a las 2:09 am
Cuando uso data:$(‘form1′) por alguna razon no envia los hidden
April 4, 2009 a las 2:24 pm
Hola amigoS.. estoy probando envio de datos a través de un formularios con ajax del mootools, el cual trae el resultado de una consulta a mi motor de base de datos. Ahora, como debo hacer para que el contenido de mi contenedor sea borrado según necesidad del usuario, sin tener que volver a reenviar el formulario o quizá enviando un valor NULL?
O en el caso de que utilice los valores enviados por otro formulario con id distinto que apunte a otro archivo de consulta sql pero que me devuelva los resultados en el mismo contenedor ?
Ante todo gracias
August 8, 2009 a las 1:18 pm
Hola,
Estoy probando tus ejemplos, y resulta que el de pasar String, efectivamente sale perfecto, pero cuando le cambio, la variable data, por el nombre del form envía el arreglo del $_GET vacío.
Tú me podrías ayudar con eso?.. Mira te pego el código que escribí:
function clicked(){
var miAjax = new Ajax('recibe.php',
{
method: 'get', //Elegimos el método de envio
// data:'ejemplo=uno&variable=mootools', //las variables que pasamos a php
data:$('form'),
update: $('respuesta1') //el div con id respuesta1 es donde se podrá visualizar el resultado
});
miAjax.request();
}
Ejemplo:
Variable:
Click para probar
pppppppp
Te agradezco, si me puedes colaborar. Suerte