Valoración del artículo: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.
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>
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.
En el siguiente artículo veremos otros casos de uso de Ajax con Prototype que complementarán las presentes explicaciones.
Usuarios: 
