XHTML DI NAMI CO AVANZADO XHTML DI NAMI CO AVANZADO

(AJ AX Y DOM) (AJ AX Y DOM)

AJAX
Conceptos y fundamentos bsicos
Patrones de Ajax
Ejemplos prcticos.
Libreras estndares
Bibliografa
Ajax in Practice
Visual Quickstart Guide CSS, DHTML, and Ajax, Fourth Edition
DHTML Utopia. Modern Web Design Using J avaScript & DOM
Ajax: Un Nuevo acercamiento a las Aplicaciones Web
http://www.ajaxhispano.com/ajax-nuevo-acercamiento-aplicaciones-web.html
El objeto XMLHttpRequest
http://www.programacionweb.net/articulos/articulo/?num=386
AJAX (Asynchronous JavaScript And XML)
AJ AX no es una tecnologa. Es realmente muchas tecnologas, cada una
floreciendo por su propio mrito, unindose en poderosas nuevas formas.
AJ AX incorpora:
Presentacin basada en estndares usando XHTML y CSS;
Exhibicin e interaccin dinmicas usando el Document Object Model;
Intercambio y manipulacin de datos usando XML y XSLT;
Recuperacin de datos asincrnica usando XMLHttpRequest;
Y J avaScript poniendo todo junto.
Modelo clsico de aplicaciones Web
Servidor
Bases de datos
Navegador
Interfaz de usuario
Servidor Web
Solicitud
HTTP
Datos
HTML + CSS
Modelo clsico de aplicaciones Web
Servidor
Solicitud
HTTP
Datos
HTML + CSS
Bases
datos
http://cv1.cpd.ua.es/WebCv/CtrlZonaPersonal/LoginCv.asp http://cv1.cpd.ua.es/WebCv/
Modelo AJAX de aplicaciones Web
Servidor
Bases de datos
Navegador
Interfaz de usuario
Servidor Web / XML
Javascript
Datos
HTML + CSS
Motor AJAX
Solicitud
HTTP
Datos
XML
Modelo AJAX de aplicaciones Web
Servidor
Solicitud
HTTP
Datos
XML
Bases
datos
http://maps.google.es/
Dnde utilizar AJAX?
Comunicacin rpida entre usuarios
Interaccin a travs de formularios
Votaciones, encuestas, valoraciones, etc.
Filtrado y manipulacin de datos o resultados de bsqueda
Autocompletado de campos de texto usados comnmente
Dnde no utilizar AJAX?
Envos a travs de formularios simples
Bsquedas
Navegacin bsica
Reemplazar grandes cantidades de texto
Manipulacin de la interfaz
Validacin de usuarios
Dnde vamos a utilizar AJAX?
1. Traer contenido al pulsar determinados enlaces
2. Mini lbum de fotos
3. Desplegables de edificios-localizaciones
4. Buscador sencillo
5. Sugerir valores para un campo
6. Paginar resultados
7. Navegar por directorios (DHTML)
8. Editar campos no editables y actualizar contenido (DHTML)
Ejemplo modelo clsico de aplicaciones Web
Formulario de identificacin
http://127.0.0.1/ajax/mod_clas_form1.html
Validacin simple de datos
http://127.0.0.1/ajax/mod_clas_valid1.asp
Ejemplo modelo clsico de aplicaciones Web
Formulario de identificacin
http://127.0.0.1/ajax/mod_clas_form2.html
El objeto XMLHttpRequest
El objeto XMLHttpRequest nos permite la transferencia de datos en
formato XML desde los script del navegador ( J avaScript, J Scrip, VBScript,
etc.) a los del servidor (PHP, ASP, etc.) e inversamente.
El objeto XMLHttpRequest
El primer en implementar esta API fue Microsoft con un objeto ActiveX
para su navegador Internet Explorer 5, posteriormente empez a
incorporarse de forma nativa en todos los navegadores empezando por
Firefox seguido de Apple, Konqueror, Opera Software, iCab y Microsoft
Internet Explorer 7.
El objeto se declara de forma diferente dependiendo del navegador, pero
sus funciones son las mismas.
El objeto XMLHttpRequest
Permite que la interaccin del usuario con la aplicacin suceda
asincrnicamente (independientemente de la comunicacin con el
servidor). As el usuario nunca estar mirando una ventana en blanco del
navegador y un icono de reloj de arena esperando a que el servidor haga
algo.
Creacin del objeto XMLHttpRequest
En los navegadores basados en Mozilla, la referencia a este objeto con
cdigo J avascript es window.XMLHttpRequest.
En cambio, en Internet Explorer tenemos que hacer uso de
ActiveXObject, existiendo varias versiones denominadas
Microsoft.XMLHTTP y Msxml2.XMLHTTP
As que crearemos una funcin que compruebe mediante un If
condicional si existe el primer objeto, y en caso de que sea
verdadero, crearemos un nuevo objeto XMLHttpRequest, pero si es
falso, crearemos un ActiveXObject Microsoft.XMLHTTP, pero si aun
as no existe, por ltimo crearemos un Msxml2.XMLHTTP.
Creacin del objeto XMLHttpRequest (Modo 1)
var objeto = false;
if (window.XMLHttpRequest)
{
// Si es Mozilla, Safari etc
objeto = newXMLHttpRequest ();
} else if (window.ActiveXObject)
{
// pero si es IE
try
{
objeto = newActiveXObject ("Msxml2.XMLHTTP");
}
catch (e)
{
// en caso que sea una versin antigua
try
{
objeto = newActiveXObject ("Microsoft.XMLHTTP");
}
catch (e)
{
}
}
}
Creacin del objeto XMLHttpRequest (Modo 2)
var objeto = false;
try {
objeto = newActiveXObject("Msxml2.XMLHTTP");
} catch (e1) {
try {
objeto = newActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
objeto = null;
}
}
if (! objeto ) {
if (typeof XMLHttpRequest != "undefined") {
objeto = newXMLHttpRequest();
}
}
Uso del objeto XMLHttpRequest
Cuando ya tenemos el objeto creado, disponemos de diversos mtodos y
propiedades para comprobar el estado de los datos.
Mtodos
abort()
getAllResponseHeaders()
getresponseHeader(string header)
open(string url,string asynch)
send(string)
setRequestHeader(string header,
string value)
Propiedades:
onreadystatechange
readyState
responseText
responseXML
status
statusText
onreadystatechange (atributo)
El atributo onreadystatechange asigna la funcin que se ejecutar cada
vez que readyState cambie de valor.
Utilizacin
oXMLHttpRequest.onreadystatechange = fFuncion;
oXMLHttpRequest - Objeto XMLHttpRequest
fFuncion - Funcin a ejecutar
Frecuentemente utilizamos onreadystatechange para definir una
funcin para leer los datos recibidos del servidor, en este caso en su
interior comprobaramos que readyState tenga valor 4 y entonces
leeremos el valor de responseXML, responseText...
onreadystatechange (atributo)
<script language="J avaScript" type="text/javascript">
/*<![CDATA[*/
// Creamos la funcin
function fFuncion () {
// Alertamos el estado de la peticin
alert ( oXMLHttpRequest.readyState );
}
// Definimos la funcin handler del evento
oXMLHttpRequest.onreadystatechange =fFuncion;
/*]]>*/
</script>
readyState (atributo)
El atributo readyState devuelve el estado actual del objeto
XMLHttpRequest, cada vez que cambia el valor de readyState se lanza la
funcin indicada en onreadystatechange
Utilizacin
iEstado = oXMLHttpRequest.readyState;
iEstado - Estado actual del objeto
0 - Sin inicializar, siempre ser:
1 - Abierto (acaba de llamar open)
2 Enviado
3 Recibiendo
4 - A punto
La propiedad readyState se utiliza en todas las comunicaciones
asncronas para comprobar que podemos acceder ya a atributos como
responseXML y responseText, slo accesibles en los estados 3 y 4.
readyState (atributo)
<script language="J avaScript" type="text/javascript">
/*<![CDATA[*/
// Creamos la funcin
function fFuncion () {
// Si el estado es a punto
if ( oXMLHttpRequest.readyState ==4) {
// Mostramos el texto que llega
alert ( oXMLHttpRequest.responseText );
}
}
// Definimos la funcin handler del evento
oXMLHttpRequest.onreadystatechange =fFuncion;
/*]]>*/
</script>
responseText (atributo)
El atributo responseText devuelve el texto del documento descargado
del servidor en una peticin con XMLHttpRequest.
Utilizacin
sDocumento = oXMLHttpRequest.responseText;
sDocumento - Cadena de caracteres con el texto del documento.
La propiedad responseText se utiliza para tratar los datos recibidos
desde el servidor que no tienen formato XML, podremos acceder a los
datos siempre y cuando el estado de la conexin devuelto con
readyStatechange sea igual a 3 (recibiendo) o 4 (a punto).
Siempre que podamos intentaremos usar responseXML en lugar de
responseText y XML para la los datos en lugar de texto plano.
responseText (atributo)
<script language="J avaScript" type="text/javascript">
/*<![CDATA[*/
// Creamos la funcin
function fFuncion () {
// Si el estado es a punto
if ( oXMLHttpRequest.readyState ==4) {
// Mostramos el texto que llega
alert ( oXMLHttpRequest.responseText );
}
}
// Definimos la funcin handler del evento
oXMLHttpRequest.onreadystatechange =fFuncion;
/*]]>*/
</script>
open (mtodo)
El mtodo open prepara una conexin HTTP a travs del objeto XMLHttpRequest
( con un mtodo y una URL especificados ) y inicializa todos los atributos del objeto.
Utilizacin
oXMLHttpRequest.open ( sMetodo, sURL [, bSincronia [, sUsuario [, sPwd ] ] ] );
sMetodo - String con el mtodo de conexin ( GET o POST ).
sURL - URL para la peticion HTTP
bSincronia - Booleano opcional en true para usar modo asncrono y en false para
sncrono.
sUsuario - Cadena de caracteres opcional con el nombre de usuario para la
autenticacin
sPwd - Cadena de caracteres opcional con la contrasea del usuario sUsuariopara la
autenticacin
Al llamar a open el atributo readyState a 1, resetea las cabeceras (headers) de
envo y los devuelve atributos responseText, responseXML, status y
statusText a sus valores
open (mtodo)
No se permiten las llamadas a dominios, puertos o protocolos
diferentes al de la pgina que llama la funcin
Para realizar la conexin deberemos usar send despus de open
open (mtodo)
<script language="J avaScript" type="text/javascript">
/*<![CDATA[*/
// creamos el objeto
oXMLHttp = newcXMLHttpRequest();
// pedimos la pgina en modo sncrono
oXMLHttp.open('get', 'index.htm', false);
// enviamos los datos
oXMLHttp.send();
/*]]>*/
</script>
send (mtodo)
El mtodo send enva la peticin con los datos pasados por parmetro
como cuerpo de la peticin a travs del objeto XMLHttpRequest.
Utilizacin
oXMLHttpRequest.send ( mData );
oData - Cuerpo de la peticin HTTP.
El parametro oData puede ser una referencia al DOM de un documento o
una cadena de caracteres.
send (mtodo)
<script language="J avaScript" type="text/javascript">
/*<![CDATA[*/
// creamos el objeto
oXMLHttp = newcXMLHttpRequest();
// pedimos la pgina en modo sncrono
oXMLHttp.open('get', 'index.htm', false);
// enviamos los datos
oXMLHttp.send();
/*]]>*/
</script>
1 Ejemplo. Seleccin de contenido
Vamos a crear una pgina con 3 enlaces que al pulsar sobre cada uno de
ellos nos descargue el contendido de 3 pginas doc1.html, doc2.html y
doc3.html que se encuentran ubicados en la carpeta docs.
Por ltimo los mostramos con un alert.
Los pasos a seguir seran los siguientes:
1. Crear el objeto
2. Establecer la comunicacin con el servidor usando AJAX
3. Hacer la peticin
4. El servidor nos preparar y devolver una informacin
5. Si todo es correcto mostrar la informacin devuelve
* Primer contacto con AJAX
* Analizar los resultados con FireDebug
http://127.0.0.1/ajax/ej1/index.html
Paso de parmetros (GET)
En la peticin AJ AX podemos pasar parmetros tanto por POST como por
GET a nuestro servidor.
Para pasar parmetros por GET ( por URL ) , usaremos una URL con
parmetros en la funcin open independientemente de usar el mtodo
GET o POST, por ejemplo:
oXMLHttp.open('GET', 'pagina.php?parametro=' +escape(parametro));
setRequestHeader (mtodo)
El mtodo setRequestHeader aade un encabezado HTTP a la peticin
HTTP a travs del objeto XMLHttpRequest.
Utilizacin
oXMLHttpRequest.setRequestHeader ( sNombre, sValor);
sNombre - Nombre del encabezado HTTP.
sValor - Valor del encabezado HTTP.
El parametro sNombre no podr ser Accept-Charset, Accept-Encoding,
Content-Length, Expect, Date, Host, Keep-Alive, Referer, TE, Trailer,
Transfer-Encoding ni Upgrade, tampoco podr contener espacios, puntos o
saltos de lnea.
El parametro sValor no podr contener saltos de lnea.
Solo podemos utilizar setRequestHeader cuando el valor de
readyState sea 1.
Paso de parmetros (POST)
Para pasarlos por POST, deberemos usar el mtodo POST en la funcin
open, configurar el tipo de informacin que enviamos y por ltimo
pasamos los parmetros desde la funcin send, veamos un ejemplo:
oXMLHttp.open('POST','pagina.php');
try {
oXMLHttp.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded")
} catch (e) { }
oXMLHttp.send( 'parametro=' +escape(parametro));
2 Ejemplo. Paso de parmetros
Vamos a pasar 3 parmetros a un ASP que simplemente devuelve las
variables que han llegado por mtodo GET o POST
Los parmetros son nombre=HTML dinmico avanzado (Ajax y DOM),
fechainicio="16/10/2007 y fechafin="24/10/2007"
Los pasos a seguir seran los siguientes:
1. Crear el objeto
2. Establecer la comunicacin con el servidor usando AJAX.
1. Si es con el mtodo GET adjuntar los parmetros a la direccin
3. Hacer la peticin
1. Si es el mtodo POST, especifica qu tipo de datos llegarn al
servidor
4. El servidor nos preparar y devolver una informacin
5. Si todo es correcto mostrar la informacin devuelve
* Traspaso de datos http://127.0.0.1/ajax/ej2/index.html
status (atributo)
El atributo statusText devuelve el cdigo del estado HTTP de la
transmisin devuelto por el servidor web.
Utilizacin
iEstado = oXMLHttpRequest.status;
iEstado - Entero con el cdigo HTTP de estado.
La propiedad status e utiliza para comprobar que no ha habido problemas
en la comunicacin con el servidor, podremos acceder a los datos siempre
y cuando el estado de la conexin devuelto con readyStatechange sea
igual a 3 (recibiendo) o 4 (a punto).
El cdigo de estado HTTP para una transmisin correcta es el 200, ser
conveniente comprobar este dato antes de acceder a los datos con
responseXML o responseText.
status (atributo)
100 Continua
101 Cambio de protocolo
200 OK
201 Creado
202 Aceptado
203 Informacin no oficial
204 Sin Contenido
205 Contenido para reset
206 Contenido parcial
300 Mlpiples posibilidades
301 Mudado permanentemente
302 Encontrado
303 Vea otros
304 No modificado
305 Utilice un proxy
307 Redireccin temporal
400 Solicitud incorrecta
401 No autorizado
402 Pago requerido
403 Prohibido
404 No encontrado
405 Mtodo no permitido
406 No aceptable
407 Proxy requerido
408 Tiempo de espera agotado
409 Conflicto
410 No mapas disponible
411 Requiere longitud
412 Fall precondicin
413 Entidad de solicitud demasiado larga
414 URI de solicitud demasiado largo
415 Tipo de medio no soportado
416 Rango solicitado no disponible
417 Fall expectativa
500 Error interno
501 No implementado
502 Pasarela incorrecta
503 Servicio no disponible
504 Tiempo de espera de la pasarela agotado
505 Versin de HTTP no soportada
3 Ejemplo. Llamar a una pgina que no existe
Vamos a llamar a una pgina noexiste.asp y vamos a ver que nos enva el
objeto. Qu ocurrir si llamamos a oXMLHttp.responseText ?
Los pasos a seguir seran los siguientes:
1. Crear el objeto
2. Establecer la comunicacin con el servidor usando AJAX.
3. Hacer la peticin
4. El servidor nos preparar y devolver una informacin
1. Si el cdigo es 404 mostrar un mensaje de que no existe la
pgina
2. Si el cdigo es de error (<>200) entonces mostramos el cdigo
3. Si todo es correcto entonces mostrar la respuesta
* Control de errores
http://127.0.0.1/ajax/ej3/index.html
4 Ejemplo. Devolver datos de Access
Disponemos de una base de datos Access, usuarios.mdb, que contiene
una tabla Alumnos.
Crear una pgina HTML con un enlace y un textarea, que al pulsar haga
una llamada a un ASP que consulte todos los alumnos, devuelva los datos
y los inserte en el campo textarea el listado de todos los alumnos.
* Consulta en una base de datos
* Traspaso de diferentes campos en una llamada
http://127.0.0.1/ajax/ej4/index.html
5 Ejemplo. Servicios y acciones
Disponemos de una base de datos Access, edificios.mdb, que contiene dos
tablas Edificio y Unidad.
Crear una pgina HTML con dos desplegables, uno para los edificios y otro
para las unidades de ese edificio. Al pulsar un edificio, se hace una
llamada que consulta en un APS
* Concepto de Servicios
* Devolver cdigo J avascript
* Uso de tipos de eventos
http://127.0.0.1/ajax/ej5/index.html
6 Ejemplo. Mejorando el ejemplo anterior
El objetivo del ejercicio es mejorar el 5 ejercicio.
1. Consulta de los edificios desde la base de datos
1. Conversin del fichero de HTML a ASP
2. Organizar cdigo
1. Clase cXMLHttpRequest.js
2. acciones.js
3. Gestin en array de todos los objetos cXMLHttpRequest
4. Pasar un parmetro a la funcin que gestiona lo que llega de la
peticin AJ AX
5. Liberar todos los objetos
* Concepto de bloqueos
* Reutilizacin de cdigo
http://127.0.0.1/ajax/ej6/index.asp