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
AJAX (Asynchronous JavaScript And XML)

• AJAX no es una tecnología. Es realmente muchas
  tecnologías, cada una floreciendo por su propio
  mérito, uniéndose en poderosas nuevas formas.
  AJAX incorpora
• Presentación basada en estándares usando XHTML y
  CSS
• Exhibición e interacción dinámicas usando el
  Document Object Model
• Intercambio y manipulación de datos usando XML y
  XSLT
• Recuperación de datos asincrónica usando
  XMLHttpRequest
• Y JavaScript poniendo todo junto.

5
Modelo clásico de aplicaciones Web
Navegador
Interfaz de usuario
Servidor Web
Bases de datos
Servidor
6
Modelo clásico de aplicaciones Web
Servidor
Bases datos
http//cv1.cpd.ua.es/WebCv/CtrlZonaPersonal/LoginC
v.asp
http//cv1.cpd.ua.es/WebCv/
7
Modelo AJAX de aplicaciones Web
Navegador
Interfaz de usuario
Motor AJAX
Servidor Web / XML
Bases de datos
Servidor
8
Modelo AJAX de aplicaciones Web
http//maps.google.es/
Servidor
Bases datos
9
Dónde utilizar AJAX?

• Comunicación rápida entre usuarios
• Interacción a través de formularios
• Votaciones, encuestas, valoraciones, etc.
• Filtrado y manipulación de datos o resultados de
  búsqueda
• Autocompletado de campos de texto usados
  comúnmente

10
Dónde no utilizar AJAX?

• Envíos a través de formularios simples
• Búsquedas
• Navegación básica
• Reemplazar grandes cantidades de texto
• Manipulación de la interfaz
• Validación de usuarios

11
Dónde vamos a utilizar AJAX?

• Traer contenido al pulsar determinados enlaces
• Mini álbum de fotos
• Desplegables de edificios-localizaciones
• Buscador sencillo
• Sugerir valores para un campo
• Paginar resultados
• Navegar por directorios (DHTML)
• Editar campos no editables y actualizar
  contenido (DHTML)

12
Ejemplo modelo clásico de aplicaciones Web

• Formulario de identificación
• http//127.0.0.1/ajax/mod_clas_form1.html
• Validación simple de datos
• http//127.0.0.1/ajax/mod_clas_valid1.asp

13
Ejemplo modelo clásico de aplicaciones Web

• Formulario de identificación
• http//127.0.0.1/ajax/mod_clas_form2.html

14
El objeto XMLHttpRequest

• El objeto XMLHttpRequest nos permite la
  transferencia de datos en formato XML desde los
  script del navegador ( JavaScript, JScrip,
  VBScript, etc.) a los del servidor (PHP, ASP,
  etc.) e inversamente.

15
El objeto XMLHttpRequest

• El primer en implementar esta API fue Microsoft
  con un objeto ActiveX para su navegador Internet
  Explorer 5, posteriormente empezó a incorporarse
  de forma nativa en todos los navegadores
  empezando por Firefox seguido de Apple,
  Konqueror, Opera Software, iCab y Microsoft
  Internet Explorer 7.
• El objeto se declara de forma diferente
  dependiendo del navegador, pero sus funciones son
  las mismas.

16
El objeto XMLHttpRequest

• Permite que la interacción del usuario con la
  aplicación suceda asincrónicamente
  (independientemente de la comunicación con el
  servidor). Así el usuario nunca estará mirando
  una ventana en blanco del navegador y un icono de
  reloj de arena esperando a que el servidor haga
  algo.

17
Creación del objeto XMLHttpRequest

• En los navegadores basados en Mozilla, la
  referencia a este objeto con código Javascript es
  window.XMLHttpRequest.
• En cambio, en Internet Explorer tenemos que hacer
  uso de ActiveXObject, existiendo varias versiones
  denominadas Microsoft.XMLHTTP y Msxml2.XMLHTTP

Así que crearemos una función que compruebe
mediante un If condicional si existe el primer
objeto, y en caso de que sea verdadero, crearemos
un nuevo objeto XMLHttpRequest, pero si es falso,
crearemos un ActiveXObject Microsoft.XMLHTTP,
pero si aun así no existe, por último crearemos
un Msxml2.XMLHTTP.
18
Creación del objeto XMLHttpRequest (Modo 1)

• var objeto false
• if (window.XMLHttpRequest)
• // Si es Mozilla, Safari etc
• objeto new XMLHttpRequest ()
• else if (window.ActiveXObject)
• // pero si es IE
• try
• objeto new ActiveXObject ("Msxml2.XMLHTTP")
• catch (e)
• // en caso que sea una versión antigua
• try
• objeto new ActiveXObject
  ("Microsoft.XMLHTTP")

19
Creación del objeto XMLHttpRequest (Modo 2)

• var objeto false
• try
• objeto new ActiveXObject("Msxml2.XMLHTTP")
• catch (e1)
• try
• objeto new ActiveXObject("Microsoft.XMLHTTP"
  )
• catch (e2)
• objeto null
• if (! objeto )
• if (typeof XMLHttpRequest ! "undefined")
• objeto new XMLHttpRequest()

20
Uso del objeto XMLHttpRequest

• Cuando ya tenemos el objeto creado, disponemos de
  diversos métodos y propiedades para comprobar el
  estado de los datos.

21
onreadystatechange (atributo)

• El atributo onreadystatechange asigna la función
  que se ejecutará cada vez que readyState cambie
  de valor.
• Utilización oXMLHttpRequest.onreadystatechange
  fFuncion
• oXMLHttpRequest - Objeto XMLHttpRequest
• fFuncion - Función a ejecutar
• Frecuentemente utilizamos onreadystatechange para
  definir una función para leer los datos recibidos
  del servidor, en este caso en su interior
  comprobaríamos que readyState tenga valor 4 y
  entonces leeremos el valor de responseXML,
  responseText...

22
onreadystatechange (atributo)

• ltscript language"JavaScript" type"text/javascrip
  t"gt
• /lt!CDATA/
• // Creamos la función
• function fFuncion () 
•  // Alertamos el estado de la petición
•  alert ( oXMLHttpRequest.readyState )
•  
• // Definimos la función handler del evento
• oXMLHttpRequest.onreadystatechange  fFuncion
• /gt/
• lt/scriptgt

23
readyState (atributo)

• El atributo readyState devuelve el estado actual
  del objeto XMLHttpRequest, cada vez que cambia el
  valor de readyState se lanza la función indicada
  en onreadystatechange
• Utilización
• iEstado oXMLHttpRequest.readyState
• iEstado - Estado actual del objeto
• 0 - Sin inicializar, siempre será
• 1 - Abierto (acaba de llamar open)
• 2 Enviado
• 3 Recibiendo
• 4 - A punto
• La propiedad readyState se utiliza en todas las
  comunicaciones asíncronas para comprobar que
  podemos acceder ya a atributos como responseXML y
  responseText, sólo accesibles en los estados 3 y
  4.

24
readyState (atributo)

• ltscript language"JavaScript" type"text/javascrip
  t"gt
• /lt!CDATA/
• // Creamos la función
• function fFuncion () 
•   // Si el estado es a punto
•   if ( oXMLHttpRequest.readyState   4) 
•     // Mostramos el texto que llega
•    alert ( oXMLHttpRequest.responseText )
•  
•  
•   // Definimos la función handler del evento
• oXMLHttpRequest.onreadystatechange  fFuncion 
  
• /gt/
• lt/scriptgt

25
responseText (atributo)

• El atributo responseText devuelve el texto del
  documento descargado del servidor en una petición
  con XMLHttpRequest.
• Utilización sDocumento oXMLHttpRequest.respon
  seText
• sDocumento - Cadena de caracteres con el texto
  del documento.
• La propiedad responseText se utiliza para tratar
  los datos recibidos desde el servidor que no
  tienen formato XML, 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).
• Siempre que podamos intentaremos usar
  responseXML en lugar de responseText y XML para
  la los datos en lugar de texto plano.

26
responseText (atributo)

• ltscript language"JavaScript" type"text/javascrip
  t"gt
• /lt!CDATA/
• // Creamos la función
• function fFuncion () 
•   // Si el estado es a punto
•   if ( oXMLHttpRequest.readyState   4) 
•     // Mostramos el texto que llega
•    alert ( oXMLHttpRequest.responseText )
•  
•   // Definimos la función handler del evento
• oXMLHttpRequest.onreadystatechange  fFuncion 
  
• /gt/
• lt/scriptgt

27
open (método)

• El método open prepara una conexión HTTP a través
  del objeto XMLHttpRequest ( con un método y una
  URL especificados ) y inicializa todos los
  atributos del objeto.
• Utilización oXMLHttpRequest.open ( sMetodo,
  sURL , bSincronia , sUsuario , sPwd )
• sMetodo - String con el método de conexión ( GET
  o POST ).
• sURL - URL para la peticion HTTP
• bSincronia - Booleano opcional en true para usar
  modo asíncrono y en false para síncrono.
• sUsuario - Cadena de caracteres opcional con el
  nombre de usuario para la autenticación
• sPwd - Cadena de caracteres opcional con la
  contraseña del usuario sUsuariopara la
  autenticación
• Al llamar a open el atributo readyState a 1,
  resetea las cabeceras (headers) de envío y los
  devuelve atributos responseText, responseXML,
  status y statusText a sus valores

28
open (método)

• No se permiten las llamadas a dominios, puertos o
  protocolos diferentes al de la página que llama
  la función
• Para realizar la conexión deberemos usar send
  después de open

29
open (método)

• ltscript language"JavaScript" type"text/javascrip
  t"gt
• /lt!CDATA/
• // creamos el objeto
• oXMLHttp new cXMLHttpRequest()
• // pedimos la página en modo síncrono
• oXMLHttp.open('get', 'index.htm', false)
• // enviamos los datos
• oXMLHttp.send()
• /gt/
• lt/scriptgt

30
send (método)

• El método send envía la petición con los datos
  pasados por parámetro como cuerpo de la petición
  a través del objeto XMLHttpRequest.
• Utilización oXMLHttpRequest.send ( mData )
• oData - Cuerpo de la petición HTTP.
• El parametro oData puede ser una referencia al
  DOM de un documento o una cadena de caracteres.

31
send (método)

• ltscript language"JavaScript" type"text/javascrip
  t"gt
• /lt!CDATA/
• // creamos el objeto
• oXMLHttp new cXMLHttpRequest()
• // pedimos la página en modo síncrono
• oXMLHttp.open('get', 'index.htm', false)
• // enviamos los datos
• oXMLHttp.send()
• /gt/
• lt/scriptgt

32
1º Ejemplo. Selección de contenido

• Vamos a crear una página con 3 enlaces que al
  pulsar sobre cada uno de ellos nos descargue el
  contendido de 3 páginas doc1.html, doc2.html y
  doc3.html que se encuentran ubicados en la
  carpeta docs.
• Por último los mostramos con un alert.

• 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 todo es correcto mostrar la información
  devuelve
• Primer contacto con AJAX
• Analizar los resultados con FireDebug

http//127.0.0.1/ajax/ej1/index.html
33
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)) 

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

35
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)) 
  

36
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
37
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.

38
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
39
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
40
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
41
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
42
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