.PNG){kind=small}
.PNG){kind=small}
Para comenzar, estaría bien comentar que la clase "padre" de Prototype para realizar conexiones HTTP asíncronas se llama Ajax, pero que esta clase es abstracta y para utilizarla debemos trabajar con alguna de las clases que heredan de esta. La clase Ajax general permite algunos tipos de personalización de la solicitud muy útiles, los cuales sirven también para las solicitudes Ajax que podemos hacer cuando utilizamos las clases heredadas, como Ajax.Updater o Ajax.Request. Por lo que la mayoría de las explicaciones que veremos sirven para cualquier tipo de conexión Ajax en Prototype.
En el ejemplo del artículo anterior vimos un caso de uso de Ajax.Updater y ahora vamos a mostrar cómo utilizar otra clase más básica llamada Ajax.Request, que es exactamente igual, salvo que ésta no actualiza la información de la respuesta automáticamente en la página.
Por ejemplo veamos el siguiente código de uso de la clase Ajax.Request:
Como se puede ver, el constructor de la clase Ajax.Request recibe como primer parámetro la URL que se va a solicitar con Ajax y como segundo parámetro un objeto con todas las propiedades y funciones para personalizar la solicitud.
En este caso hemos especificado diversos valores como:
-method: con un valor "get" / "post", que es para indicar cómo se van a enviar los datos a la URL, por método get o post.
En el ejemplo del artículo anterior vimos un caso de uso de Ajax.Updater y ahora vamos a mostrar cómo utilizar otra clase más básica llamada Ajax.Request, que es exactamente igual, salvo que ésta no actualiza la información de la respuesta automáticamente en la página.
Por ejemplo veamos el siguiente código de uso de la clase Ajax.Request:
new Ajax.Request('recibir-parametros.php',{
method: 'get',
parameters: {miparametro: 'El valor!', otro: 99},
onSuccess: function(respuesta){
alert(respuesta.responseText);
}
});
method: 'get',
parameters: {miparametro: 'El valor!', otro: 99},
onSuccess: function(respuesta){
alert(respuesta.responseText);
}
});
Como se puede ver, el constructor de la clase Ajax.Request recibe como primer parámetro la URL que se va a solicitar con Ajax y como segundo parámetro un objeto con todas las propiedades y funciones para personalizar la solicitud.
En este caso hemos especificado diversos valores como:
-method: con un valor "get" / "post", que es para indicar cómo se van a enviar los datos a la URL, por método get o post.
-parameters: con una lista de los parámetros que queremos enviar con la solicitud Ajax, en notación de objeto.
-onSuccess: que es una función con lo que queremos hacer cuando la solicitud se haya procesado con éxito. En este caso simplemente mostramos en una caja de alerta la respuesta recibida por la solicitud.
Este método onSuccess es un evento que soporta la clase Ajax y que se ejecuta cuando la solicitud se ha producido y se ha recibido la respuesta correctamente.
Podemos ver un script que hace uso de esta clase para hacer una solicitud personalizada al servidor por medio de Ajax:
También necesitaremos crear una página, a la que llamamos por Ajax, que recibe los parámetros enviados en la solicitud. En este caso a página es PHP, pero podríamos utilizar cualquier otra tecnología de programación del lado del servidor.
El código de esa página sería parecido a esto:
Ahora podemos ver esta página en marcha.
Podemos ver un script que hace uso de esta clase para hacer una solicitud personalizada al servidor por medio de Ajax:
<html>
<head>
<title>Recibir contenido por Ajax</title>
<script src="../prototype-1.6.0.3.js" type="text/javascript"></script>
<script>
function recibirAjax(){
new Ajax.Request('recibir-parametros.php',{
method: 'get',
parameters: {miparametro: 'El valor!', otro: 99},
onSuccess: function(respuesta){
alert(respuesta.responseText);
}
});
}
</script>
</head>
<body>
- <a href="javascript: recibirAjax();">Pulsame para recibir un contenido con Ajax</a>
</body>
</html>
<head>
<title>Recibir contenido por Ajax</title>
<script src="../prototype-1.6.0.3.js" type="text/javascript"></script>
<script>
function recibirAjax(){
new Ajax.Request('recibir-parametros.php',{
method: 'get',
parameters: {miparametro: 'El valor!', otro: 99},
onSuccess: function(respuesta){
alert(respuesta.responseText);
}
});
}
</script>
</head>
<body>
- <a href="javascript: recibirAjax();">Pulsame para recibir un contenido con Ajax</a>
</body>
</html>
También necesitaremos crear una página, a la que llamamos por Ajax, que recibe los parámetros enviados en la solicitud. En este caso a página es PHP, pero podríamos utilizar cualquier otra tecnología de programación del lado del servidor.
El código de esa página sería parecido a esto:
<?
echo "La respuesta!. He recibido: " . $_GET["miparametro"] . " / " . $_GET["otro"];
?>
echo "La respuesta!. He recibido: " . $_GET["miparametro"] . " / " . $_GET["otro"];
?>
Ahora podemos ver esta página en marcha.
Personalizar el script Ajax con el típico mensaje de carga
Ahora veamos cómo realizar una solicitud Ajax en el que nos muestre el típico mensaje de "Cargando...", para avisar al usuario que se ha producido una solicitud y que tiene que esperar a recibir la respuesta.
Para ello simplemente tenemos que modificar un poco el script anterior, para crear el comportamiento que muestre el mensaje de carga. Por variar un poco, en este caso utilizaremos Ajax.Updater, de una manera muy similar.
En este caso hemos creado una primera línea de código, justo antes de la solicitud Ajax, que actualiza el texto del elemento con identificador "cargando". En ese elemento colocamos el mensaje de carga. Nosotros hemos actualizado el contenido colocando un texto, pero podríamos haber colocado una imagen, ya que update() acepta cualquier código HTML.
Luego se codifica la solicitud Ajax, en la que hemos colocado en el evento onSuccess una línea de código para eliminar el mensaje de carga una vez hemos recibido una respuesta correcta del servidor, utilizando el mismo método update() sobre el elemento de la página deseado.
A continuación se puede ver el código completo de este ejemplo:
Si se desea, podemos poner en marcha el ejemplo en una página aparte.
Con esto hemos visto lo sencillo que es hacer Ajax con Prototype. Pero sin duda, lo más útil e interesante es que con Prototype podemos construir scripts Ajax que son compatibles con todos los navegadores, sin necesidad de preocuparnos por las diferentes particularidades de cada uno.
Fuente: Desarrolloweb.com
Para ello simplemente tenemos que modificar un poco el script anterior, para crear el comportamiento que muestre el mensaje de carga. Por variar un poco, en este caso utilizaremos Ajax.Updater, de una manera muy similar.
$('cargando').update("Cargando...");
new Ajax.Updater('contenidoajax', 'recibir-parametros.php', {
method: 'get',
parameters: {miparametro: 'lo que sea', otro: 58},
onSuccess: function(){
$('cargando').update("");
}
});
new Ajax.Updater('contenidoajax', 'recibir-parametros.php', {
method: 'get',
parameters: {miparametro: 'lo que sea', otro: 58},
onSuccess: function(){
$('cargando').update("");
}
});
En este caso hemos creado una primera línea de código, justo antes de la solicitud Ajax, que actualiza el texto del elemento con identificador "cargando". En ese elemento colocamos el mensaje de carga. Nosotros hemos actualizado el contenido colocando un texto, pero podríamos haber colocado una imagen, ya que update() acepta cualquier código HTML.
Luego se codifica la solicitud Ajax, en la que hemos colocado en el evento onSuccess una línea de código para eliminar el mensaje de carga una vez hemos recibido una respuesta correcta del servidor, utilizando el mismo método update() sobre el elemento de la página deseado.
A continuación se puede ver el código completo de este ejemplo:
<html>
<head>
<title>Recibir contenido por Ajax</title>
<script src="../prototype-1.6.0.3.js" type="text/javascript"></script>
<script>
function recibirAjax(){
$('cargando').update("Cargando...");
new Ajax.Updater('contenidoajax', 'recibir-parametros.php', {
method: 'get',
parameters: {miparametro: 'lo que sea', otro: 58},
onSuccess: function(){
$('cargando').update("");
}
});
}
</script>
</head>
<body>
<div id="contenidoajax"></div>
<p>
- <a href="javascript: recibirAjax();">Pulsame para recibir un contenido con Ajax</a>
<p>
<div id="cargando"></div>
</body>
</html>
<head>
<title>Recibir contenido por Ajax</title>
<script src="../prototype-1.6.0.3.js" type="text/javascript"></script>
<script>
function recibirAjax(){
$('cargando').update("Cargando...");
new Ajax.Updater('contenidoajax', 'recibir-parametros.php', {
method: 'get',
parameters: {miparametro: 'lo que sea', otro: 58},
onSuccess: function(){
$('cargando').update("");
}
});
}
</script>
</head>
<body>
<div id="contenidoajax"></div>
<p>
- <a href="javascript: recibirAjax();">Pulsame para recibir un contenido con Ajax</a>
<p>
<div id="cargando"></div>
</body>
</html>
Si se desea, podemos poner en marcha el ejemplo en una página aparte.
Con esto hemos visto lo sencillo que es hacer Ajax con Prototype. Pero sin duda, lo más útil e interesante es que con Prototype podemos construir scripts Ajax que son compatibles con todos los navegadores, sin necesidad de preocuparnos por las diferentes particularidades de cada uno.
Fuente: Desarrolloweb.com
