La descarga está en progreso. Por favor, espere

La descarga está en progreso. Por favor, espere

XHTML DINAMICO AVANZADO (AJAX Y DOM)

Presentaciones similares


Presentación del tema: "XHTML DINAMICO AVANZADO (AJAX Y DOM)"— Transcripción de la presentación:

1 XHTML DINAMICO AVANZADO (AJAX Y DOM)

2 AJAX Conceptos y fundamentos básicos Patrones de Ajax
Ejemplos prácticos. Librerías estándares

3 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 El objeto XMLHttpRequest

4 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)); 

5 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.

6 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)); 

7 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

8 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.

9 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

10 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

11 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

12 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

13 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

14 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

15 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';

16 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()).

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

18 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.


Descargar ppt "XHTML DINAMICO AVANZADO (AJAX Y DOM)"

Presentaciones similares


Anuncios Google