INTRODUCCION

En esencia, AJAX permite que una página web que ya ha sido cargada solicite nueva información al servidor. Dicho así, no supondría en realidad ningún invento novedoso. Una página web que contiene un enlace permite que se solicite al servidor nueva información cada vez que se pincha dicho enlace. Una página web que contiene un formulario envía información al servidor y recibe de él nueva información, normalmente la respuesta ante los datos que se han enviado. En ambos casos hay una conexión entre el cliente y el servidor.

¿Cuál es la diferencia cuando usamos AJAX? La diferencia es que con AJAX no es necesario recargar toda la página web, como ocurre cuando pinchamos en un enlace o cuando pulsamos el botón submit de un formulario. Con AJAX es posible realizar una conexión a un servidor desde dentro de una página web usando un programa Javascript. Dicho servidor enviará una respuesta; esta respuesta se almacenará en una variable del programa Javascript y, una vez almacenada en la variable, podremos hacer con ella lo que deseemos.

CONCEPTO

AJAX, acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML), es una técnica de desarrollo web para crear aplicaciones interactivas o RIA (Rich Internet Applications). Estas aplicaciones 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, mejorando la interactividad, velocidad y usabilidad en las aplicaciones.

Ajax es una tecnología asíncrona, en el sentido de que los datos adicionales se solicitan al servidor y se cargan en segundo plano sin interferir con la visualización ni el comportamiento de la página. JavaScript es el lenguaje interpretado (scripting language) en el que normalmente se efectúan las funciones de llamada de Ajax mientras que el acceso a los datos se realiza mediante XMLHttpRequest, objeto disponible en los navegadores actuales. En cualquier caso, no es necesario que el contenido asíncrono esté formateado en XML.

Ajax es una técnica válida para múltiples plataformas y utilizable en muchos sistemas operativos y navegadores dado que está basado en estándares abiertos como JavaScript y Document Object Model (DOM).

EL OBJETIVO XMLHTTPREQUEST

XMLHttpRequest (XHR), también referida como XMLHTTP (Extensible Markup Language / Hypertext Transfer Protocol), es una interfaz empleada para realizar peticiones HTTP y HTTPS a servidores Web. Para los datos transferidos se usa cualquier codificación basada en texto, incluyendo: texto plano, XML, JSON, HTML y codificaciones particulares específicas. La interfaz se implementa como una clase de la que una aplicación cliente puede generar tantas instancias como necesite para manejar el diálogo con el servidor.

METODOS

Métodos

abort() – Detiene la petición en curso.
getAllResponseHeaders() – Devuelve todas las cabeceras de la respuesta (etiquetas y valores) como una cadena.
getResponseHeader(etiqueta) – Devuelve el valor de la etiqueta en las cabeceras de la respuesta.
open(método,URL,asíncrona,nombre,password) – Abre una conexión con esa URL mediante ese metodo (GET o POST), aplicando los valores opcionales de la derecha (ahora se explicará).
send(contenido) – Envía el contenido al servidor.
setRequestHeader(etiqueta,valor) – Establece el valor de una etiqueta de las cabeceras de petición.
De está lista nos detendremos en el método open que es uno de los más utilizados y el que nos permitirá utilizar la mejor característica de Ajax que es la carga de datos externos a la página sin necesidad de recargar la misma.
Método Open
El método open prepara una conexión HTTP a través del objeto XMLHttpRequest con un método y una URL especificados.
XMLHttpRequest.open ( sMetodo, sURL [, bSincronia [, sUsuario [, sPwd ] ] ] );
sMetodo es la cadena que nos indicara el tipo de conexión (GET o POST)
sURL es la url a la que realizamos la petición
bSincronia es un campo booleano con el que podemos utilizar modo asíncrono o síncrono, si lo fijamos en “false” modo síncrono perderiamos las mejores características de AJAX, los datos sUsuario y sPwd son opcionales y sólo aplicables en caso de caída del servidor.
Al llamar a open el atributo readyState a 1, resetea los headers de envío y los devuelve atributos responseText, responseXML, status y statusText a sus valores iniciales

PROPIEDADES

onreadystatechange – Contiene el nombre de la función que se ejecuta cada vez que el estado de la conexión cambie.
readyState – Estado de la conexión, puede valer desde 0 (no iniciada) hasta 4 (completado).
responseText – Datos devueltos por el servidor en formato cadena.
responseXML – Datos devueltos por el servidor en forma de documento XML que puede ser recorrido mediante las funciones del DOM (getEementsByTagName, etc).
status – Código enviado por el servidor, del tipo 404 (documento no encotrado) o 200 (OK).
statusText – Mensaje de texto enviado por el servidor junto al código (status), para el caso de código 200 contendrá “OK”.

Conocer estas propiedades y métodos es algo muy útil a la hora de desarrollar aplicaciones utilizando Ajax debido a la gran ayuda que muchas de ellas ofrecen a la hora de depurar errores. Y nos da una mayor idea acerca de la potencia de esta conjunción de tecnologías.

SINTAXIS BASICA PARA LOS METODOS

Es aconsejable elegir “GET” para aquellas peticiones en las que se soliciten pocos datos y “POST” para aquellas en las que sea necesario enviar información, especialmente si estos datos podrían superar los 512 bytes en total, puesto que por el método “GET” no podremos recibir la totalidad de los datos.

RESPONSE TEXT

La respuesta puede venir en muchas formas diferentes, como XML, texto plano, (X) HTML o JavaScript Object Notation (JSON). Dependiendo del formato de los datos que recibe, hay dos maneras diferentes de manejar la situación: con responseText o conresponseXML . El responseText método se utiliza para todos los formatos que no están basados ​​en XML. Devuelve una representación exacta de la respuesta como una cadena. Texto sin formato, (X) HTML y JSON son todos los formatos que utilizan responseText .

RESPONSEXML

La propiedad responseXML a diferencia de la propiedad responseText recupera los datos como XML y debemos recorrerlo mediante las funciones del DOM.

Es necesario que el programa que se ejecute en el servidor estructure los datos en formato XML.

Para probar el funcionamiento de esta propiedad del objeto XMLHttpRequest implementaremos una página que muestre en un control select los nombres de una serie de paises. Cuando se seleccione uno y se presione un botón recuperaremos de dicho pais el nombre de la capital, su superficie, cantidad de habitantes y su idioma.

El servidor generará un archivo con formato XML y lo retornará al cliente.

Aplicaciones

La técnica de programación ajax ha generado un enorme interés y expectación en todo el mundo. Razones no faltan, dado que puede utilizarse para crear aplicaciones que permiten interactuar con el usuario muy por encima de las aplicaciones usuales (por ejemplo, pueden recibirse o mandarse datos sin tener que refrescar el navegador).


Las 10 mejores aplicaciones Ajax (gratis):




1. Kiko. Calendario- Agenda online2. Backbase’s RSS Reader. Lector RSS.3. Backpack. Aplicación de gestión "project management". Incluye e-mail y avisos por e-mail4. Writely. Procesador de textos online (adquirido por Google recientemente .5. Amazon Zuggest. La versión de Amazon del Google Suggest.6. TimeTracker. Herramienta de planificación del tiempo personal.7. Del.icio.us Director. Para administrar tu del.icio.us.8. Backbase’s Information Portal. Una página de agregación altamente interactiva.9. Protopage. Otra que sirve como portal personal de información.10. Periodic Table of the Elements. Tabla periódica de elementos
TechCruch
Ajaxian.com,
Read/Write Web
Actualizadas aplicaciones del autor de del post original en inglés
Aplicaciones Ajax, Web 2.0...
IBM respalda Ajax
Nuevos servicios de correo electrónico

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





Más información y enlaces relacionados son las mejores aplicaciones Ajax:

Conclucion

Aprendimos que Ajax no es una tecnología en sí mismo. En realidad, se trata de varias tecnologías independientes que se unen de formas nuevas y sorprendentes.

Conocimos que AJAX requiere un conocimiento avanzado de todas y cada una de las tecnologías anteriores. En las aplicaciones web tradicionales, las acciones del usuario en la página (pinchar en un botón, seleccionar un vinculo.

Resumen

AJAX es una técnica de desarrollo web para crear aplicaciones interactivas usando diferentes tecnologías web que colaboran entre ellas.

Nacido en 2005 cómo una técnica para la sustitución del iframe como método de comunicación sin refresco se ha convertido en pocos años en una tecnología imprescindible en la mayoría de aplicaciones web.

En este curso aprenderemos a utilizar AJAX para crear nuestras propias aplicaciones así como también encontraremos una referencia completa y con ejemplos de los métodos y atributos que utilizaremos con esta tecnología.

Navegadores que permiten Ajax

Ha de tenerse en cuenta que ésta es una lista general, y el soporte de las aplicaciones Ajax dependerá de las características que el navegador permita.
1.Navegadores basados en Geco como Mozilla,Sea monkey,Camino, IceWeale, Flock.etc...
2.Google Chrome
3.Opera versión 8.0 y superiores, incluyendo Opera Mobile Browser versión 8.0 y superiores.
4.Navegadores con el API KHTML versión 3.2 y superiores implementado, incluyendo Konqueror versión 3.2 y superiores, Apple Safari versión 1.2 y superiores, y el Web Browser for S60 de Nokia tercera generación y posteriores

Navegadores que no permiten Ajax
1.Safari 1.2 y anteriores
2.Dillo
3.Navegadores basados en texto como Linux y Links
4.Navegadores para personas con capacidades especiales visuales (Braille)

Antecedentes de Ajax

A pesar de que el término «Ajax» fue creado en 2005 por Jesse James Garrett, la historia de las tecnologías que permiten Ajax se remonta a una década antes con la iniciativa de Microsoft en el desarrollo de Scripting Remoto. Sin embargo, las técnicas para la carga asíncrona de contenidos en una página existente sin requerir recarga completa remontan al tiempo del elemento iframe (introducido en Internet Explorer 3 en 1996) y el tipo de elemento layer (introducido en Netscape 4 en 1997, abandonado durante las primeras etapas de desarrollo de Mozilla). Ambos tipos de elemento tenían el atributo src que podía tomar cualquier dirección URL externa, y cargando una página que contenga javascript que manipule la página paterna, pueden lograrse efectos parecidos al Ajax.

ESQUEMA