Programacion En Ajax

Programación con AJAX

Programación con AJAX

Reconocimiento – No comercial José Antonio Muñoz Jiménez jamj2000 at gmail dot com  Marzo 2010

Pág. 1 de 24

Programación con AJAX

Introducción. • ¿Qué es AJAX? • ¿Dónde se utiliza? • Ventajas y desventajas El formato XML Conceptos de Javascript • Variables ◦ Arrays ◦ Diccionarios • Funciones y Eventos El objet o XMLHttpRequest • Métodosdel objeto XMLHttpRequest para obtener información ◦ open ◦ setRequestHeader ◦ send • Propiedades de método XMLHttpRequest ◦ onreadystatechange ◦ readyState ◦ responseText ◦ responseXML El objeto document • Métodos para gestionar la información ◦ getElementsByTagName ◦ getElementById ◦ getAttribute • La propiedad innerHTML Compatibilidad con distintos navegadores

Pág. 2 de 24

Programacióncon AJAX

Introducción
AJAX es una técnica de desarrollo web para crear aplicaciones interactivas que se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre las páginas sin necesidad de recargarlas, lo que significa aumentar la interactividad, velocidad yusabilidad en las aplicaciones. Dicha técnica es ampliamente utilizada en la Web 2.0.

AJAX significa • Asynchronous • Javascript • And • XML

Pueden verse ejemplos de aplicaciones web que hacen uso de AJAX en: • Google (Gmail, Google maps, Google docs, Google suggest, ...) • Flickr • Twitter • Digg y Reddit • Meebo En este mini-tutorial encontraras diversos ejemplos que tratan distintosaspectos de AJAX.

Actividades propuestas

• •

Hacer un listado de al menos 10 sitios de internet que hacen uso de AJAX. Hacer un resumen de la historia de la tecnología AJAX.

Pág. 3 de 24

Programación con AJAX

El formato XML
La mayoría de la comunicación de datos en AJAX entre un servidor y un cliente web suele realizarse en formato XML. Por ello es aconsejable adquirir unconocimiento básico de este formato. Este conocimiento podría resumirse de forma muy escueta en que todo documento XML: • • tiene uno y sólo un nodo raíz. todas las etiquetas deben de tener su etiqueta de cierre correspondiente.

Por ejemplo, teniendo en cuenta esto, podemos crear un archivo datos.xml:
   José Antonio    Susana    Ana

A un archivo XML puede asociarsele una hoja de estilo CSS, silo indicamos en su cabecera mediante


Pág. 4 de 24

Programación con AJAX

Por ejemplo, la hoja estilo.css:
// Etiquetas XML * { margin: 0px; padding: 0px; } alumnos { font­size: 14pt; } alumno  { display: block; background­color: Wheat; } alumno:before {          content: "Alumno/a: ";          padding­left: 10px;          padding­right: 10px;          margin­right: 20px;        background­color: Tan; }

// Etiquetas HTML * { margin: 0px; padding: 0px; } #resultado {          overflow: auto;         width: 500px; height: 200px;          background­color: LightGrey;          border: 1px solid Black;         padding: 10px; }

Con lo cual se vería de la siguiente forma en el navegador:

Pág. 5 de 24

Programación con AJAX

Actividades propuestas

• • • •

Modificar elarchivo datos.xml para que aparezcan al menos 10 alumnos. Añadir al archivo datos.xml al menos 3 profesores. Modificar estilo.css para que se muestren adecuadamente los profesores. Elaborar un nuevo archivo XML que muestre otro tipo de información, con su estilo CSS asociado.

Proporcionando datos desde el servidor
A menudo no se accede a los datos XML de forma directa sino que estos son generados deforma dinámica en el servidor, normalmente mediante un script PHP. Por ejemplo esa información podría obtenerse de una base datos cuya información cambia con el tiempo. A modo de simplificación mostramos un sencillo script datos.php:


Actividades propuestas

• •

Modificar el script datos.php para que aparezcan al menos 10 alumnos. Realizar una llamada a datos.php desde el...