Este documento presenta un seminario sobre AJAX impartido por Jorge Nieves el 1 de diciembre de 2010. Se explica que AJAX es una técnica para crear aplicaciones web interactivas mediante la combinación de JavaScript, HTML, CSS y XML. Se describen los pasos para implementar AJAX, incluyendo el uso del objeto XMLHttpRequest para realizar peticiones asíncronas al servidor y actualizar partes de la página. Finalmente, se discuten ventajas y desventajas de AJAX y se presentan ejemplos de su uso.

1. AJAX I Seminario Jorge Nieves 1 Diciembre 2010 Duración: 1 hora.

2. me Jorge Nieves 1 Diciembre 2010

3. ¿ AJAX ? … ¿ El qué ? … Jorge Nieves 1 Diciembre 2010

4. ¿? Jorge Nieves 1 Diciembre 2010

5. ¿? Jorge Nieves 1 Diciembre 2010

6. Ahora sabemos qué NO es AJAX.. ;) Jorge Nieves 1 Diciembre 2010

7. Técnica de desarrollo Web para crear aplicaciones interactivas mediante la combinación de tres tecnologías ya existentes… AJAX (Asynchronous JavaScript And XML) Lenguaje?? Tecnología?? Plataforma?? Jorge Nieves 1 Diciembre 2010

8. JavaScript - Para manejar el objeto XMLHttpRequest y DOM para tratar los datos recibidos. HTML - Distribuye en la ventana del navegador los elementos de la aplicación y la información recibida por el servidor. CSS - Define el aspecto de cada elemento y dato de la aplicación. Look and feel de la aplicación. XML (Json)- Es el formato de los datos transmitidos del servidor al cliente (navegador) y que posteriormente serán mostrados. Lenguaje de servidor - Genera la información útil en XML y la envía al navegador. Jorge Nieves 1 Diciembre 2010

9. Caso de uso, caso de éxito Jorge Nieves 1 Diciembre 2010

10. AJAX : Funcionamiento Jorge Nieves 1 Diciembre 2010

11. El usuario accede a la web que es enviada por el servidor al navegador (cliente) en formato HTML, JavaScript y CSS. AJAX : Funcionamiento AJAX hola mundo Clickando este enlace realiza la petición de ajax y muestra el contenido en la caja de abajo ACCEDO A LA PÁGINA WEB Jorge Nieves 1 Diciembre 2010

12. AJAX : Funcionamiento 2. El usuario realiza alguna acción en la pantalla (Clicka en un enlace que dispara una acción mediante ajax). AJAX hola mundo Clickando este enlace realiza la petición de ajax y muestra el contenido en la caja de abajo <h2>AJAX hola mundo</h2> <div> Clickando <a href=“#” onclick=“peticion(‘respuesta.jsp’);” title=“”>este enlace</a> realiza la petición de ajax y muestra el contenido en la caja de abajo</div> <div id=“caja-respuesta”></div> CLICK! Jorge Nieves 1 Diciembre 2010

13. AJAX : Funcionamiento 3. En ese momento, el código JavaScript cargado en la web pide al servidor (mediante el objeto XMLHttpRequest) los datos que quiere mostrar AJAX hola mundo Clickando este enlace realiza la petición de ajax y muestra el contenido en la caja de abajo <h2>AJAX hola mundo</h2> <div> Clickando <a href=“#” onclick=“peticion(‘respuesta.jsp’);” title=“”>este enlace</a> realiza la petición de ajax y muestra el contenido en la caja de abajo</div> <div id=“caja-respuesta”></div> NAVEGADOR CLIENTE SERVIDOR PETICIÓN RESPUESTA .....................ESPERA....... Jorge Nieves 1 Diciembre 2010

14. AJAX : Funcionamiento 4. El servidor ejecuta un código de lado de servidor que envía al navegador los datos en formato XML, Html o Json (Encapsulamientos de información). AJAX hola mundo Clickando este enlace realiza la petición de ajax y muestra el contenido en la caja de abajo Hola Iasoft! Estos datos han sido recibidos mediante AJAX !! <h2>AJAX hola mundo</h2> <div> Clickando <a href=“#” onclick=“peticion(‘respuesta.jsp’);” title=“”>este enlace</a> realiza la petición de ajax y muestra el contenido en la caja de abajo</div> <div id=“caja-respuesta”></div> var cajaRespuesta = document.getElementsById(“caja-respuesta”); cajaRespuesta.innerHtml(respuesta); Jorge Nieves 1 Diciembre 2010

15. Jorge Nieves 1 Diciembre 2010

16. AJAX : ¿Cómo lo implementamos? function createRequestObject (){ var req; if( window.XMLHttpRequest ){ req = new XMLHttpRequest(); } else if(window.ActiveXObject){ //For IE 5+ , IE…A lovely browser… req = new ActiveXObject (&quot;Microsoft.XMLHTTP&quot;); } else{ } return req; } //Make the XMLHttpRequest Object var http = createRequestObject(); function sendRequest ( method , url){ if(method == 'get' || method == 'GET'){ http. open (method,url); http.onreadystatechange = handleResponse; /*call back función que controla cambios de estado*/ http. send (null); } } function handleResponse (){ /*readyState: estado actual de la llamada (si realizada) 0 - Sin inicializar, siempre será: 1 - Abierto (acaba de llamar open) 2 – Enviado 3 – Recibiendo 4 - A punto*/ /*status: Estado genérico de la conexión HTTP 200: Completado con éxito 404: No se encontró URL*/ if(http. readyState == 4 && http.status == 200){ var response = http.responseText; /*responseText: contenido devuelto: xml, html, json, texto plano*/ if(response){ document.getElementById(&quot; ajax_res &quot;).innerHTML = response; } } } Jorge Nieves 1 Diciembre 2010

17. Frameworks que lo implementan Jorge Nieves 1 Diciembre 2010

18. AJAX : Lenguajes JSP?? ASP NET?? PHP?? Jorge Nieves 1 Diciembre 2010

19. AJAX : Cielo o Infierno?? Jorge Nieves 1 Diciembre 2010

20. Incrementa la usabilidad de las páginas web Creamos webs con un interfaz muy visual sin flash Optimiza el uso del ancho de banda Aumenta la velocidad de visualización de datos en una web. Parecerse a las aplicaciones de escritorio . Evitar los tiempos de espera al usuario. Porque las soluciones anteriores fallaban en algo: Java Applets, FLASH, … Mejorar rendimiento . Jorge Nieves 1 Diciembre 2010

21. Las páginas con AJAX son más tediosas y complejas de desarrollar. Restricción de ajax (Seguridad): Uso entre nombres de dominios distintos. Sitios con Ajax usa más recursos en el servidor. (Se usa más veces el servidor no aumenta el uso del ancho de banda). Jorge Nieves 1 Diciembre 2010

22.  MALAS NOTICIAS: CUESTA MÁS HACER UNA WEB.  BUENAS NOTICIAS: EL USUARIO FINAL ESTARÁ MÁS SATISFECHO DEL PRODUCTO.  Jorge Nieves 1 Diciembre 2010

23. ¿Funciona igual en todos los navegadores? http://www.w3schools.com/ajax/default.asp Jorge Nieves 1 Diciembre 2010

24. AJAX = ¿Moda? Jorge Nieves 1 Diciembre 2010

25. EXPERIENCIA DE USUARIO Jorge Nieves 1 Diciembre 2010

26. EXPERIENCIA DE USUARIO Jorge Nieves 1 Diciembre 2010

27. AJAX : Traza de código Jorge Nieves 1 Diciembre 2010

28. Ajax no necesita ningún plugin (flashplayer) para ser visualizado en el navegador y se acerca más a los estándares de la W3C. Las herramientas de desarrollo de flash no son libres ( Licencias ). Generalmente las páginas que contienen o usan Flash se cargan más despacio . La mayor parte del contenido cargado por flash no posiciona bien en buscadores . (Aunque se han hecho adelantos). AJAX vs. FLASH… Jorge Nieves 1 Diciembre 2010

29. AJAX : Accesibilidad Jorge Nieves 1 Diciembre 2010

30. AJAX : Casos de uso Carrito de la compra con ajax: http:// icondock.com /icons/ http:// citysurfshops.co.uk http://demo.tutorialzine.com/2009/09/shopping-cart-php-jquery/demo.php Web realizada por ajax (tabs): http:// nettuts.s3 . amazonaws.com /011_ jQuerySite / sample / index.html#terms http://www.glassbox-js.com/#about Gmaps http:// www.wikimapia.org /#lat=25.7998912&lon=0.3515625&z=11&l=3&m= b&tag =4979 (Gmaps) Validación y envío de formularios por ajax: http:// demo.tutorialzine.com /2009/08/ creating -a- facebook - like - registration - form - with - jquery / (registro en línea) http:// midmodesign.com / downloads /ajaxcontactformv1/ (registro en línea) http:// res.nodstrum.com / autoComplete / index.htm (auto completar) http://www.webdesignbeach.com/beachbar/ajax-fancy-captcha-jquery-plugin Captcha con ajax: Ventanas deslizantes (Envío de datos de configuración mediante ajax): ( http://my.yahoo.com/ ) (My Yahoo!) http:// yensdesign.com / tutorials / shoutbox / ( Chat) http://jquery.com/demo/thickbox/ ( Ventanas modales) http:// www.mysqlajaxtableeditor.com /Example1. php (Filtrados, ordenaciones y listados más vistosos) http:// www.ajaxf1 . com /demo/ ajaxupload / (Upload) Jorge Nieves 1 Diciembre 2010

31. CONSIDERACIÓN FINAL: “ PIENSA EN LO QUE NECESITA EL USUARIO” Jorge Nieves 1 Diciembre 2010

32. “ Dime y lo olvido, enséñame y lo recuerdo, involúcrame y lo aprendo” — Benjamín Franklin Jorge Nieves 1 Diciembre 2010

33. Gracias por venir! ;) Jorge Nieves 1 Diciembre 2010

34. Bibliografía y referencias: http:// www.openajax.org / whitepapers / Introducing %20Ajax%20and% 20OpenAjax . php http://www.w3schools.com/ajax/default.asp http://web-kreation.com/all/101-free-photo-image-galleries-ajax-flash-php/ http://www.w3schools.com/htmldom/default.asp http://www.softwaresecretweapons.com/jspwiki/javascriptrefactoringforsaferfasterbetterajax http://www.adaptivepath.com/ideas/essays/archives/000385.php http:// ajaxpatterns.org/wiki/index.php?title = AJAXFrameworks http:// www.nosolousabilidad.com / articulos / experiencia_del_usuario.htm http:// www.usolab.com / wl /2008/01/el-iceberg-de-la-experiencia- d.php http://www.torresburriel.com/weblog/2010/01/25/proyecto-rediseno-de-solmeliacom/ AJAX : ¿Algo más? Jorge Nieves 1 Diciembre 2010