Asynchronous JavaScript + XML

Esquema
y
y
y
y
y
y

Qu es AJAX?
Pequeo ejemplo prctico
El objeto xhtmlRequest
Lneas bsicas con Get
Lneas bsicas con Post
Ejemplo Real bsico: Chat

AJAX
y Qu se puede conseguir con AJAX?
y Paleta de colores
y NexImage

AJAX
y Forma de programar aplicaciones interactivas para web.
Unin de varias tecnologas.
y Tecnologas que utiliza:
y XHTML + DOM + CSS + JavaScript + XML
y El objeto ms comnmente usado es:
XMLHttpRequest

DOM

AJAX
Interfaz del usuario
Llamada
javascript

Datos
CLIENTE
Xhtml+css
Motor AJAX

Peticin
http

Datos xml
Servidor web/xml
SERVIDOR

Bases de datos, procesamientos

internos al servidor

AJAX - Ventajas
y Mayor interactividad cliente-servidor
y El intercambio de informacin es el justo, y siempre en
segundo plano, se consigue mayor velocidad.
y Mayor usabilidad
y Menor trabajo para el servidor

AJAX

y Realicemos un ejemplo prctico

XHMTLRequest
Mtodos
y abort() : Detiene la peticin en curso.
y getAllResponseHeaders() : Devuelve todas las cabeceras de la respuesta (etiquetas y
valores) como una cadena.
y getResponseHeader( etiqueta) : Devuelve el valor de la etiqueta en las cabeceras de
la respuesta.
y open( mtodo, URL, asncrona, usuario, password) : Abre una conexin con esa
URL mediante el mtodo (GET,POST,HEAD,POST o DELETE), tiene 5 parmetros
de entrada, las 2 primeras (mtodo, URL) son obligatorios:
mtodo - El mtodo que se usar para la conexin (GET,POST,HEAD,POST o
DELETE).
URL - La URL que se llamar para el proceso.
Las 3 restantes (asncrona, usuario, password) son opcionales:
asncrona - Valor booleano, true indica que el proceso se ejecutar sin parar la
aplicacin en curso (Background) false indica que se detendr el proceso hasta que se
termine el proceso de manera correcta.
y send( contenido) : Enva el contenido al servidor.
y setRequestHeader( etiqueta,valor) : Establece el valor de una etiqueta de las
cabeceras de peticin.

XHMTLRequest
Propiedades
A continuacin las propiedades del objeto.
onreadystatechange : Contiene el nombre de la funcin que se ejecuta cada vez que
el estado de la conexin cambie.
y readyState : Estado de la conexin.
y

Cdigo: Estado
1: Cargando
2: Cargado, pero sin su contenido incorporado a los objetos correspondientes
3: Incorporando a los objetos correspondientes
4: Carga completada

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 (getElementsByTagName, etc).
y status : Cdigo enviado por el servidor.
y
y

Cdigo: valor
200: Completado con xito
404: No se encontr URL
414: Los valores pasados por GET superan los 512
y

statusText ; Mensaje de texto enviado por el servidor junto al cdigo (status), para el
caso de cdigo 200 contendr "OK.

Lneas del mtodo GET

y function algo()

{
_objetus=objetus() crear objeto
_values_send="variable=valor&otrovar=otvalor" ;//variables
_URL_="algo.php?" ;//URL
_objetus.open("GET",_URL_+?"+_values_send,true); //abrir procesador
_objetus.onreadystatechange=function() { //funcion controlador
if (_objetus.readyState==4)// control de estados del proceso
{
//si se da un status 200 (TERMINADO CON EXITO)
if(_objetus.status == 200) {
procesos que se realizaran con los datos obtenidos
}
}
}
_objetus.send(null); envo nulo de variables
}

Lneas del mtodo POST

y function algo()

_objetus=objetus() //crear objeto

_values_send="variable=valor&otrovar=otvalor; //variables
_URL_="algo.php?" ;//URL
_objetus.open("POST",_URL_,true); //abrir procesador
_objetus.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
cabeceras POST
_objetus.send(?'+_values_send); //enviar variables
_objetus.onreadystatechange=function() { funcion controlador
if (_objetus.readyState == 4) control de estados del proceso
{
//si se da un status 200 (TERMINADO CON EXITO)
if(_objetus.status == 200) {
procesos que se realizaran con los datos obtenidos
}
}
}
_objetus.send(null); envo nulo de variables
}

Ejemplo Real
yChat
yOtros
yOtros ms profesionales
yhttp://demo.script.aculo.us/shop

Consecuencias
y Desaparicin de aplicaciones de escritorio

por webs. Excepto de tiempo real.

y Mayor control de seguridad sobre las
mismas.
y EyeOS Dahlia 1.2.

Referencias

y Ejemplo bsico
y Tutorial bsico
y Top 70 AJAX