Aspectos Avanzados de Programación Web (I) Aplicaciones ... · Uso de XMLHttpRequest Proceso de...
Transcript of Aspectos Avanzados de Programación Web (I) Aplicaciones ... · Uso de XMLHttpRequest Proceso de...
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 // [email protected]
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