Ajax en 3 Capas Ing. Pedro Luis Rodriguez

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

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

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

Modelo AJAX

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();

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);

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

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

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

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

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

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

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

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