PDF de programación - Desarrollo de Aplicaciones Web con AJAX

Desarrollo de Aplicaciones Web con AJAX

Huibert Aalbers

Senior Certified Software IT Architect

IT Insight podcast

• Este podcast pertenece a la serie IT Insight
• Pueden suscribirse al podcast a través de iTunes.
• El material adicional (presentación en formato PDF, white papers y

otros) se obtienen directamente del sitio http://www.huibert-
aalbers.com en la sección de IT Insight

• Me pueden enviar comentarios acerca del podcast o preguntas a mi

correo personal, [email protected]

¿Qué es AJAX?

• AJAX significa

• Asynchronous

Javascript

•
• And
• XML

• Este término fue inventado por una empresa llamada Adaptive Path para

designar a la tecnología que sustenta a las aplicaciones Web 2.0 que ofrecen
unas interfaces de usuario más ricas y complejas

• Microsoft desarrolló la primera aplicación AJAX, Outlook Web Access usando

extensiones propietarias de HTML incluídas en Internet Explorer

¿Qué problemas resuelve AJAX?

• Antes de AJAX, cada vez que una aplicación web interactuaba con el

servidor, la página completa tenía que ser cargada de nuevo

• Con las tecnologías AJAX, esto ya no es cierto. Una rutina JavaScript se

conecta al servidor a través de un objeto XMLHttpRequest y el resultado se
muestra usando HTML dinámico para actualizar la página

• El resultado son aplicaciones web que se parecen mucho más a las

aplicaciones C/S tradicionales

¿Quién usa AJAX?

• AJAX ha ganado mucha popularidad desde que Google empezó a usarlo

en sus exitosas aplicaciones web
• GMail, Google Maps, Google suggest, Google calendar

• Otras empresas también están adoptando AJAX

•

•

•

http://www.flickr.com
http://www.kiko.com
http://www.protopage.com

¿Qué browsers soportan AJAX?

• Para soportar AJAX, un browser debe soportar los últimos estándares de la
W3C como CSS 2 y 3, Javascript así como el objeto XMLHttpRequest o su
equivalente
• Safari 1.2 y posterior o Konkeror (browsers basados en kHTML)

•

•

Internet Explorer 4.0 y posterior (Microsoft)
Firefox 1.0, Mozilla 1.0, Netscape 7.0, Camino 1.0 (browsers basados en
el browser de la Fundación Mozilla)

• Opera 7.6 y posterior

Problemas que enfrentan las aplicaciones

AJAX

• El botón de “back” puede no funcionar de la manera esperada por los

usuarios, lo mismo aplica a la hora de crear “bookmarks”

• Los motores de búsqueda no pueden indexar fácilmente páginas basadas

en AJAX

• El código Javascript debe poder manejar problemas de comunicaciones
con el servidor de manera transparente para el usuario y esto requiere de
mucho código ya que Javascript nunca fue pensado para manejar tareas
complejas

• El paradigma MVC fue creado para separar el código de la aplicación de

la capa de presentación. AJAX hace esto imposible, una vez más

El objeto XMLHttpRequest

• Para poderse comunicar con el servidor, el código Javascript necesita

usar un objeto XMLHttpRequest
• A pesar de su nombre, este objeto no requiere el uso de datos en

formato XML
Internet Explorer no soporta el objeto XMLHttpRequest pero ofrece una
funcionalidad similar a través de objetos ActiveX

•

• El objeto XMLHttpRequest ofrece diferentes méthodos que pueden ser

usados para interactuar de manera asíncrona con el servidor. Esto
permite que la aplicación pueda procesar múltiples conexiones en
paralelo sin bloquear el browser hasta la recepción de la respuesta

Creación de un objeto XMLHttpRequest e

invocación de un URL en un servidor

var req;!
!
function loadXMLDoc(url) !
{!
if (window.XMLHttpRequest)!
{!
// El browser soporta el objeto XMLHttpRequest!
req = new XMLHttpRequest();!
req.onreadystatechange = processReqChange;!
req.open("GET", url, true);!
req.send(null);!
}!
else if (window.ActiveXObject)!
{!
// Este código es solo para soportar IE!
req = new ActiveXObject("Microsoft.XMLHTTP");!
if (req) {!
req.onreadystatechange = processReqChange;!
req.open("GET", url, true);!
req.send();!
}!
}!
}

Procesamiento asíncrono de la respuesta

recibida del servidor

function processReqChange() !
{!
// La solicitud ha sido procesada!
if (req.readyState == 4) !
// Resultado es "OK"!
if (req.status == 200) {!
// ...Este código procesa la respuesta...!
// ...y actualiza la página en consecuencia...!
}!
else {!
alert("No se pudo obtener una respuesta válida:\n"!
+ req.statusText);!
}!
}!
}

¿Cómo programar el código del lado del

servidor?

• A las aplicaciones AJAX no les impacta de ninguna manera el lenguage de

programación usado del lado del servidor.

• Todo lo que se requiere es que la respuesta venga con un Content-Type de
tipo text/xml si la respuesta es un documento XML o text/plain (también es
válido text/html) de lo contrario

• Esto significa que en el servidor se pueden codificar las funciones por

ejemplo con las siguientes tecnologías
• CGIs en C/C++, servlets en Java, scripts en Perl, ASPs, etc.

Comentarios finales

• AJAX es mucho más que el simple uso del objeto XMLHTTPRequest.
Para crear una aplicación AJAX es necesario conocer a fondo otros
estándares de la W3C como son DOM y CSS

• Como AJAX está basado en tecnologías de browser muy recientes, es
importante entender y manejar las diferencias existentes entre los tres
principales browsers (IE, Mozilla y Safari)

• Debido a los puntos anteriores, escribir aplicaciones AJAX es algo
relativamente complejo. Por esa razón, nadie usa AJAX en todo un
sitio web. Normalmente su uso se limita a aquellas aplicaciones que
puedan beneficiarse más de esta tecnología

Gracias

Para mayor información, contácteme directamente

[email protected]