Presentación en PDF

Transcripción

Presentación en PDF

XHTML DINAMICO AVANZADO
(AJAX Y DOM)
AJAX
•
•
•
•
Conceptos y fundamentos básicos
Patrones de Ajax
Ejemplos prácticos.
Librerías estándares
Bibliografía
• Ajax in Practice
• Visual Quickstart Guide CSS, DHTML, and Ajax, Fourth Edition
• DHTML Utopia. Modern Web Design Using JavaScript & 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)
AJAX no es una tecnología. Es realmente muchas tecnologías, cada una
floreciendo por su propio mérito, uniéndose en poderosas nuevas formas.
AJAX incorpora:
•
•
•
•
•
Presentación basada en estándares usando XHTML y CSS;
Exhibición e interacción dinámicas usando el Document Object Model;
Intercambio y manipulación de datos usando XML y XSLT;
Recuperación de datos asincrónica usando XMLHttpRequest;
Y JavaScript poniendo todo junto.
Modelo clásico de aplicaciones Web
Navegador
Interfaz de usuario
Datos
HTML + CSS
Solicitud
HTTP
Servidor Web
Bases de datos
Servidor
Modelo clásico de aplicaciones Web
Solicitud
HTTP
Servidor
Datos
HTML + CSS
Bases
datos
http://cv1.cpd.ua.es/WebCv/
http://cv1.cpd.ua.es/WebCv/CtrlZonaPersonal/LoginCv.asp
Modelo AJAX de aplicaciones Web
Navegador
Interfaz de usuario
Datos
HTML + CSS
Javascript
Motor AJAX
Datos
XML
Solicitud
HTTP
Servidor Web / XML
Bases de datos
Servidor
Modelo AJAX de aplicaciones Web
http://maps.google.es/
Solicitud
HTTP
Servidor
Datos
XML
Bases
datos
¿Dónde utilizar AJAX?
•
•
•
•
•
Comunicación rápida entre usuarios
Interacción a través de formularios
Votaciones, encuestas, valoraciones, etc.
Filtrado y manipulación de datos o resultados de búsqueda
Autocompletado de campos de texto usados comúnmente
¿Dónde no utilizar AJAX?
•
•
•
•
•
•
Envíos a través de formularios simples
Búsquedas
Navegación básica
Reemplazar grandes cantidades de texto
Manipulación de la interfaz
Validación de usuarios
¿Dónde vamos a utilizar AJAX?
1.
2.
3.
4.
5.
6.
7.
8.
Traer contenido al pulsar determinados enlaces
Mini álbum de fotos
Desplegables de edificios-localizaciones
Buscador sencillo
Sugerir valores para un campo
Paginar resultados
Navegar por directorios (DHTML)
Editar campos no editables y actualizar contenido (DHTML)
Ejemplo modelo clásico de aplicaciones Web
Formulario de identificación
http://127.0.0.1/ajax/mod_clas_form1.html
Validación simple de datos
http://127.0.0.1/ajax/mod_clas_valid1.asp
Ejemplo modelo clásico de aplicaciones Web
Formulario de identificación
http://127.0.0.1/ajax/mod_clas_form2.html
El objeto XMLHttpRequest nos permite la transferencia de datos en
formato XML desde los script del navegador ( JavaScript, JScrip, VBScript,
etc.) a los del servidor (PHP, ASP, etc.) e inversamente.
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.
Permite que la interacción del usuario con la aplicación suceda
asincrónicamente (independientemente de la comunicación 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.
Creación del objeto XMLHttpRequest
• En los navegadores basados en Mozilla, la referencia a este objeto con
código Javascript es window.XMLHttpRequest.
• En cambio, en Internet Explorer tenemos que
ActiveXObject,
existiendo
varias
versiones
Microsoft.XMLHTTP y Msxml2.XMLHTTP
hacer uso de
denominadas
Así que crearemos una función 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.
Creación del objeto XMLHttpRequest (Modo 1)
var objeto = false;
if (window.XMLHttpRequest)
{
// Si es Mozilla, Safari etc
objeto = new XMLHttpRequest ();
} else if (window.ActiveXObject)
{
// pero si es IE
try
{
objeto = new ActiveXObject ("Msxml2.XMLHTTP");
}
catch (e)
{
// en caso que sea una versión antigua
try
{
objeto = new ActiveXObject ("Microsoft.XMLHTTP");
}
catch (e)
{
}
}
}
Creación del objeto XMLHttpRequest (Modo 2)
var objeto = false;
try {
objeto = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e1) {
try {
objeto = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
objeto = null;
}
}
if (! objeto ) {
if (typeof XMLHttpRequest != "undefined") {
objeto = new XMLHttpRequest();
}
}
Uso del objeto XMLHttpRequest
Cuando ya tenemos el objeto creado, disponemos de diversos métodos y
propiedades para comprobar el estado de los datos.
•
Propiedades:
• onreadystatechange
• readyState
• responseText
• responseXML
• status
• statusText
•
Métodos
• abort()
• getAllResponseHeaders()
• getresponseHeader(string header)
• open(string url,string asynch)
• send(string)
• setRequestHeader(string header,
string value)
onreadystatechange (atributo)
El atributo onreadystatechange asigna la función que se ejecutará cada
vez que readyState cambie de valor.
Utilización
oXMLHttpRequest.onreadystatechange = fFuncion;
– oXMLHttpRequest - Objeto XMLHttpRequest
– fFuncion - Función a ejecutar
Frecuentemente utilizamos onreadystatechange para definir una
función para leer los datos recibidos del servidor, en este caso en su
interior comprobaríamos que readyState tenga valor 4 y entonces
leeremos el valor de responseXML, responseText...
onreadystatechange (atributo)
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/
// Creamos la función
function fFuncion () {
// Alertamos el estado de la petición
alert ( oXMLHttpRequest.readyState );
}
// Definimos la función handler del evento
/*]]>*/
</script>
readyState (atributo)
El atributo readyState devuelve el estado actual del objeto
XMLHttpRequest, cada vez que cambia el valor de readyState se lanza la
función indicada en onreadystatechange
Utilización
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
asíncronas para comprobar que podemos acceder ya a atributos como
responseXML y responseText, sólo accesibles en los estados 3 y 4.
readyState (atributo)
/*<![CDATA[*/
// Si el estado es “a punto“
if ( oXMLHttpRequest.readyState == 4) {
// Mostramos el texto que llega
alert ( oXMLHttpRequest.responseText );
}
}
/*]]>*/
</script>
responseText (atributo)
El atributo responseText devuelve el texto del documento descargado
del servidor en una petición con XMLHttpRequest.
Utilización
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 conexión 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)
/*<![CDATA[*/
// Si el estado es “a punto“
if ( oXMLHttpRequest.readyState == 4) {
// Mostramos el texto que llega
alert ( oXMLHttpRequest.responseText );
}
}
/*]]>*/
</script>
open (método)
El método open prepara una conexión HTTP a través del objeto XMLHttpRequest
( con un método y una URL especificados ) y inicializa todos los atributos del objeto.
Utilización
oXMLHttpRequest.open ( sMetodo, sURL [, bSincronia [, sUsuario [, sPwd ] ] ] );
–
–
–
–
–
sMetodo - String con el método de conexión ( GET o POST ).
sURL - URL para la peticion HTTP
bSincronia - Booleano opcional en true para usar modo asíncrono y en false para
síncrono.
sUsuario - Cadena de caracteres opcional con el nombre de usuario para la
autenticación
sPwd - Cadena de caracteres opcional con la contraseña del usuario sUsuariopara la
autenticación
Al llamar a open el atributo readyState a 1, resetea las cabeceras (headers) de
envío y los devuelve atributos responseText, responseXML, status y
statusText a sus valores
open (método)
No se permiten las llamadas a dominios, puertos o protocolos
diferentes al de la página que llama la función
Para realizar la conexión deberemos usar send después de open
open (método)
/*<![CDATA[*/
// creamos el objeto
oXMLHttp = new cXMLHttpRequest();
// pedimos la página en modo síncrono
oXMLHttp.open('get', 'index.htm', false);
// enviamos los datos
oXMLHttp.send();
/*]]>*/
</script>
send (método)
El método send envía la petición con los datos pasados por parámetro
como cuerpo de la petición a través del objeto XMLHttpRequest.
Utilización
oXMLHttpRequest.send ( mData );
– oData - Cuerpo de la petición HTTP.
El parametro oData puede ser una referencia al DOM de un documento o
una cadena de caracteres.
send (método)
/*<![CDATA[*/
// creamos el objeto
oXMLHttp = new cXMLHttpRequest();
// pedimos la página en modo síncrono
oXMLHttp.open('get', 'index.htm', false);
// enviamos los datos
oXMLHttp.send();
/*]]>*/
</script>
1º Ejemplo. Selección de contenido
Vamos a crear una página con 3 enlaces que al pulsar sobre cada uno de
ellos nos descargue el contendido de 3 páginas 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 serían los siguientes:
1. Crear el objeto
2. Establecer la comunicación con el servidor usando AJAX
3. Hacer la petición
4. El servidor nos preparará y devolverá una información
5. Si todo es correcto mostrar la información devuelve
* Primer contacto con AJAX
* Analizar los resultados con FireDebug
http://127.0.0.1/ajax/ej1/index.html
Paso de parámetros (GET)
En la petición AJAX podemos pasar parámetros tanto por POST como por
GET a nuestro servidor.
Para pasar parámetros por GET ( por URL ) , usaremos una URL con
parámetros en la función open independientemente de usar el método
GET o POST, por ejemplo:
oXMLHttp.open('GET', 'pagina.php?parametro=' + escape(parametro));
setRequestHeader (método)
El método setRequestHeader añade un encabezado HTTP a la petición
HTTP a través del objeto XMLHttpRequest.
Utilización
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 línea.
El parametro sValor no podrá contener saltos de línea.
Solo podemos utilizar
readyState sea 1.
setRequestHeader
cuando
el
valor
de
Paso de parámetros (POST)
Para pasarlos por POST, deberemos usar el método POST en la función
open, configurar el tipo de información que enviamos y por último
pasamos los parámetros desde la función 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 parámetros
Vamos a pasar 3 parámetros a un ASP que simplemente devuelve las
variables que han llegado por método GET o POST
Los parámetros son nombre=“HTML dinámico avanzado (Ajax y DOM)“,
fechainicio="16/10/2007“ y fechafin="24/10/2007"
1. Crear el objeto
2. Establecer la comunicación con el servidor usando AJAX.
1. Si es con el método GET adjuntar los parámetros a la dirección
1. Si es el método POST, especifica qué tipo de datos llegarán al
servidor
5. Si todo es correcto mostrar la información devuelve
* Traspaso de datos
status (atributo)
El atributo statusText devuelve el código del estado HTTP de la
transmisión devuelto por el servidor web.
Utilización
iEstado = oXMLHttpRequest.status;
iEstado - Entero con el código HTTP de estado.
La propiedad status e utiliza para comprobar que no ha habido problemas
en la comunicación con el servidor, podremos acceder a los datos siempre
y cuando el estado de la conexión devuelto con readyStatechange sea
igual a 3 (recibiendo) o 4 (a punto).
El código de estado HTTP para una transmisión correcta es el 200, será
conveniente comprobar este dato antes de acceder a los datos con
responseXML o responseText.
status (atributo)
100
101
200
201
202
203
204
205
206
300
301
302
303
304
305
307
400
401
402
403
404
Continua
Cambio de protocolo
OK
Creado
Aceptado
Información no oficial
Sin Contenido
Contenido para reset
Contenido parcial
Múlpiples posibilidades
Mudado permanentemente
Encontrado
Vea otros
No modificado
Utilice un proxy
Redirección temporal
Solicitud incorrecta
No autorizado
Pago requerido
Prohibido
No encontrado
405
406
407
408
409
410
411
412
413
414
415
416
417
500
501
502
503
504
505
Método no permitido
No aceptable
Proxy requerido
Tiempo de espera agotado
Conflicto
No mapas disponible
Requiere longitud
Falló precondición
Entidad de solicitud demasiado larga
URI de solicitud demasiado largo
Tipo de medio no soportado
Rango solicitado no disponible
Falló expectativa
Error interno
No implementado
Pasarela incorrecta
Servicio no disponible
Tiempo de espera de la pasarela agotado
Versión de HTTP no soportada
3º Ejemplo. Llamar a una página que no existe
Vamos a llamar a una página noexiste.asp y vamos a ver que nos envía el
objeto. ¿Qué ocurrirá si llamamos a oXMLHttp.responseText ?
1. Crear el objeto
2. Establecer la comunicación con el servidor usando AJAX.
1. Si el código es 404 mostrar un mensaje de que no existe la
página
2. Si el código es de error (<>200) entonces mostramos el código
3. Si todo es correcto entonces mostrar la respuesta
* Control de errores
4º Ejemplo. Devolver datos de Access
Disponemos de una base de datos Access, usuarios.mdb, que contiene
una tabla Alumnos.
Crear una página 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
5º Ejemplo. Servicios y acciones
Disponemos de una base de datos Access, edificios.mdb, que contiene dos
tablas Edificio y Unidad.
Crear una página 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 código Javascript
* Uso de tipos de eventos
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. Conversión del fichero de HTML a ASP
2. Organizar código
1. Clase cXMLHttpRequest.js
2. acciones.js
3. Gestión en array de todos los objetos cXMLHttpRequest
4. Pasar un parámetro a la función que gestiona lo que llega de la
petición AJAX
5. Liberar todos los objetos
* Concepto de bloqueos
* Reutilización de código
http://127.0.0.1/ajax/ej6/index.asp

Presentación en PDF

Transcripción

Documentos relacionados

ajax - IMECAF

Prof. Braulio José Solano Rojas

Tareas Requisitos excluyentes: A su vez se valoraran

HOTEL AJAX Ubicado en Br Artigas y Avenida Chiverta, Parada 2