Curso De Ajax

Tomado de: http://www.programacionweb.net/cursos/curso.php?num=2

1 de 56

Que es ajax
Otros (Articulos) | 04/10/05 | Versiones
Según wikipedia AJAX (Asynchronous
JavaScript And XML) és una técnica de
desarrollo web para crear aplicaciones
interactivas mediante la combinación de tres
tecnologías ya existentes que conoceremos en
este manual.
O p ara que lo entiendan mejor, es unamanera de crear una aplicación que responde a
las acciones del usuario sin refrescar la página contra el servidor.
Tecnologías
Para conseguir este efecto, se utilizan la mayoría de las tecnologías disponibles para
p áginas web, HTML, CSS, XML, JavaScript y algún lenguaje de servidor cómo puede
ser PHP o ASP, veamos que función tiene cada lenguaje en la aplicación:
JavaScript - Para manejar elobjeto XMLHttpRequest y DOM tratar para los datos
recibidos.
HTML - Distribuye en la ventana del navegador los elementos de la aplicación y la
información recibida por el servidor
CSS - Define el aspecto de cada elemento y dato de la aplicación
XML - Es el formato de los datos transmitidos del servidor al cliente (navegador) y que
posteriormente serán mostrados.
Lenguaje de servidor - Generala información útil en XML y la envía al navegador.
Funcionamiento
El usuario accede a la aplicación que es enviada por el servidor en formato HTML,
JavaScript y CSS. Luego el código JavaScript de la aplicación pide al servidor los datos
que quiere mostrar y este, ejecuta un código de lado de servidor que envía al navegador
los datos en formato XML.

Tomado de:http://www.programacionweb.net/cursos/curso.php?num=2

2 de 56

Cada vez que el usuario realiza una acción que significa mostrar unos datos, la capa
javascript, repite la acción anterior de manera invisible al usuario y muestra los datos
d eseados.
Problemas
El principal problema de la gran mayoría de aplicaciones AJAX (lo digo por
experiencia como usuario de mozilla) es la baja compatibilidad entre navegadores,puesto que la capa JavaScript, es de una gran complejidad y a menudo por falta de
experiencia en el lenguaje, o por falta de tiempo, se opta por programar solo para
Internet Explorer.
En futuras entregas, veremos cómo programar una aplicación AJAX compatible para
todos los navegadores incluidos navegadores sin javascript.
Ejemplos
Un excelente ejemplo de aplicación AJAX, bastante compatibleentre navegadores es
Google Maps, en ella podrás ver cómo cambiamos la posición del mapa sin recargar la
p ágina...

Tomado de: http://www.programacionweb.net/cursos/curso.php?num=2

3 de 56

El objeto XMLHttpRequest
JavaScript (Articulos) | 25/05/06 | Versiones
Un objeto XMLHttpRequest es una instancia de una API que nos permite la
transferencia de datos en formato XML desde los scriptdel navegador ( JavaScript,
JScrip, VBScript ... ) a los del servidor ( PHP, Perl, ASp, Java ... ) e inversamente.

Compatibilidad con navegadores
El primer en implementar esta API fué Microsoft con un objeto ActiveX para su
navegador Internet Explorer 5, posteriormente empezó a incorporarse de forma nativa
en todos los naveadores empezando por Firefox seguido de Apple, Konqueror, OperaSoftware, iCab y Microsoft Internet Explorer 7.
Metodos y atributos
Atributos:
o nreadystatechange
readyState
responseText
responseXML
status
statusText
Metodos:
a bort
g etAllResponseHeaders
g etResponseHeader
o pen
send
setRequestHeader

Tomado de: http://www.programacionweb.net/cursos/curso.php?num=2

4 de 56

o nreadystatechange (atributo)
JavaScript (Articulos) | 26/05/06 |Versiones
El atributo onreadystatechange asigna la función que se ejecutará cada vez que
readyState cambie de valor.
Utilización
o XMLHttpRequest.onreadystatechange = fFuncion;
o XMLHttpRequest - Objeto XMLHttpRequest
fFuncion - Función a ejecutar
Frecuentemente utilizamos o nreadystatechange para definir una función para leer los
d atos recibidos del servidor, en este caso en su...