Edi

ted

with

emac

s+

LAT E

X+

pros

per

Aspectos Avanzados de Programación Web (I)

Aplicaciones Web (Curso 2014/2015)

Jesus Arias Fisteus // jaf@it.uc3m.es

Aspectos Avanzados de Programacion Web (I)– p. 1

Edi

ted

with

emac

s+

LAT E

X+

pros

per

AJAX(Asynchronous JavaScript and XML)

Aspectos Avanzados de Programacion Web (I)– p. 2

Edi

ted

with

emac

s+

LAT E

X+

pros

per

AJAX (Asynchronous JavaScript and

XML)

Nombre que se aplica al uso combinado deJavaScript y la API XMLHttpRequest para realizarpeticiones HTTP en segundo plano, sin necesidadde cargar de nuevo la página completa.

Aspectos Avanzados de Programacion Web (I)– p. 3

Edi

ted

with

emac

s+

LAT E

X+

pros

per

Programación de HTTP desde JavaS-

cript

En principio, es el navegador el que generapeticiones HTTP y procesa las respuestas.

JavaScript puede hacer que el navegador generepeticiones HTTP estableciendo el atributo src enimg, iframe y script, pero tiene problemas deportabilidad entre navegadores.

La API XMLHttpRequest permite de forma mássencilla a JavaScript realizar peticiones HTTP yprocesar sus respuestas.

Aspectos Avanzados de Programacion Web (I)– p. 4

Edi

ted

with

emac

s+

LAT E

X+

pros

per

Uso de XMLHttpRequest

Proceso de tres etapas:1. Creación del objeto XMLHttpRequest.2. Especificación y envío del mensaje HTTP al

servidor.3. Recepción (síncrona o asíncrona) de la

respuesta del servidor.

El cuerpo de los mensajes intercambiados suelerepresentarse con JSON, texto plano, HTML oXML.

Aspectos Avanzados de Programacion Web (I)– p. 5

Edi

ted

with

emac

s+

LAT E

X+

pros

per

Peticiones asíncronas:

Se envían los datos con el método send, queretorna inmediatamente, sin esperar a que lleguela respuesta.

Se registra una función de callback que se invocacada vez que cambia el estado de la petición(propiedad readyState):

readyState == 0: sin inicializar.readyState == 1: conexión establecida.readyState == 2: petición recibida.readyState == 3: respuesta en proceso.readyState == 4: respuesta recibida.

Aspectos Avanzados de Programacion Web (I)– p. 6

Edi

ted

with

emac

s+

LAT E

X+

pros

per

Ejemplo de petición asíncrona

1 var request = new XMLHttpRequest();

23 // establecimiento de una función de callback

4 request.onreadystatechange = function() {

5 if(request.readyState == 4) {

6 if(request.status == 200) {

7 alert("Received: " + request.responseText);

8 } else { {

9 alert("Error: returned status code " + request.status

10 + " " + request.statusText);

11 }

12 }

13 };

1415 // especificación de método, URL y petición asíncrona

16 request.open("GET", url, true);

1718 // envío (sin cuerpo de la petición por ser GET)

19 request.send(null);

Aspectos Avanzados de Programacion Web (I)– p. 7

Edi

ted

with

emac

s+

LAT E

X+

pros

per

Ajax con JQuery

JQuery proporciona una API de alto nivel sobreXMLHttpRequest, con funciones más cómodaspara el programador:

Una función de bajo nivel: $.ajax()Un método de alto nivel: load()Cuatro funciones de alto nivel:$.getScript(), $.getJSON(), $.get() y$.post().

Aspectos Avanzados de Programacion Web (I)– p. 8

Edi

ted

with

emac

s+

LAT E

X+

pros

per

Método load

1 // Carga el documento como contenido del elemento con id "a":

2 $("#a").load("article.html");

34 // Permite seleccionar un fragmento del documento:

5 $("#new-projects").load("/resources/load.html #projects li");

67 // Se puede registrar un manejador que se ejecutará

8 // cuando se complete la operación:

9 $("#result").load("test.html", function() {

10 alert("Load was performed.");

11 });

1213 // O cuando falle:

14 $("#success").load("/not-here.php",

15 function(response, status, xhr) {

16 if (status == "error") {

17 var msg = "Sorry but there was an error: ";

18 $("#error").html(msg + xhr.status + " " + xhr.statusText);

19 }

20 });

Aspectos Avanzados de Programacion Web (I)– p. 9

Edi

ted

with

emac

s+

LAT E

X+

pros

per

Función $.getJSON()

1 // Carga un objeto JSON:

2 $.getJSON("test.json")

3 .done(function(json) {

4 // la variable json contiene el objeto de la respuesta HTTP

5 console.log("JSON Data: " + json.users[0].name);

6 })

78 // Se pueden pasar parámetros y gestionar errores:

9 $.getJSON("test.json", {name: "John", time: "2pm"})

10 .done(function(json) {

11 console.log("JSON Data: " + json.users[0].name);

12 })

13 .fail(function(jqxhr, textStatus, error) {

14 var err = textStatus + ", " + error;

15 console.log("Request Failed: " + err);

16 });

Aspectos Avanzados de Programacion Web (I)– p. 10

Edi

ted

with

emac

s+

LAT E

X+

pros

per

Función $.get()

1 // Carga un objeto (lo interpreta automáticamente

2 // como JSON, XML, HTML o texto plano):

3 $.get("test.php", {name: "John", time: "2pm"})

4 .done(function(data) {

5 $("body")

6 .append( "Name: " + data.name )

7 .append( "Time: " + data.time );

8 };

Aspectos Avanzados de Programacion Web (I)– p. 11

Edi

ted

with

emac

s+

LAT E

X+

pros

per

Función $.post()

1 // Envía datos con POST

2 $.post("test.php", {name: "John", time: "2pm"});

34 // Envía un formulario con POST

5 $.post( "test.php", $("#testform").serialize());

67 // También se puede procesar la respuesta HTTP

8 $.post("test.php", {name: "John", time: "2pm"})

9 .done(function(data) {

10 $("body")

11 .append( "Name: " + data.name )

12 .append( "Time: " + data.time );

13 };

Aspectos Avanzados de Programacion Web (I)– p. 12

Edi

ted

with

emac

s+

LAT E

X+

pros

per

Referencias

David Flanagan. “JavaScript: The Definitive Guide”(6th Ed.) O’Reilly.

Acceso en línea en SafariCapítulos 18 y 19.

Aspectos Avanzados de Programacion Web (I)– p. 13

Edi

ted

with

emac

s+

LAT E

X+

pros

per

Nuevas APIs de HTML5

Aspectos Avanzados de Programacion Web (I)– p. 14

Edi

ted

with

emac

s+

LAT E

X+

pros

per

APIs de HTML5

HTML5, además de nuevos elementos y atributos para HTML,estandariza un conjunto de APIs para JavaScript:

Almacenamiento en el cliente.

Control de la reproducción de audio y vídeo.

Acceso a la ubicación del usuario.

Notificaciones en el escritorio.

Ejecución de tareas en otros hilos.

Dibujo en 2D y 3D.

Gráficos SVG incrustados.

Arrastrar y soltar.

Conectividad con Websocket y Server-Sent Events.

Etc.

Aspectos Avanzados de Programacion Web (I)– p. 15

Edi

ted

with

emac

s+

LAT E

X+

pros

per

Almacenamiento en el cliente

Proporciona un espacio de almacenamiento dedatos en el navegador del usuario.

Objetivos:Mejorar prestaciones.Funcionamiento en modo desconectado de laaplicación.

Aspectos Avanzados de Programacion Web (I)– p. 16

Edi

ted

with

emac

s+

LAT E

X+

pros

per

Almacenamiento en el cliente

Varias opciones:Web storage.Indexed Database.File Access.Web SQL Database (desaconsejado).

http://www.html5rocks.com/en/

features/storage

http://www.html5rocks.com/en/

tutorials/offline/storage/

Aspectos Avanzados de Programacion Web (I)– p. 17

Edi

ted

with

emac

s+

LAT E

X+

pros

per

Web Storage

Almacenamiento clave-valor.Persistente o volátil: localStorage vs.sessionStorage

Sin índices.API muy sencilla.En varias implementaciones, los valores debenser cadenas de texto.

http://dev.w3.org/html5/webstorage/

Aspectos Avanzados de Programacion Web (I)– p. 18

Edi

ted

with

emac

s+

LAT E

X+

pros

per

Web Storage

<p>

You have viewed this page

<span id="count">an untold number of</span>

time(s).

</p>

<script>

if (!localStorage.pageLoadCount)

localStorage.pageLoadCount = 0;

localStorage.pageLoadCount = parseInt(localStorage.pageLoadCount) + 1;

document.getElementById('count').textContent = localStorage.pageLoadCount;

</script>

Aspectos Avanzados de Programacion Web (I)– p. 19

Edi

ted

with

emac

s+

LAT E

X+

pros

per

IndexedDB

Almacenamiento de objetos asociados a claves.API asíncrona.Permite construir índices.Transaccional.

http://www.w3.org/TR/IndexedDB/

https://developer.mozilla.org/en-US/

docs/Web/API/IndexedDB_API/Basic_

Concepts_Behind_IndexedDB

https://developer.mozilla.org/en-US/

docs/IndexedDB/Using_IndexedDB

Aspectos Avanzados de Programacion Web (I)– p. 20

Edi

ted

with

emac

s+

LAT E

X+

pros

per

Dibujo 2D y 3D con canvas

Elemento canvas (lienzo):Reserva un espacio en la página Web sobre elcual se puede dibujar desde Javascript.Contexto de dibujo 2D: http://www.w3.org/TR/2dcontext/

Contexto de dibujo WebGL (permite 3D):http://www.khronos.org/registry/

webgl/specs/latest/1.0/.

Aspectos Avanzados de Programacion Web (I)– p. 21

Edi

ted

with

emac

s+

LAT E

X+

pros

per

Dibujo 2D con canvas

API de dibujo 2D:Dibujo de líneas, rectángulos, elipses, texto,imágenes, etc.Transformaciones de coordenadas.Dibujo sobre zonas del lienzo (clipping).Composición con transparencia.Sombras.

http://slides.html5rocks.com/#canvas-2d

Aspectos Avanzados de Programacion Web (I)– p. 22

Edi

ted

with

emac

s+

LAT E

X+

pros

per

SVG incrustado

SVG (Scalable Vector Graphics) es un estándarpara la representación de gráficos vectoriales.

Se puede incrustar en documentos HTML5.

Se puede interaccionar con Javascript en elgráfico SVG.

http://slides.html5rocks.com/#inline-svg

Aspectos Avanzados de Programacion Web (I)– p. 23

Edi

ted

with

emac

s+

LAT E

X+

pros

per

Audio y vídeo

APIs para reproducción de audio y vídeo en elnavegador:

Se puede controlar la reproducción desdeJavascript.Se puede proporcionar varios formatos delvídeo/audio, y el navegador seleccionará elmás adecuado.

http://slides.html5rocks.com/#video-audio

http://diveintohtml5.info/video.html

Aspectos Avanzados de Programacion Web (I)– p. 24

Edi

ted

with

emac

s+

LAT E

X+

pros

per

Conectividad

Nuevos mecanismos de comunicación con elservidor:

Websocket.Server-Sent Events.

Aspectos Avanzados de Programacion Web (I)– p. 25

Edi

ted

with

emac

s+

LAT E

X+

pros

per

Websocket

Protocolo y API Javascript para comunicaciónbidireccional entre cliente y servidor Web.

https://tools.ietf.org/html/rfc6455

http://www.w3.org/TR/websockets/

http://www.html5rocks.com/en/

tutorials/websockets/basics/

Aspectos Avanzados de Programacion Web (I)– p. 26

Edi

ted

with

emac

s+

LAT E

X+

pros

per

Websocket

1 var connection = new WebSocket( 'ws://example.com/echo ');

2 connection.onopen = function () {

3 // the connection is now open...

4 };

5 connection.onerror = function (error) {

6 // an error happened

7 };

8 connection.onmessage = function (msg) {

9 // a message has arrived, and is available as msg.data

10 };

1112 (...)

1314 connection.send( 'a new message ');

Aspectos Avanzados de Programacion Web (I)– p. 27

Edi

ted

with

emac

s+

LAT E

X+

pros

per

Acceso a ficheros

API FileSystem:Permite crear, escribir y leer ficheros.En un espacio aislado del sistema de ficheros.Con limitaciones de espacio dealmacenamiento utilizado.

http://www.w3.org/TR/file-system-api/

http://www.html5rocks.com/en/

tutorials/file/filesystem/

Aspectos Avanzados de Programacion Web (I)– p. 28

Edi

ted

with

emac

s+

LAT E

X+

pros

per

Notificaciones en el escritorio

Notificaciones en el escritorio:Dos tipos de mensaje:

Texto: título, texto e imagen.HTML.

La aplicación necesita solicitar permiso paramostrar notificaciones.

http://www.w3.org/TR/notifications/

http://www.html5rocks.com/en/tutorials/

notifications/quick/

http://slides.html5rocks.com/#notifications-api

Aspectos Avanzados de Programacion Web (I)– p. 29

Edi

ted

with

emac

s+

LAT E

X+

pros

per

Notificaciones en el escritorio

1 // check for notifications support

2 // you can omit the 'window ' keyword

3 if (window.webkitNotifications) {

4 console.log("Notifications are supported!");

5 }

6 else {

7 console.log("Notifications are not supported.");

8 }

910 function createNotificationInstance(options) {

11 if (options.notificationType == 'simple ') {

12 return window.webkitNotifications.createNotification(

13 'icon.png ', 'Notification Title ',

14 'Notification content... ');

15 } else if (options.notificationType == 'html ') {

16 return window.webkitNotifications.createHTMLNotification(url);

17 }

18 }

Aspectos Avanzados de Programacion Web (I)– p. 30

Edi

ted

with

emac

s+

LAT E

X+

pros

per

Notificaciones en el escritorio

1 document.querySelector( '#show_button ')

2 .addEventListener( 'click ', function() {

3 if (window.webkitNotifications.checkPermission() == 0) {

4 // 0 is PERMISSION_ALLOWED

5 createNotificationInstance({ notificationType: 'html ' });

6 } else {

7 window.webkitNotifications.requestPermission();

8 }

9 }, false);

Aspectos Avanzados de Programacion Web (I)– p. 31

Edi

ted

with

emac

s+

LAT E

X+

pros

per

Arrastrar y soltar

Arrastrar y soltar (drag and drop):Permite arrastrar objetos dentro de una página.Permite arrastrar ficheros desde el escritorio ala página:

Combinable con la API de lectura de ficheros:http://www.html5rocks.com/en/

tutorials/file/dndfiles/

http://www.w3.org/TR/html5/editing.html#dnd

http://www.html5rocks.com/en/tutorials/dnd/

basics/

http://html5demos.com/drag

Aspectos Avanzados de Programacion Web (I)– p. 32

Edi

ted

with

emac

s+

LAT E

X+

pros

per

Tareas en otros hilos

API worker:Permite lanzar tareas en otro hilo, para nobloquear el hilo principal.

Útil para tareas cuya ejecución se alargue en eltiempo.http://www.w3.org/TR/workers/

http://slides.html5rocks.com/#web-workers

Aspectos Avanzados de Programacion Web (I)– p. 33

Edi

ted

with

emac

s+

LAT E

X+

pros

per

Referencias

HTML5 Unleashed. Simon Sarris. Sams (2013).Accesible en Safari: http://proquest.safaribooksonline.com/book/

web-development/html/9780133151336

Aspectos Avanzados de Programacion Web (I)– p. 34