Ajax en 3 Capas Ing. Pedro Luis Rodriguez. El Cliente/Servidor WEB Cliente: Navegador WEB. Internet Explorer, Mozilla FireFox Cliente: Navegador WEB.

Presentación del tema: "Ajax en 3 Capas Ing. Pedro Luis Rodriguez. El Cliente/Servidor WEB Cliente: Navegador WEB. Internet Explorer, Mozilla FireFox Cliente: Navegador WEB."— Transcripción de la presentación:

1 Ajax en 3 Capas Ing. Pedro Luis Rodriguez

2 El Cliente/Servidor WEB Cliente: Navegador WEB. Internet Explorer, Mozilla FireFox Cliente: Navegador WEB. Internet Explorer, Mozilla FireFox Tecnologías: HTML, JavaScript, CSS Tecnologías: HTML, JavaScript, CSS Servidor: Servidores WEB. Apache, IIS Servidor: Servidores WEB. Apache, IIS Tecnologías: CGI, ASP, PHP, Servlet, JSP, ASP.NET Tecnologías: CGI, ASP, PHP, Servlet, JSP, ASP.NET Se comunican por HTTP Se comunican por HTTP

3 AJAX Asynchronous JavaScript And XML (Jesse James Garret) Asynchronous JavaScript And XML (Jesse James Garret) AJAX: Una fusión de tecnologías. El todo es más que la suma de sus partes AJAX: Una fusión de tecnologías. El todo es más que la suma de sus partes Asíncrono XMLHttpRequest Asíncrono XMLHttpRequest Creado por Microsoft Creado por Microsoft JavaScript JavaScript XML XML

4 Ir al Servidor XMLHttpRequest XMLHttpRequest Texto Texto XML XML JSON (JavaScript Object Notation) JSON (JavaScript Object Notation)http://www.json.org Conexión con diferentes servidores Conexión con diferentes servidores En el servidor: PHP, JSP, ASP.NET En el servidor: PHP, JSP, ASP.NET

5 Modelo AJAX

6 Iniciando XMLHttpRequest Internet Explorer Internet Explorer IE6+ IE6+ objreq=new ActiveXObject("Msxml2.XMLHTTP"); objreq=new ActiveXObject("Msxml2.XMLHTTP"); Menor a IE6 Menor a IE6 objreq=new ActiveXObject("Microsoft.XMLHTTP"); objreq=new ActiveXObject("Microsoft.XMLHTTP"); Mozilla FireFox y otros navegadores Mozilla FireFox y otros navegadores objreq=new XMLHttpRequest(); objreq=new XMLHttpRequest();

7 Enviando Petición HTTP objreq.onreadystatechange=respuestaServidor;objreq.open("GET","pagina2.php",true); objreq.setRequestHeader("Content-type","application/x- www-form-urlencoded"); var parametros=""; objreq.setRequestHeader("Content-length",parametros.length);objreq.setRequestHeader("Connection","close");objreq.send(parametros);

8 Recibiendo la Respuesta function respuestaServidor() function respuestaServidor() { if (objreq.readyState==4) if (objreq.readyState==4){ if (objreq.status==200) if (objreq.status==200) { var obj=document.getElementById("divajax"); var obj=document.getElementById("divajax"); obj.innerHTML=objreq.responseText; obj.innerHTML=objreq.responseText; }} } Ver Ejemplos

9 Una Respuesta XML Pedr o 37 Pedr o 37 JavaScript dispone de un API para XML JavaScript dispone de un API para XML Ver Ejemplos

10 Una Respuesta JSON {'nombre':'Pedro','edad':'37'} {'nombre':'Pedro','edad':'37'} JavaScript depende de la función eval para utilizar JSON JavaScript depende de la función eval para utilizar JSON Ver Ejemplos

11 Comparación de Respuestas XML XML es un estándar XML es un estándar Una respuesta en XML puede ser procesada por APIs de distintos lenguajes Una respuesta en XML puede ser procesada por APIs de distintos lenguajes Las estructuras de datos complejas son más comprensibles en XML Las estructuras de datos complejas son más comprensibles en XML JSON JSON es una tecnología JavaScript JSON usa eval y esto conlleva a riesgos de seguridad Las tramas de datos en JSON son mas cortas que las de XML

12 3 Capas Ajax es ideal para el modelo de 3 capas MVC Ajax es ideal para el modelo de 3 capas MVC Modelo: de lado del servidor. Una clase que tiene los métodos del negocio Modelo: de lado del servidor. Una clase que tiene los métodos del negocio Vista: de lado del cliente (navegador WEB). HTML y Ajax. La interfaz al usuario. Vista: de lado del cliente (navegador WEB). HTML y Ajax. La interfaz al usuario. Controlador: de lado del servidor. Es quien atiende las peticiones de AJAX Controlador: de lado del servidor. Es quien atiende las peticiones de AJAX Ver Ejemplos

13 Quienes Usan AJAX Gmail (Correo Electronico) Gmail (Correo Electronico) Google Maps (Mapas) Google Maps (Mapas) Google Sky (El Espacio) Google Sky (El Espacio) Google Docs (Documentos) Google Docs (Documentos) Meebo.com (Mensajería) Meebo.com (Mensajería) Flickr (Fotografías) Flickr (Fotografías) Ver Ejemplos

14 APIs AJAX Empresas y grupos crean sus propias librerías AJAX Empresas y grupos crean sus propias librerías AJAX Ejemplo : APIs Google Maps Ejemplo : APIs Google Maps Ver Ejemplos

15 En lugar de Ajax Flex (Adobe Flash) Flex (Adobe Flash) Java FX (Sun Microsystems) Java FX (Sun Microsystems) AJAX es libre, Flex y Java FX son gratuitos, pero propietarios AJAX es libre, Flex y Java FX son gratuitos, pero propietarios Flex y Java FX son totalmente orientado a objetos Flex y Java FX son totalmente orientado a objetos