XHTML DINAMICO AVANZADO (AJAX Y DOM)

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

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 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" • Los pasos a seguir serían los siguientes: • Crear el objeto • Establecer la comunicación con el servidor usando AJAX. • Si es con el método GET adjuntar los parámetros a la dirección • Hacer la petición • Si es el método POST, especifica qué tipo de datos llegarán al servidor • El servidor nos preparará y devolverá una información • 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 con responseXML o responseText.

status (atributo) • 100 Continua • 101 Cambio de protocolo • 200 OK • 201 Creado • 202 Aceptado • 203 Información no oficial • 204 Sin Contenido • 205 Contenido para reset • 206 Contenido parcial • 300 Múlpiples posibilidades • 301 Mudado permanentemente • 302 Encontrado • 303 Vea otros • 304 No modificado • 305 Utilice un proxy • 307 Redirección temporal • 400 Solicitud incorrecta • 401 No autorizado • 402 Pago requerido • 403 Prohibido • 404 No encontrado • 405 Método no permitido • 406 No aceptable • 407 Proxy requerido • 408 Tiempo de espera agotado • 409 Conflicto • 410 No mapas disponible • 411 Requiere longitud • 412 Falló precondición • 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 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: • Crear el objeto • Establecer la comunicación con el servidor usando AJAX. • Hacer la petición • El servidor nos preparará y devolverá una información • Si el código es 404 mostrar un mensaje de que no existe la página • Si el código es de error (<>200) entonces mostramos el código • 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. • Consulta de los edificios desde la base de datos • Conversión del fichero de HTML a ASP • Organizar código • Clase cXMLHttpRequest.js • acciones.js • Gestión en array de todos los objetos cXMLHttpRequest • Pasar un parámetro a la función que gestiona lo que llega de la petición AJAX • Liberar todos los objetos • * Concepto de bloqueos • * Reutilización de código http://127.0.0.1/ajax/ej6/index.asp

7º Ejemplo. Noticias dinámicas • Disponemos de una base de datos Access, noticias.mdb, que contiene una tabla con noticia. • Vamos a crear un tablón dinámico de • noticias en la página Plantilla HTML que se ha dejado como material. • Cada 10 segundos se escoge aleatoriamente una noticia y se actualiza en la sección correspondiente de la página • * Uso de temporizadores • * Modificación de contenido en etiquetas

innerHTML (Javascript) • innerHTML sirve para "escribir" dentro de un elemento HTMLPor ejemplo, si tienes un div: <div id="pepe"></div>Puedes utilizar este código para poner algo dentro:document.getElementById('pepe').innerHTML = 'Hola, soy yo';

setTimeout (Javascript) • Esta función crea un temporizador el cual dispara un reloj con los milisegundos que indicamos. Al cumplirse el tiempo indicado se ejecuta el código que le hayamos indicado. • var identificador = setTimeout("expresión-javascript",milisegundos) • La función devuelve un identificador cada vez que se ejecuta. Este número podemos almacenarlo en una variable para utilizarlo posteriormente en otros métodos (por ejemplo clearTimeout()).

clearTimeout (Javascript) • Su efecto es el de detener la ejecución de un temporizador lanzado con setTimeout. • clearTimeout (identificador)

Generar un número aleatorio (ASP) • Randomize • Necesario antes de llamar a Rnd() para conseguir que los números no se repitan. • Rnd( ) • Genera un número, pseudo aleatorio, entre 0 y 1. • Debe apoyarse en Randomize para evitar que se repita.

XHTML DINAMICO AVANZADO (AJAX Y DOM)