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

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

10. AJAX : Funcionamiento 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

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

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

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