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
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'  esc
  ape(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 nombreHTML 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
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

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 (ltgt200) 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
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

http//127.0.0.1/ajax/ej4/index.html
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

http//127.0.0.1/ajax/ej5/index.html
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

http//127.0.0.1/ajax/ej6/index.asp
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 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'

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

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.