Cómo hacer solicitudes Ajax sencillas utilizando el framework Javascript Prototype, usando distintas configuraciones y métodos. Cómo personalizar y mejorar los scripts Ajax en Prototype.
A estas alturas probablemente todo el mundo debe conocer lo que es Ajax, o al menos las personas que leen este artículo asumimos que lo saben y que desean realizar sus propias páginas haciendo uso de Ajax de una manera sencilla. Los Frameworks Javascript nos vienen como anillo al dedo para simplificar nuestras tareas de desarrollo y en concreto Prototype ofrece diversas utilidades que nos permitirán construir scripts Ajax en pocos minutos.
Prototype es una librería Javascript que tuvo su momento de relevancia pero que a día de hoy no se utiliza. Hace tiempo que no se mantiene, por lo que no sería la mejor opción para hacer Ajax. Te recomendamos actualmente hacer Ajax nativo con Fetch o bien usar la librería especializada Axios.
Lo más complicado de hacer una aplicación web Ajax es que cada navegador tiene sus particularidades a la hora de hacer solicitudes HTTP desde Javascript para traer contenidos del servidor que se pueden mostrar sin actualizar la página entera. La tarea de hacer un script Cross-Browser es sin duda larga y tediosa, por ello Ajax permaneció por un tiempo a disposición únicamente de programadores avanzados. Sin embargo, con la llegada de los frameworks Javascript, cualquier persona con un conocimiento medio de este lenguaje, puede encarar sus objetivos en pocos minutos y sin complicaciones derivadas de las distintas plataformas.
En este artículo vamos a dedicar un tiempo a mostrar el proceso de creación de scripts sencillos en Javascript que hacen solicitudes Ajax, utilizando Prototype, el popular framework Javascript.
Descargar Prototype e incluir el script en nuestra página
Como un paso previo a realizar cualquier cosa con Prototype, tenemos que descargar el framework e incluirlo en la página.Podemos hacer el download de la versión más reciente de Prototype en su página web: http://www.prototypejs.org
Tendremos que obtener un archivo con extensión js, que contiene todo el código de las librerías de Prototype. Una vez descargado lo podremos incluir en nuestra página con una etiqueta SCRIPT que colocaremos en la cabecera de la página:
new Ajax.Updater('contenidoajax', 'recibir-x-ajax.html');
Clase Ajax y Ajax.Updater de Prototype
En Prototype existe una clase llamada Ajax que contiene todo lo que necesitaremos para hacer llamadas asíncronas al servidor. Realmente esta clase Ajax no se puede utilizar por si misma, por ser abastracta, sino que tenemos que usarla a través de distintas clases que heredan de ella, con las que podremos hacer cualquier tipo de script según nuestras necesidades. Lo bueno es que todo lo que hagamos funcionará en los navegadores más comunes de la misma manera, con lo que no tendremos que complicarnos en hacer un código diferente para cada tipo de plataforma de cliente. Además, podremos ahorrar muchas líneas de código al hacer las solicitudes y otras acciones en torno de éstas.Esta clase Ajax tendría una clase heredada con la que podemos hacer un ejemplo de uso bien simple. Se trata de la clase Ajax.Updater, con el que hacer una solicitud por Ajax y actualizar a la vez el contenido HTML de cualquier elemento de la página. Veamos un ejemplo:
new Ajax.Updater('contenidoajax', 'recibir-x-ajax.html');
Con esta única línea de código hacemos todo el trabajo, de recibir un archivo por Ajax y mostrar los contenidos en un lugar de la página. En concreto recibiremos el archivo "recibir-x-ajax.html" y actualizaremos el elemento con identificador (atributo id del HTML) "contenidoajax".
Ahora veamos un código de una página que realizaría una simple solicitud Ajax:
<html>
<head>
<title>Recibir contenido por Ajax</title>
<script src="../prototype-1.6.0.3.js" type="text/javascript"></script>
<script>
function recibirAjaxActualizar(){
new Ajax.Updater('contenidoajax', 'recibir-x-ajax.html');
}
</script>
</head>
<body>
<div id="contenidoajax">Elemento a actualizar con la solicitud Ajax</div>
<p>
- <a href="javascript: recibirAjaxActualizar();">Pulsame para recibir un contenido con Ajax y actualizar un elemento de la página</a>
</body>
</html>
Crear scripts Ajax personalizados en Prototype
Hasta ahora hemos visto cómo construir scripts Ajax extremadamente sencillos con Prototype. A continuación ampliaremos las explicaciones, para enseñar a personalizar un poco más las solicitudes Ajax y tus scripts, para hacer cosas que seguramente necesitarás para mejorar la experiencia de usuario en tus páginas web.
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 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);
}
});
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:
<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:
<?php
echo "La respuesta!. He recibido: " . $_GET["miparametro"] . " / " . $_GET["otro"];
?>
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.
$('cargando').update("Cargando...");
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>
<?php
echo "La respuesta!. He recibido: " . $_GET["miparametro"] . " / " . $_GET["otro"];
?>
Conclusión a Ajax con Prototype
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.
Nota de actualización: Como se señaló, lo cierto es que actualmente no se usa Prototype, porque los navegadores funcionan de manera similar y las necesidades que cubría hoy ya no son un problema, además otras librerías como jQuery le ganaron la batalla y se hicieron mucho más populares.
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...