XHTML DINAMICO AVANZADO

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
• http//www.ajaxhispano.com/ajax-nuevo-acercamiento
  -aplicaciones-web.html
• El objeto XMLHttpRequest
• http//www.programacionweb.net/articulos/articulo/
  ?num386

4
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
5
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
6
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

7
innerHTML (Javascript)

• innerHTML sirve para "escribir" dentro de un
  elemento HTMLPor ejemplo, si tienes un div
  ltdiv id"pepe"gtlt/divgtPuedes utilizar este
  código para poner algo dentrodocument.getElemen
  tById('pepe').innerHTML 'Hola, soy yo'

8
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-javascri
  pt",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()).

9
clearTimeout (Javascript)

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

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