test 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 oXMLHttpRequest
• Métodos del 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 navegadoresPág. 2 de 24

Programación con 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 aumentarla interactividad, velocidad y
usabilidad 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 encontrarasdiversos ejemplos que tratan distintos aspectos 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 formatoXML. Por ello es aconsejable adquirir un conocimiento 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
   AnaA un archivo XML puede asociarsele una hoja de estilo CSS, si lo 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 el archivo 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 de
forma 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...