xhtml dinamico avanzado (ajax y dom) · incorporarse de forma nativa en todos los navegadores...
TRANSCRIPT
XHTML DINAMICO AVANZADO XHTML DINAMICO AVANZADO (AJAX Y DOM)(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 Webhttp://www.ajaxhispano.com/ajax-nuevo-acercamiento-aplicaciones-web.html
El objeto XMLHttpRequesthttp://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
Servidor
Bases de datos
Navegador
Interfaz de usuario
Servidor Web
SolicitudHTTP
DatosHTML + CSS
Modelo clásico de aplicaciones Web
ServidorSolicitud
HTTP
DatosHTML + CSS
Bases datos
http://cv1.cpd.ua.es/WebCv/CtrlZonaPersonal/LoginCv.asphttp://cv1.cpd.ua.es/WebCv/
Modelo AJAX de aplicaciones Web
Servidor
Bases de datos
Navegador
Interfaz de usuario
Servidor Web / XML
Javascript DatosHTML + CSS
Motor AJAX
SolicitudHTTP
DatosXML
Modelo AJAX de aplicaciones Web
ServidorSolicitud
HTTP
DatosXML
Bases datos
http://maps.google.es/
¿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. Traer contenido al pulsar determinados enlaces2. Mini álbum de fotos3. Desplegables de edificios-localizaciones4. Buscador sencillo5. Sugerir valores para un campo6. Paginar resultados7. Navegar por directorios (DHTML)8. 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 datoshttp://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
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 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 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 hacer uso de ActiveXObject, existiendo varias versiones denominadas Microsoft.XMLHTTP y Msxml2.XMLHTTP
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 aunasí 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 etcobjeto = new XMLHttpRequest ();
} else if (window.ActiveXObject){
// pero si es IEtry{objeto = new ActiveXObject ("Msxml2.XMLHTTP");}catch (e){// en caso que sea una versión antiguatry{
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.
Métodos • 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 función que se ejecutará cada vez que readyState cambie de valor.
UtilizaciónoXMLHttpRequest.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ónfunction fFuncion () {
// Alertamos el estado de la peticiónalert ( oXMLHttpRequest.readyState );
}
// Definimos la función handler del eventooXMLHttpRequest.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 función indicada en onreadystatechange
UtilizacióniEstado = oXMLHttpRequest.readyState;iEstado - Estado actual del objeto0 - Sin inicializar, siempre será:1 - Abierto (acaba de llamar open)2 – Enviado3 – Recibiendo4 - 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)
<script language="JavaScript" type="text/javascript">/*<![CDATA[*/// Creamos la funciónfunction fFuncion () {
// Si el estado es “a punto“if ( oXMLHttpRequest.readyState == 4) {
// Mostramos el texto que llegaalert ( oXMLHttpRequest.responseText );
}}
// Definimos la función handler del eventooXMLHttpRequest.onreadystatechange = fFuncion;
/*]]>*/</script>
responseText (atributo)
El atributo responseText devuelve el texto del documento descargado del servidor en una petición con XMLHttpRequest.
UtilizaciónsDocumento = 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)
<script language="JavaScript" type="text/javascript">/*<![CDATA[*/// Creamos la funciónfunction fFuncion () {
// Si el estado es “a punto“if ( oXMLHttpRequest.readyState == 4) {
// Mostramos el texto que llegaalert ( oXMLHttpRequest.responseText );
}}
// Definimos la función handler del eventooXMLHttpRequest.onreadystatechange = fFuncion;
/*]]>*/</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ónoXMLHttpRequest.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)
<script language="JavaScript" type="text/javascript">/*<![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ónoXMLHttpRequest.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)
<script language="JavaScript" type="text/javascript">/*<![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 objeto2. Establecer la comunicación con el servidor usando AJAX3. Hacer la petición4. 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ónoXMLHttpRequest.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 setRequestHeader cuando el valor de readyState sea 1.
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 lasvariables que han llegado por método GET o POSTLos parámetros son nombre=“HTML dinámico avanzado (Ajax y DOM)“,fechainicio="16/10/2007“ y fechafin="24/10/2007"
Los pasos a seguir serían los siguientes:1. Crear el objeto2. Establecer la comunicación con el servidor usando AJAX.
1. Si es con el método GET adjuntar los parámetros a la dirección3. Hacer la petición
1. Si es el método POST, especifica qué tipo de datos llegarán al servidor
4. El servidor nos preparará y devolverá una información 5. Si todo es correcto mostrar la información devuelve
* Traspaso de datos http://127.0.0.1/ajax/ej2/index.html
status (atributo)
El atributo statusText devuelve el código del estado HTTP de la transmisión devuelto por el servidor web.
UtilizacióniEstado = 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 conresponseXML o responseText.
status (atributo)
100 Continua101 Cambio de protocolo200 OK201 Creado202 Aceptado203 Información no oficial204 Sin Contenido205 Contenido para reset206 Contenido parcial300 Múlpiples posibilidades301 Mudado permanentemente302 Encontrado303 Vea otros304 No modificado305 Utilice un proxy307 Redirección temporal400 Solicitud incorrecta401 No autorizado402 Pago requerido403 Prohibido404 No encontrado
405 Método no permitido406 No aceptable407 Proxy requerido408 Tiempo de espera agotado409 Conflicto410 No mapas disponible411 Requiere longitud412 Falló precondición413 Entidad de solicitud demasiado larga414 URI de solicitud demasiado largo415 Tipo de medio no soportado416 Rango solicitado no disponible417 Falló expectativa500 Error interno501 No implementado502 Pasarela incorrecta503 Servicio no disponible504 Tiempo de espera de la pasarela agotado505 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 ?
Los pasos a seguir serían los siguientes:1. Crear el objeto2. Establecer la comunicación con el servidor usando AJAX.3. Hacer la petición4. El servidor nos preparará y devolverá una información
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ódigo3. 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 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
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 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 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 datos1. Conversión del fichero de HTML a ASP
2. Organizar código1. Clase cXMLHttpRequest.js2. acciones.js
3. Gestión en array de todos los objetos cXMLHttpRequest4. Pasar un parámetro a la función que gestiona lo que llega de la
petición AJAX5. Liberar todos los objetos
* Concepto de bloqueos* Reutilización de código
http://127.0.0.1/ajax/ej6/index.asp