Ajax Huancayo

Aplicaciones AJAX Presentado por : Mayer Horna García Jonathan Lara Vasquez 15 de Octubre, 2008 [email_address] COREIS - Huancayo [email_address]

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

Comportamiento de una aplicación de escritorio BD BD SELECT * FROM Provincia WHERE departamento_id = 2 Servidor Cliente departamentoId=2 request MantenimientoCalles_jsp.html <<build>> MantenimientoCalles.jsp response Comportamiento de una aplicación de web departamentoId=2 SELECT * FROM Distrito WHERE provincia_id = 12 SELECT * FROM Calle WHERE distrito_id = 23 provinciaId=12 distritoId=23 SELECT * FROM Provincia WHERE departamento_id = 2 distritoId=23 request MantenimientoCalles_jsp.html <<build>> MantenimientoCalles.jsp SELECT * FROM Calle WHERE distrito_id = 23 response SELECT * FROM Provincia WHERE departamento_id = 2 i1.1 provincia distrito calle

Comportamiento de una aplicación Web + AJAX BD Servidor Cliente request response SELECT * FROM Provincia WHERE departamento_id = 2 Motor AJAX Objeto XMLHttpRequest departamentoId=2 new XMLHttpRequest() request response SELECT * FROM Calle WHERE distrito_id = 23 distritoId=23 new XMLHttpRequest() i1.2 i2 <?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

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 E x tensible M arkup L anguage (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” ?>  <!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 iniciada 1 = Cargando 2 = Cargado 3 = Interactivo 4 = 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 undefined oCliente.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 privada this.nombres = null; // propiedad pública this.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 : valor color : “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 Ext Grillas

Interfaces hechas bajo Ext Uso de Layouts

Interfaces hechas bajo Ext Grillas con datos agrupados

Interfaces hechas bajo Ext Desktop

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/

Ajax Huancayo

Más contenido relacionado

La actualidad más candente (20)

Destacado (6)

Similar a Ajax Huancayo (20)

Último (20)

Ajax Huancayo