Ajax en Prototype

  • Por
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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Andrea

31/1/2010
me da un error...
hola!
He copiado el código y me da un error... dice: "is not a constructor"
es tal cual tu ejemplo:

.js:
function cargarAjax(){
new Ajax.Updater('divEncabezado', 'tpl/encabezado.html');
}

index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script src="http://localhost/sergiodanti/ajax/js/prototype.js" type="text/javascript"></script>
<script src="http://localhost/sergiodanti/ajax/js/miAjax.js" type="text/javascript"></script>
</head>
<body onLoad="SDwebAjax();">
<div id="divEncabezado">encabezado</div>
</body>
</html>

en la carpeta: tpl está: encabezado.html,
que sólo tiene un texto y una imagen

Además de: Ajax.Updater, también probé con Ajax.Request y me da el mismo error...

gracias de antemano!

Eduardo Fernández

05/2/2010
Error al pulsar el enlace
Hola desarrolloweb, cuando hago doble click en el archivo prueba2.html (así nombré el archivo donde copié el código de esta página) almacenado en mi disco duro y luego pulso el enlace el script funciona perfectamente, por supuesto, trayendo la información desde recibir-x-ajax.html. Pero cuando coloco la url (http://localhost.prueba2.html) en la barra de direcciones y pulso el enlace, el navegador (tanto firefox como internet explorer en sus últimas versiones) arroja el siguiente error:

No se puede mostrar la página
No se puede mostrar la página que está buscando porque la dirección de la página es incorrecta.

Pruebe lo siguiente:

* Si escribió la dirección de la página en la barra de direcciones, compruebe que la ha escrito correctamente.
* Abra la página principal y busque vínculos a la información que desee.

HTTP 405 ? Resource not allowed
Servicios de Internet Information Server

Información técnica (para personal de soporte)

* Más información:
Soporte técnico de Microsoft

- Pulsame para recibir un contenido con Ajax y actualizar un elemento de la página

Me gustaría saber a qué se debe este interesante fenómeno y cómo puedo resolverlo, muchísimas gracias por adelantado desde Caracas.