Módulo 5

Entendiendo AJAX
Introducción a AJAX

AJAX es un acrónimo de Asynchronous JavaScript and XML )

Fue definido por primera vez por J.J.Garret en el año 2005 en su artículo “Ajax: A new
approach to Web Applications”

Ahí se definía una nuevo tipo de aplicaciones que pretendían parecerse a las aplicaciones de
escritorio usadas habitualmente por los usuarios pero a través de la WEB.

Unas definiciones de Ajax serían:

“Ajax no es una tecnología en sí mismo, se trata de una unión de varias tecnologías que
trabajan de forma autónoma y que se unen mediante JavaScript “

“Es una técnica de desarrollo web para crear aplicaciones interactivas. Se ejecuta en el cliente
y mantiene una comunicación ASINCRONA con el servidor. Mejora mucho sus tiempos de
respuestas y esperas habituales del usuario”

Tecnologías
Las tecnologías de las que se hablan en las definiciones, son las que a continuación
presentamos, con sus relaciones entre si y su utilidad dentro de AJAX

XHTML y CSS:
Estos elementos se utilizan para la presentación de la información dentro de la página
Web final.
Podemos usar cualquiera de las propiedades de ellos con cualquier libertad.

DOM
Utilizamos DOM para la visualización dinámica de elementos en las páginas Web y
para interactuar con la información presentada o a presentar.
Todos los métodos y atributos vistos en el capítulo anterior son válidos.

XML y JSON
Son utilizados para definir los datos a intercambiar y la manipulación de ellos.
Han sido elegidos por la baja carga en el servidor y cliente respecto a otras
tecnologías.

XMLHttpRequest
Es el objeto encargado para el intercambio de datos Asíncrona o Síncronamente.
Normalmente este objeto siempre se utiliza en comunicación asíncrona.

JAVASCRIPT
Es el elemento que realiza el nexo de unión entre todas las anteriores tecnologías.
En Ajax se utiliza junto con los objetos DOM de HTML como son (navegador,
document, element, etc)

2
Introducción a AJAX

Entendiendo Ajax
Una de las características de AJAX, es que no requiere pluggins, es decir, no requiere
capacidades específicas por parte del Navegador.

Realizar aplicaciones en AJAX complejas y que luego puedan ser usadas en cualquier
navegador, va a depender de las características y versión del propio navegador.

A continuación se detallan una lista de los navegadores més usuales que soportan AJAX y no
soportan Ajax

SOPORTAN AJAX
Mozilla
Mozilla Firefox
Netscape 7.1 y superiores
IExplorer 5 y superiores
Opera 8 y superiores

NO SOPORTAN AJAX
Lynx
IExplorer para MACINTOSH
IExplorer 4 o anteriores
Opera 7 o inferiores

Proceso Cliente - Servidor

El término cliente-servidor podríamos definirlo como:

"Es un modelo para construir sistemas de información (es un conjunto de elementos

que interactúan entre sí con el fin de obtener beneficios), que se sustenta en la idea de repartir
el tratamiento de la información y los datos por todo los componentes informáticos, permitiendo
mejorar el rendimiento del sistema global de información"

Dentro de todo cliente-servidor siempre existen 2 partes bien diferenciadas, que son: el Cliente
y el Servidor.

Servidor: Es el elemento que suministra una serie de servicios con la

finalidad de ser utilizados por los clientes, como pueden ser
accesos a ficheros locales, accesos a Bases de Datos, Accesos a
aplicaciones, etc

Cliente: Es la parte consumidora de estos recursos que son proporcionados por

el Servidor. Los clientes más habituales son los ordenadores
personales.

Para que los elementos clientes y servidores interactúen, es necesario que se disponga de una
serie de servicios que permitan dicha comunicación, por ejemplo, en el cliente dispondremos
de un navegador Web, y en el servidor un Servidor Web.

El proceso cliente-servidor se crea siempre basándose en peticiones del cliente y respuestas

del servidor. También deberemos dispones de una infraestructura de red correcta y acorde con
la arquitectura Cliente/servidor elegida.

Disponemos de muchos clientes/servidores conocidos como por ejemplo: Servidores de

paginas webs (HTTP), Servidores de ficheros (FTP), Telnet, etc

3
Introducción a AJAX

En aplicaciones Web clásicas, las comunicaciones entre el cliente y el

servidor se realiza de una forma síncrona (el usuario hace peticiones continuas al servidor y
debe de esperar a que recargue los cambios solicitados)

Este tipo de aplicaciones, cuando se realizan muchas peticiones, el cliente tiene mucho tiempo
de espera y genera mal sensación en los usuarios finales, incluso puede desesperarse.

Ajax permite mejorar las comunicaciones de las páginas Web, permitiendo una
interopetarividad mucho mejor y más activa entre el usuario y la obtención de datos de la
aplicación o página WEB.

Mediante Ajax se evita que se haga una recarga continua y constante de páginas y datos (
forma síncrona ) y realiza una carga de forma ASINCRONA.

Los datos transmitidos entre el cliente y el servidor, son datos “simples” y elaborados en XML

La ingeniaría de Ajax suele usarse actualmente como sustituto de otros elementos como son
Flash y Applets.

Actualmente existen multitud de implementaciones de Ajax como por ejemplo:

GMAIL

4
Introducción a AJAX

YAHOO MAIL
GOOGLE MAPS
GOOGLE DOCS

Mi primer Programa

Una primera aproximación de cómo sería un código completo realzado en AJAX; el código lo
dividiremos en secciones

Debemos tener en cuenta que la mayor parte de los programas que utilizan AJAX van a utilizar
las secciones que a continuación vamos a poner, aunque puedan existir casos que no sea así y
falten alguna/s seccion/es.

Las secciones que pueden aparecer son:

1. Código HTML
2. Objeto XMLHttpRequest
3. Código JavaScript
4. Elementos adicionales como CSS, JSON, etc.

<html>
<head>
<title>Mi Primer AJAX</title>

<script language = "javascript">

var XMLHttpRequestObject = false;
:

5
Introducción a AJAX

:
function obtenerDatos(fuenteDatos, divID)
{
:
}
</script>

</head>
<body>
<H1>Mi Primer Programa en AJAX</H1>
<form>
<input type = "button" value = "Obtener Datos" onclick
="obtenerDatos('ejemplo1_datos.txt','Destino')">
</form>
<div id="destino" style="background-color:#aaddff;">
<p>Pulsa el botón y veras lo que sale aqui</p> </div>
</body>
</html>

CODIGO JavaScript

El código JavaScrip puede ser usado en cualquier parte del programa, aunque siempre va a
existir una parte específica de este código para definir los elementos necesarios para la
comunicación con el servidor en Ajax.

Usado por ejemplo, funciones para evaluar datos sin salir del cliente (formularios), funciones
para hacer operaciones matemáticas, carga de modelos de Hojas de Estilos en Cascada, etc.

También aparecen partes de Javascript para incorporar ficheros con más código javascript (*.js)
o para incorporar las Hojas de Estilo en Cascada (CSS).

Mi primer Programa

:
:
<script language = "javascript">
var XMLHttpRequestObject = false;
:
// Definición de variables u operaciones generales
:
function obtenerDatos(fuenteDatos, divID)
{
// Código de la función a implementar
}
:
// Más código de JAvascript
:
</script>

CREACION DEL OBJETO XMLHttpRequest

La creación del objeto XMLHttpRequest es una parte fundamental de AJAX para la

comunicación entre el Cliente y el servidor. Gracias a este objeto se puede enviar y recibir
datos de diversas modos (asíncrono o asíncrono), aunque la mayoría de las veces se haga de
forma asíncrono.

6
Introducción a AJAX

El objeto creado va a ser gestionado, leído y modificado en el

siguiente capítulo, dándole una mayor definición a todos y cada uno de los métodos y atributos
de que consta.

Debemos de tener en cuanta que existen diferentes versiones de creación de este objeto
dependiendo del navegador en el que nos encontremos. Para gestionar el objeto se disponen
de unos métodos y propiedades que detallaremos en el siguiente capítulo que dan
funcionalidad completa al objeto

Mi primer Programa

:
:
:
<script language = "javascript">
var XMLHttpRequestObject = false;
:
var req = new XMLHttpRequest();
if(window.XMLHttpRequest && !(window.ActiveXObject))
{
try { ……………..
} catch(e) { ………….. }
if(window.ActiveXObject) {
</script>
:

Funcione de utilización del Objeto XMLHttpRequest

Pueden existir una o más funciones para la gestión y manipulación de los datos obtenidos en la
comunicación con el servidor. Siempre van a tener en común la utilización del objeto
previamente creado, sino tenemos este objeto, la función no se podrá utilizar para hacer ningún
tipo de tarea relacionada con la comunicación.

La manipulación de los datos puede ser muy simple cuando se trate de texto plano o todo lo
complicado que se quiera cuando trate con código XML, pues tenemos que interpretar sus
datos y convertirlos

Mi primer Programa

:
:
<script language = "javascript">
var XMLHttpRequestObject = false;
:
// Definición de variables u operaciones generales
:
function obtenerDatos(fuenteDatos, divID)
{
// Código de la función a implementar
}
:
// Más código de JAvascript
:
</script>

Ventajas y Desventajas

7
Introducción a AJAX

Ajax como cualquier otra ingeniería posee sus ventajas e

inconvenientes, no se puede hacer todo con Ajax y no es conveniente no hacer nada sin ella.

VENTAJAS
1. La principal ventaja que tiene Ajax es la posibilidad de realizar aplicaciones e interfaces
de usuario similares a los que ahora mismo disponemos en cualquier aplicación que
instalemos en nuestro PC.
2. Ajax no necesita navegadores con plugins determinados o preinstalados; sólo es
necesario que el navegador soporte la ingeniería Ajax
3. La utilización de Ajax reduce el tráfico de Red.
4. El servidor envía datos no contenido, por lo que en una aplicación AJAX el servidor
sólo envía los datos y desde el código que se ejecuta en el navegador se presentan
modificando el contenido de la página.

DESVENTAJAS
1. La principal desventaja de la utilización de Ajax es el conocimiento de las tecnologías
involucradas en ella, como son Javascript, CSS, XML, etc
2. La velocidad de proceso de la aplicación en el lado cliente puede ser lenta debido al
elevado código Javascript usado para poder soportar AJAX.
3. La primera comunicación del cliente con el servidor, implica un mayor transvase de
información.
4. Como norma general, las aplicaciones AJAX requieren código complejo del lado
cliente, pues se debe de tratar la mayoría de la funcionalidad de la aplicación y sino se
hace un buen diseño, su mantenimiento puede ser una ardua tarea.

FRAMEWORKS y Librerías

Cuando nos ponemos a programar en los diferentes lenguajes de programación, disponemos

de los llamados FrameWorks o interfaces GUI para desarrollar de una forma cómoda y sencilla.

Para la programación en AJAX no es necesario disponer de ningún de estos frameworks, es

posible hacer dicha programación desde cualquier editor de texto, como el Bloc de Notas o el
WordPad, pero es conveniente disponer de alguno de ellos si nos es posible.

Existen diferentes frameworks en el mercado, cada uno de ellos tiene sus ventajas e
inconvenientes.

FRAMEWORK
XAJAX ( http://xajax.sourceforge.net )
FiveFox
4D AJAX ( http//4dhispano.com )
Qooxdoo
Bindows
My_BIC
Google toolkit AJAX ( GWT)
Ajaxtk ( IBM )

De la misma forma que disponemos de Framerorks para facilitar el trabajo de programación,

también existen librerías realizadas en javascript, que son de código libre, es decir, pueden ser
usadas libremente por cualquier persona o programador para facilitarnos aun más la
programación

Estas librerías se anexan a nuestras páginas web como si ficheros externos dentro del lenguaje
javascript

8
Introducción a AJAX

<script type="text/javascript"
src="http://www......./fichero.jsp"></script>

LIBRERIAS
Moofx ( http://moofx.mad4milk.net/ )
Prototype ( http://prototype.conio.net/ )
overLIB (http://www.bosrup.com/web/overlib/?Download )
Mochikit (http://www.mochikit.com/ )
DHTMLgoodies (http://www.dhtmlgoodies.com/ )
Dojo (http://www.dojotoolkit.org/ )