> Manuales > Manual de Ajax práctico - Taller Ajax

Tutorial en el que mostraremos cómo hacer solicitudes Ajax utilizando el framework Javascript Prototype, que tiene varias clases interesantes para hacer aplicaciones Ajax rápidamente.

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.

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.

Nota: en DesarrolloWeb.com ya explicamos cómo hacer scripts Ajax con otros frameworks, como pueden ser Mootools o jQuery. Si conocemos otros frameworks Javascript, veremos que con Prototype las cosas son bastante parecidas.

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:

<script src="prototype-1.6.0.3.js" type="text/javascript"></script>

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>

Podemos ver este código en marcha en una página aparte.

Nota: la solicitud Ajax viaja por el protocolo HTTP, por lo que este ejemplo debe estar alojado en un servidor web para que funcione. Si colocas el archivo tal cual en tu disco duro y lo ejecutas no funcionará, puesto que tienes que solicitarlo a través de cualquier servidor web, ya sea uno que puedas tener instalado en tu ordenador o bien un espacio de alojamiento web del que dispongas en Internet.

En el siguiente artículo veremos otros casos de uso de Ajax con Prototype que complementarán las presentes explicaciones.

Miguel Angel Alvarez

Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...

Manual