 Julio 1st, 2008  Ajax, Prototype.js, Tutoriales |
Que empiece con esto no quiere decir que doy por terminada la encuesta, si no que para no dejar de postear, voy tirando de lo mas votado (y por el momento es Ajax).
Bueno, volviendo al post... Ajax, la tecnologia de la web 2.0, o eso es lo que dicen; pero la verdad es que la mayoria de los sitios categorizados como 2.0, implementan mucho el Ajax, para incluir archivos, para hacer elementos "draggeables", etc.
Pasemos a lo importante: Prototype.js. No se si la mayoria lo conoce, pero es (para mi y muchos de mis conocidos) el mejor framework/libreria javascript hasta el momento, y es apartir de esto, que yo desarrollo en ajax, ya que prototype te brinda bastantes funciones y metodos que nos permiten un facil manejo de javacript/ajax.
Entonces, lo que veremos en este tutorial, son varias funciones de Prototype que estoy seguro que a mas de uno le sera util a la hora de incursionar en el mundo de la web 2.0.
1 - Funcion $():
Esta funcion es mas una abreviatura a la clasica llamada document.getElementById, para un uso simple, su unico parametro sera una string con el id de un objeto de la pagina, por ejemplo:
El resultado seria un mensaje de alerta con el texto "Hello World!". Pero esta funcion no termina ahi, si no que podes conseguir un array con objetos de la pagina, todo esto pasandole como parametros, strings con los id de varios elementos de la pagina, por ejemplo:
La variable "arr" se convierte en un array donde cada uno de sus elementos, es un objeto html.
Creo que con esto, podemos dar por terminada la definicion de este metodo, pasemos a lo siguiente.
2 - Pequeña definicion del objeto Ajax de prototype.
Asi como leen, Prototype trae consigo un objeto del cual podemos sacar todas las funciones para trabajar con ajax. Estas funciones son 'Request', 'Updater' y 'PeriodicalUpdater', y ahora las vemos:
3 - Ajax.Request:
Este metodo es el mas normal y el mas usado, ya que solo hace una llamada al servidor y recuera los datos que este le devuelva, y de ahi, haz con los datos lo que tu quieras(es el metodo que uso para el AjaxForm).
Como parametros, tenemos: la url del archivo que pedira los datos al server, puede ser un php, asp, etc; luego, el resto de los paramentros van dentro de corchetes y en formato "nombre_de_parametro: valor," y separados por coma (para los quieran saber por que, busquen info sobre JSON, o esperen a que postee el tuto); volviendo al tema, los parametros son: method, cuyo valor puede ser 'post' o 'get' (en fomato string); parameters, que seran los parametros que queremos mandar, y que luego, dependiendo del metodo que usamos para mandarlos(post/get) sera como lo recibamos(el formato sera de tipo cadena de get, por ejemplo: "valor1=algo&valor2=otracosa").
Luego tenemos las funciones de respuesta, las cuales ejecutaremos en los eventos de nuestro objeto, y son:onUninitialized, onLoading, onLoaded, onInteractive, onCompleted, onException, onSuccess y onFailure. En este tutorial, solo utilizaremos las utlimas dos. Las funciones de respuesta de las que hablo, son declaradas por nosotros y se lanzan cuando se ejecuta el evento.
Ejemplo:
-
var okFunc = function(t){
-
alert('El archivo devolvio: ' + t.responseText);
-
}
-
-
var errFunc = function(t){
-
alert('Error: ' + t.status + ' -- ' + t.statusText);
-
}
-
-
new Ajax.Request('respuesta.php', {
-
method: 'post',
-
parameters:'parametro1=algo&parametro2=otracosa',
-
onSuccess:okFunc,
-
onFailure:errFunc
-
});
NOTA: en caso de que quieras hacer algo como:
-
var okFunc = function(t){
-
$('mi_div').innerHTML=t.responseText;
-
}
Te recomiendo que utilices el metodo "evalScripts" sobre el responseText, por que en caso de que no lo hagas, si tu respuesta trae codigo javascript, este no se ejecutara mediante Ajax, la forma correcta seria (como en mi AjaxForm):
-
var okFunc = function(t){
-
$('mi_div').innerHTML=t.responseText;
-
t.responseText.evalScripts();
-
}
4 - Ajax.Updater:
Una vez explicado el metodo anterior, este y el que sigue van a ser muy faciles de comprender. Con el Updater hacemos una llamada al servidor y mostramos los datos retornados en un contenedor html. Veamos un ejemplo:
-
new Ajax.Updater('mi_div','respuesta.php', {
-
method: 'post',
-
parameters:'parametro1=algo&parametro2=otracosa'
-
});
Y listo, asi de sencillo: llamamos al archivo y este solo se incluye en el div. Nota: YO prefiero hacer estos movimientos con el Request, es como que tenes mas control sobre lo que estas moviendo. Tambien son aplicables las funciones de respuesta.
5 - Ajax.PeriodicalUpdater:
Ya deben suponer como funciona no? :P, bueno, este metodo ejecuta una Updater cada cierto tiempo, y maneja casi los mismo parametros que el Updater: id de un elemento y la url a la que pide los datos; PERO dentro de las llaves (dento del JSON) debemos incluir dos parametros mas: "frequency" que es la frecuencia con la que se repite la llamada y "decay"(opcional), que es el aumento que se le dara a frequency en caso de que el archivo de respuesta no devuelva nada.
Ejemplo:
-
new Ajax.PeriodicalUpdater('mi_div','respuesta.php', {
-
frequency: '3',
-
decay: '1',
-
method: 'post',
-
parameters:'parametro1=algo&parametro2=otracosa'
-
});
Esas serian las 3 funciones basicas que manejan el Ajax dentro de Prototype, espero que les sirva, y si no entendieron algo, no duden en comentar, asi me encargo de explicarlo o corregirlo 
Saludos
Blog2iPhone.co...
