1 / 18

XHTML DINAMICO AVANZADO (AJAX Y DOM)

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

reece
Download Presentation

XHTML DINAMICO AVANZADO (AJAX Y DOM)

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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/?num=386

  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ónoXMLHttpRequest.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 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óniEstado = 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 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: <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.

More Related