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ó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 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ó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 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 HTML Por 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.