Ajax Huancayo

Aplicaciones AJAX

Presentado por :

Mayer Horna García Jonathan Lara Vasquez

15 de Octubre, 2008

jonathanlarav@gmail.com

COREIS - Huancayo

mayerhorna@gmail.com

Agenda

Preparar el entorno de desarrollo web bajo IDE Eclipse, levantar los proyectos del taller, instalar el Spket IDE, instalar el firebug

Comparativa entre aplicaciones de escritorio, web y web + ajax AJAX – Conceptos

Javascript XML JSON

Anatomía de una aplicación AJAX El objeto XMLHTTPRequest Conversación con el servidor Trabajar con datos devueltos como XML Trabajar con datos devueltos como JSON Frameworks AJAX Uso de ExtJS

BD

BD

Comportamiento de una aplicación de escritorio

SELECT * FROM Provincia

WHERE departamento_id = 2

provincia

ServidorCliente

departamentoId=2request

MantenimientoCalles_jsp.html

<<build>>

MantenimientoCalles.jsp

response

Comportamiento de una aplicación de web

departamentoId=2

distrito SELECT * FROM Distrito

WHERE provincia_id = 12 SELECT * FROM Calle

WHERE distrito_id = 23

provinciaId=12distritoId=23

calle

SELECT * FROM Provincia

WHERE departamento_id = 2

distritoId=23request

MantenimientoCalles_jsp.html

<<build>>

MantenimientoCalles.jsp

SELECT * FROM CalleWHERE distrito_id = 23

response

SELECT * FROM Provincia

WHERE departamento_id = 2

i1.1

BD

Comportamiento de una aplicación Web + AJAX

ServidorCliente

request

response

SELECT * FROM Provincia WHERE departamento_id = 2

<?xml version=\"1.0\" ?>

<provincias>

<provincia> Huara </provincia> <provincia> Trujillo </provincia> <provincia> Chimbote </provincia>

</provincias>

provincias.xml

<?xml version=\"1.0\" ?>

<provincias>

<provincia> Huara </provincia> <provincia> Trujillo </provincia> <provincia> Chimbote </provincia>

</provincias>

distrito.xml

MotorAJAX

Objeto XMLHttpRequest

departamentoId=2new XMLHttpRequest()request

response

SELECT * FROM CalleWHERE distrito_id = 23

distritoId=23new XMLHttpRequest()

i1.2

i2

AJAX“Asynchronous Javascript y XML”

(JavaScript asíncrono y XML)

Es una técnica de desarrollo web para crear aplicaciones interactivas o RIA (Rich Internet Applications). Implica el uso coordinado de distintas tecnologías que en conjunto permiten una mayor rapidez y eficacia para las aplicaciones basadas en la web.

Estas aplicaciones se ejecutan en el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre las páginas sin necesidad de recargarlas, lo que significa aumentar la velocidad y usabilidad en las aplicaciones.

Javascript

Fue desarrollado originalmente por Brendan Eich de Netscape con el nombre de Mocha, más tarde renombrado a LiveScript, y finalmente a JavaScript. El cambio de nombre de LiveScript a JavaScript coincidió aproximadamente con el momento en que Netscape agregó soporte para la tecnología Java en su navegador web Netscape Navigator. JavaScript fue presentado y desarrollado en diciembre de 1995. La denominación ha causado confusión, dando la impresión de que el lenguaje es un prolongación de Java, y se ha caracterizado por muchos como una estrategia de marketing de Netscape.

JavaScript es un lenguaje de programación interpretado, es decir, que no requiere compilación, utilizado principalmente en páginas web, con una sintaxis semejante a la del lenguaje Java.

No es un lenguaje de Programación Orientada a Objetos propiamente dicho como Java, pero sí es un lenguaje de programación basado en objetos.

XML

Extensible Markup Language (lenguaje de marcas ampliable),

XML no ha nacido sólo para su aplicación en Internet, sino que se propone como un estándar para el intercambio de información estructurada entre diferentes plataformas.

Estructura de un documento XML La tecnología XML busca dar solución al problema de expresar información

estructurada de la manera más abstracta y reutilizable.

<?xml version="1.0“ encoding=“UTF-8” ?><!DOCTYPE movimientos SYSTEM “movimientos.dtd" [<!ELEMENT movimientos (movimiento)*>]>

<movimientos> <movimiento> <fecha> 06/09/2008 </fecha> <descripcion> Retiro por cajero </descripcion> <monto> -100.00 </monto> </movimiento> <movimiento> <fecha> 05/09/2008 </fecha> <descripcion> Transferencia de otra cuenta </descripcion> <monto> 320.00 </monto> </movimiento>

</movimientos>

Y el DTD(Document Type Definition) para este XML sería:

<?xml version="1.0" enconding=“UTF-8” ?>

<!-- Este es el DTD de Edit_Mensaje --><!ELEMENT movimiento (fecha, descripcion, monto)*> <!ELEMENT fecha (#PCDATA)> <!ELEMENT descripcion (#PCDATA)> <!ELEMENT monto (#PCDATA)>

movimientos.xml

movimientos.dtd

Conversación tradicional Cliente - Servidor

Interacción AJAX Cliente - Servidor

Flujo del proceso de una aplicación AJAX

Respuestas del servidor(HTTP Response)

Código de Status

Razón Explicación

200 OK Petición correcta

204 No Content Documento sin datos

301 Moved Permanently Recurso Movido

401 Not Authorized Necesita autentificación

403 Forbidden Rechazada por servidor

404 Not Found No existe en servidor

408 Request Timeout Tiempo sobrepasado

500 Server Error Error en el servidor

El objeto XMLHTTPRequest

Su objetivo es hacer peticiones asíncronas al servidor.

Es la columna vertebral de todas las aplicaciones AJAX.

Es admitido por todos los navegadores.

Microsoft lo introdujo en IE 5 como un objeto ActiveX

Propiedades del objeto XMLHTTPRequest

Propiedades Descripción

Onreadystatechange Determina que función será llamada cuando la propiedad readyState del objeto cambie.

readyState Número entero que indica el status de la petición:0 = No iniciada1 = Cargando2 = Cargado3 = Interactivo4 = Completado

responseText Datos devueltos por el servidor en forma de string de texto

responseXML Datos devueltos por el servidor expresados como un objeto documento.

status Código estatus HTTP devuelto poro el servidor:200 = OK (Petición correcta)204 = No Content (Documento sin datos)301 = Moved Permanently (Recurso Movido)401 = Not Authorized (Necesita autenticación)403 = Forbidden (Rechazada por servidor)404 = Not Found (No existe en servidor)408 = Request Timeout (Tiempo sobrepasado)500 = Server Error (Error en el servidor)

Métodos del objeto XMLHTTPRequest

Propiedades Descripción

abort() Detiene la petición actual.

getAllResponseHeaders() Devuelve todas las cabeceras como un string.

getResponseHeader(x) Devuelve el valor de la cabecera x como un string.

open(‘method’, ’URL’, ’a’ ) Especifica el método HTTP (por ejemplo, GET o POST), la URL objetivo, y si la petición debe ser manejada asíncronamente (Si, a=‘True’ defecto; No, a=‘false’.)

send(content) Envía la petición

setRequestHeader( ‘label’ , ’value’ ) Configura un par parámetro y valor label=value y lo asigna a la cabecera para ser enviado con la petición.

Clases y Objetos en JavaScript

var oCliente = new Cliente();oCliente.dni = “43035678”;oCliente.nombres = “Luis”;oCliente.apellidos = “Perez A.”;

alert(“Hola ” + oCliente. obtenerNombreCompleto() );

/** Clase Cliente **/function Cliente(){

this.dni = null;this.nombres = null;this.apellidos = null;this.obtenerNombreCompleto = function(){ return this.nombres + " " + this.apellidos;}

}

1

Javascript no es un lenguaje de Programación Orientada a Objetos propiamente dicho como Java, pero sí es un lenguaje de programación basado en objetos.

En Javascript hay tres tipos de objetos:Objetos nativos de Javascript. Por ejemplo: Math, Date, Image, Number, String, Array…

Objetos de navegador. Aquellos que proporciona el navegador del cliente. Por ejemplo: window, document, forms...

Objetos definidos por el usuario: Son aquellos que define el propio programador.

Métodos y propiedades privadas

var oCliente = new Cliente();oCliente.nombres = “Luis”;oCliente.apellidos = “Perez A.”;

alert(“DNI ” + oCliente.dni);// muestra undefinedoCliente.setDni(“44035698”);alert(“DNI ” + oCliente.getDni() ); // muestra 44035698//alert(oCliente.obtenerSoloNombre() ); // marcaría el siguiente error: “El objeto no acepta esta propiedad o metodo”

/** Clase Cliente **/function Cliente(){

var dni = null; // propiedad privadathis.nombres = null; // propiedad públicathis.apellidos = null;var that = this; // propiedad privada, almacena la referencia del objeto actual(this), para poder utilizarlo en métodos privados como sucede en obtenerSoloNombre().

function obtenerSoloNombre(){ // método privado return that.nombres;}this.obtenerNombreCompleto = function(){ // método público return this.nombres + " " + this.apellidos;}this.setDni(dni){ this.dni = dni;}this.getDni(){

return this.dni;}

}

2

Para privatizar metodos y propiedades basta con ya no poner la palabra this.

Para acceder a las propiedades privadas se deberá crear sus getters y setters como se estila hacer en otros lenguajes de programación OO

Herencia en JavaScript

var oEmpleado = new Empleado(); oEmpleado.nombres = "43035678"; oEmpleado.apellidos = "Luis"; oEmpleado.salario = 3000; alert("Metodo del padre " + oEmpleado.obtenerNombreCompleto() ); alert("Metodo del hijo " + oEmpleado.obtenerSalario() );

/** Clase Persona **/function Persona(){

this.nombres = null;this.apellidos = null;this.obtenerNombreCompleto = function(){ return this.nombres + " " + this.apellidos;}

}

3

La herencia en JavaScript no es explicita, es emulada.

/** Clase Cliente hereda de Persona **/function Empleado(){

this.codigo = null;this.salario = null;this.obtenerSalario = function(){ return this.salario;}

}Empleado.prototype = new Persona(); /* Clona la funcionalidad de

Persona en Empleado */

JSON (JavaScript Object Notation)

¿Que es?

Basado en sintaxis

JavaScript

Formato de datos

muy ligero

Especialmente basado en

Arrays literales y Objetos

literales

Alternativa al

formato XML

Objetos Literales

Almacenan información en pares

nombre : valorcolor : “rojo”,

Se puede acceder a

Estas propiedades

Mediante el nombre del

objeto y la sintaxis de punto.

Mediante corchetes y nombre

de la propiedad

4

Arrays Literales

Formato de datos

muy ligero [ y ]

Y por encerrar lista de valores

serparados por comas [ “string”, 24 , true, null ]

5

Mezclar Literales

Es posible mezclar

literales objeto y

array

Array que contiene objetos

6, 7.1 , 7.2 , 8

Objetos que contienen arrays

Librerías AJAX Existen cientos de frameworks en el mercado, de acuerdo con una encuesta

del 2007, estos son los más usados:

Dojo toolkit, Toolkit Modular JavaScript.

Ext (javascript library), una librería que expande Prototype, Jquery y YUI.

jQuery, provee un framework Ajax y muchas otras utilidades.

Mootools, un framework compacto y modular mejor conocido por sus transiciones y efectos.

Prototype, provee framework Ajax y muchas otras utilidades.

qooxdoo, framework de aplicaciones Ajax. Es multiproposito e inclulle un toolkit GUI.

Script.aculo.us, es utilizado con Prototype principalmente para animaciones y desarrollo de interfaces.

Yahoo! UI Library, un conjunto de utilidades y controles para construir aplicaciones web enriquecidas usando técnicas como DOM scripting y AJAX.

Ext

Es un framework AJAX.

Es de licencia pública general (GPL).

También tiene licencia comercial, para empresas que hacen aplicaciones propietarias con este framework y que no están dispuestos a distribuir y compartir el código fuente de su aplicación bajo la licencia GPL.

Ext Descargar Ext y su documentación

http://extjs.com/download

– En la carpeta examples se encuentran todos los ejemplos de como crear formularios, paneles, grillas, etc.

Interfaces hechas bajo Ext

Formularios

Interfaces hechas bajo ExtGrillas

Interfaces hechas bajo ExtUso de Layouts

Interfaces hechas bajo ExtGrillas con datos agrupados

Interfaces hechas bajo ExtDesktop

Interfaces hechas bajo Ext Manejo de imágenes

Conclusiones

Las aplicaciones AJAX hacen que la experiencia del usuario en la navegación sea menos aburrida. Ya no se refresca la página constantemente al interactuar con ella.

Con AJAX el tiempo de espera para una petición se reduce. El usuario al hacer un pedido (request) al servidor, no se envía toda la página. Por la misma razón anterior el trafico al servidor se reduce.

Las consideraciones que uno debe tener en cuenta es que puede haber problemas si el usuario ha deshabilitado el uso de JavaScript en su navegador. Hay que tener esto en cuenta cuando desarrollamos aplicaciones web.

No es bueno abusar de AJAX. Demasiado código Ajax hace lento el navegador. A más Ajax, más uso de código JavaScript del lado del browser, por consiguiente mayor trabajo del browser. El rendimiento del cpu puede verse afectado.

Links de referencia Tutoriales de JavaScript, HTML, APIS, etc

http://www.w3school.com

Web oficial de EXT http://www.extjs.com/

Documentacion de las clases de EXT http://extjs.com/deploy/dev/docs/

Foro oficial de Ext JS http://extjs.com/forum/

Grupo Yahoo para aprendizaje de JAVA, .NET, PHP , AJAX http://groups.yahoo.com/group/ing_sistemas_huacho

Videos tutoriales de JavaScript, CSS, HTML, y muchos mas http://www.illasaron.com/html/

Gracias