Upload File

aplicaciones web - quegrande.orgquegrande.org/apuntes/ei/opt/iu/teoria/08-09/ajax.pdfajax vs modelo...

  • Home
  • Documents
  • Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/ajax.pdfAJAX vs modelo tradicional Core El objeto XMLHttpRequest incluye la funcionalidad necesaria. No
25
Aplicaciones Web AJAX David Cabrero Souto Grupo MADS (http://www.grupomads.org/) Universidade da Coruña

Upload: others

Post on 07-Aug-2020

3 views

Category:

Documents


0 download

Report

TRANSCRIPT

Page 1: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/ajax.pdfAJAX vs modelo tradicional Core El objeto XMLHttpRequest incluye la funcionalidad necesaria. No

Aplicaciones WebAJAX

David Cabrero Souto

Grupo MADS (http://www.grupomads.org/)Universidade da Coruña

Page 2: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/ajax.pdfAJAX vs modelo tradicional Core El objeto XMLHttpRequest incluye la funcionalidad necesaria. No

Introducción

Asynchronous Javascript and XML.Tecnología conocida.Buzz: Gmail, Web2.0, . . .Santillana del Mar:

Asynchronous, pero también síncrono.XML, pero también JSON.

Page 3: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/ajax.pdfAJAX vs modelo tradicional Core El objeto XMLHttpRequest incluye la funcionalidad necesaria. No

Introducción

Asynchronous Javascript and XML.Tecnología conocida.Buzz: Gmail, Web2.0, . . .Santillana del Mar:

Asynchronous, pero también síncrono.XML, pero también JSON.

Page 4: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/ajax.pdfAJAX vs modelo tradicional Core El objeto XMLHttpRequest incluye la funcionalidad necesaria. No

Introducción

Asynchronous Javascript and XML.Tecnología conocida.Buzz: Gmail, Web2.0, . . .Santillana del Mar:

Asynchronous, pero también síncrono.XML, pero también JSON.

Page 5: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/ajax.pdfAJAX vs modelo tradicional Core El objeto XMLHttpRequest incluye la funcionalidad necesaria. No

Introducción

Asynchronous Javascript and XML.Tecnología conocida.Buzz: Gmail, Web2.0, . . .Santillana del Mar:

Asynchronous, pero también síncrono.XML, pero también JSON.

Page 6: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/ajax.pdfAJAX vs modelo tradicional Core El objeto XMLHttpRequest incluye la funcionalidad necesaria. No

Introducción

Asynchronous Javascript and XML.Tecnología conocida.Buzz: Gmail, Web2.0, . . .Santillana del Mar:

Asynchronous, pero también síncrono.XML, pero también JSON.

Page 7: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/ajax.pdfAJAX vs modelo tradicional Core El objeto XMLHttpRequest incluye la funcionalidad necesaria. No

AJAX vs modelo tradicional

Page 8: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/ajax.pdfAJAX vs modelo tradicional Core El objeto XMLHttpRequest incluye la funcionalidad necesaria. No

Core

El objeto XMLHttpRequest incluye la funcionalidadnecesaria.No forma parte de ningún estándarRealiza peticiones GET o POST.Asíncrono (habitual) o síncrono.Al recibir la respuesta invoca el callback correspondiente.

Page 9: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/ajax.pdfAJAX vs modelo tradicional Core El objeto XMLHttpRequest incluye la funcionalidad necesaria. No

Core

El objeto XMLHttpRequest incluye la funcionalidadnecesaria.No forma parte de ningún estándarRealiza peticiones GET o POST.Asíncrono (habitual) o síncrono.Al recibir la respuesta invoca el callback correspondiente.

Page 10: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/ajax.pdfAJAX vs modelo tradicional Core El objeto XMLHttpRequest incluye la funcionalidad necesaria. No

Core

El objeto XMLHttpRequest incluye la funcionalidadnecesaria.No forma parte de ningún estándar (¿Todavía?)Realiza peticiones GET o POST.Asíncrono (habitual) o síncrono.Al recibir la respuesta invoca el callback correspondiente.

Page 11: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/ajax.pdfAJAX vs modelo tradicional Core El objeto XMLHttpRequest incluye la funcionalidad necesaria. No

Core

El objeto XMLHttpRequest incluye la funcionalidadnecesaria.No forma parte de ningún estándar (¿Todavía?)Realiza peticiones GET o POST.Asíncrono (habitual) o síncrono.Al recibir la respuesta invoca el callback correspondiente.

Page 12: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/ajax.pdfAJAX vs modelo tradicional Core El objeto XMLHttpRequest incluye la funcionalidad necesaria. No

AJAX roundtrip

Page 13: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/ajax.pdfAJAX vs modelo tradicional Core El objeto XMLHttpRequest incluye la funcionalidad necesaria. No

Cross-browser XMLHttpRequest

Existen diferencias entre navegadores.

function newXMLHttpRequest() {var xmlreq = null;

if (window.XMLHttpRequest) {xmlreq = new XMLHttpRequest();

}else if (window.ActiveXObject) {

try {xmlreq = new ActiveXObject("Msxml2.XMLHTTP");

} catch (e1) {try {xmlreq = new ActiveXObject("Microsoft.XMLHTTP");

}catch (e2) {}

}}return xmlreq;

}

Page 14: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/ajax.pdfAJAX vs modelo tradicional Core El objeto XMLHttpRequest incluye la funcionalidad necesaria. No

Navegadores sin XMLHttpRequest

Imitar funcionalidad con frames.iframe en XHTML.Idea:

Los frames se cargan de forma asíncrona.Usar un frame oculto.Respuesta = contenido del frame.El evento onload dispara el callback.

Page 15: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/ajax.pdfAJAX vs modelo tradicional Core El objeto XMLHttpRequest incluye la funcionalidad necesaria. No

Navegadores sin XMLHttpRequest

Imitar funcionalidad con frames.iframe en XHTML.Idea:

Los frames se cargan de forma asíncrona.Usar un frame oculto.Respuesta = contenido del frame.El evento onload dispara el callback.

Page 16: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/ajax.pdfAJAX vs modelo tradicional Core El objeto XMLHttpRequest incluye la funcionalidad necesaria. No

Petición XMLHttpRequest

Ejemplo de petición.

var req = newXMLHttpRequest();var handler = getReadyStateHandler(req, hacer_algo);req.onreadystatechange = handler;

req.open("POST", "una_url", true);

req.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

req.send("action=add&item=xxxxxx");

Page 17: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/ajax.pdfAJAX vs modelo tradicional Core El objeto XMLHttpRequest incluye la funcionalidad necesaria. No

readystatechange

El evento onreadystatechange se lanza cada vez quecambia el estado de la petición.

req.onreadystatechange = getReadyStateHandler(req, hacer_algo);

function getReadyStateHandler(req, responseHandler) {return function() {

if (req.readyState == 4) {if (req.status == 200) {

responseHandler(req.responseXML);}else {

alert("HTTP error: "+req.status);}

}}

}

Page 18: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/ajax.pdfAJAX vs modelo tradicional Core El objeto XMLHttpRequest incluye la funcionalidad necesaria. No

Respuesta XML

La respuesta es un documento XML.Usamos XML DOM.

var cart = resp.getElementsByTagName("cart")[0];if (cart.getAttribute("generated") > lastCartUpdate) {// Actualizar el documeno XHTML...

}

Page 19: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/ajax.pdfAJAX vs modelo tradicional Core El objeto XMLHttpRequest incluye la funcionalidad necesaria. No

Respuesta XML

La respuesta es un documento XML.Usamos XML DOM.

var cart = resp.getElementsByTagName("cart")[0];if (cart.getAttribute("generated") > lastCartUpdate) {// Actualizar el documeno XHTML...

}

Page 20: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/ajax.pdfAJAX vs modelo tradicional Core El objeto XMLHttpRequest incluye la funcionalidad necesaria. No

Respuesta JSON (I)

La respuesta también está disponible sin procesar (texto).

responseHandler(req.responseText);

Podemos enviar la respuesta en formato libre.Podemos enviar al respuesta en formato JSON.JSON: JavaScript Object Notation.Sintaxis de JSON = sintaxis Javascript para declarar datos:

var grupo = {nombre: "The Beatles",miembros: [

{nombre: "John",instrumentos: ["Vocals", "Guitar", "Piano"]

},...

Page 21: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/ajax.pdfAJAX vs modelo tradicional Core El objeto XMLHttpRequest incluye la funcionalidad necesaria. No

Respuesta JSON (I)

La respuesta también está disponible sin procesar (texto).

responseHandler(req.responseText);

Podemos enviar la respuesta en formato libre.Podemos enviar al respuesta en formato JSON.JSON: JavaScript Object Notation.Sintaxis de JSON = sintaxis Javascript para declarar datos:

var grupo = {nombre: "The Beatles",miembros: [

{nombre: "John",instrumentos: ["Vocals", "Guitar", "Piano"]

},...

Page 22: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/ajax.pdfAJAX vs modelo tradicional Core El objeto XMLHttpRequest incluye la funcionalidad necesaria. No

Respuesta JSON (I)

La respuesta también está disponible sin procesar (texto).

responseHandler(req.responseText);

Podemos enviar la respuesta en formato libre.Podemos enviar al respuesta en formato JSON.JSON: JavaScript Object Notation.Sintaxis de JSON = sintaxis Javascript para declarar datos:

var grupo = {nombre: "The Beatles",miembros: [

{nombre: "John",instrumentos: ["Vocals", "Guitar", "Piano"]

},...

Page 23: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/ajax.pdfAJAX vs modelo tradicional Core El objeto XMLHttpRequest incluye la funcionalidad necesaria. No

Respuesta JSON (I)

La respuesta también está disponible sin procesar (texto).

responseHandler(req.responseText);

Podemos enviar la respuesta en formato libre.Podemos enviar al respuesta en formato JSON.JSON: JavaScript Object Notation.Sintaxis de JSON = sintaxis Javascript para declarar datos:

var grupo = {nombre: "The Beatles",miembros: [

{nombre: "John",instrumentos: ["Vocals", "Guitar", "Piano"]

},...

Page 24: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/ajax.pdfAJAX vs modelo tradicional Core El objeto XMLHttpRequest incluye la funcionalidad necesaria. No

Respuesta JSON (II)

El servidor manda la respuesta en formato JSON.

{nombre: "The Beatles",miembros: [{nombre: "John",instrumentos: ["Vocals", "Guitar", "Piano"]

},...

El cliente recupera la repuesta y la convierte en objetosJavascript.

var jsonExpression = "(" + req.responseText + ")";var grupo = eval(jsonExpression);

var nombre = grupo.nombre;...

Page 25: Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/ajax.pdfAJAX vs modelo tradicional Core El objeto XMLHttpRequest incluye la funcionalidad necesaria. No

Respuesta JSON (II)

El servidor manda la respuesta en formato JSON.

{nombre: "The Beatles",miembros: [{nombre: "John",instrumentos: ["Vocals", "Guitar", "Piano"]

},...

El cliente recupera la repuesta y la convierte en objetosJavascript.

var jsonExpression = "(" + req.responseText + ")";var grupo = eval(jsonExpression);

var nombre = grupo.nombre;...


Cole Opt Eros

Curso 2021-2022 · 6 Procesos Estocásticos Opt. 40028 6 Ecuaciones en derivadas parciales Opt. 40030 Análisis real Opt. 40031 6 Álgebra conmutativa y computacional Opt. 40032 6

Modelo ·T· (Soft V16.3x) CNC 8035 · Número de ejes 3 3 3 3 2 2 Disco duro Opt Opt Opt Opt Opt Opt Roscado electrónico Stand Stand Stand Stand Stand Stand Gestión del almacén

Marca 2on opt

Marca 6on opt

T7-Fase de transicion - QueGrande.orgquegrande.org/apuntes/EI/OPT/PAI/teoria/07-08/tema_7_-_fase_de... · main en cada clase que permitiera probar su ejecución (poco cómodo y poco

Carga Ref Opt

Cita Nif7 Opt

Marca 3on opt

Cole Opt Era

Arquitectura de Gestión OSI - QueGrande.orgquegrande.org/apuntes/EI/OPT/XR/teoria/09-10/gestion_osi_2010.pdf · único a los elementos del modelo de información (clases, atributos,

Man 8035m Opt

Ética, Derecho y datos personales - QueGrande.orgquegrande.org/apuntes/EI/OPT/AXDI/teoria/11-12/tema_12.pdf · las relaciones entre la Ética y el Derecho. La tesis de la vinculación

Opt redes logistica2

Marca 4on opt

Revista 56 opt

GESTIÓN INTERNET 2.3 SMI - QueGrande.orgquegrande.org/apuntes/EI/OPT/XR/teoria/08-09/05_-_gestion_internet... · GESTIÓN DE REDES El subárbol 1.3.6.1 se refiere a la subrama de

Lingas Opt

Marca 7on opt

Introducción Redes de Comunicaciones - QueGrande.orgquegrande.org/apuntes/EI/OPT/XR/teoria/08-09/02_-_introduccion... · 1 Introducción Redes de Comunicaciones Paula Montoto Castelao

Celarayn catalogo opt

Seminario Fatiga2015 Opt

T2-El proceso unificado - QueGrande.orgquegrande.org/apuntes/EI/OPT/PAI/teoria/07-08/tema_2_-_el_proceso... · versión del RUP desarrollado por Rational Software para la ingeniería

Stylo42 opt

Marca 5on opt

Objetivos - QueGrande.orgquegrande.org/apuntes/EI/OPT/ADOO/teoria/11-12/teoria_adoo_2011... · ... Solaris, HP-UX, AIX, ... Las operaciones y sus parámetros se describen en un fichero

Alta revista zona centro, edición 93 opt opt

HISTORIA CLINICA ELECTRONICA - quegrande.orgquegrande.org/apuntes/EI/OPT/IB/teoria/09-10/historia_clinica...genérico y un lenguaje para la representar y comunicar la definición de

Gimp Opt 4

Introducción David Cabrero Souto - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/accesibilidad.pdf · Las soluciones privativas no están al alcance de cualquiera.

Citanif 9 opt

Jardines2do1 opt

XMLHttpRequest / AJAX

Opt, periodismo virtual3

Aplicaciones Web - QueGrande.orgquegrande.org/apuntes/EI/OPT/IU/teoria/08-09/xhtml___css.pdf · XML, XPath, XSLT, XLink, XSD, ... MathML, SMIL, SVG ... (HTML) de presentación (CSS)