Ajax

2,087 views
1,975 views

Published on

Formación sobre ajax de una hora de duración.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,087
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Ajax

  1. 1. AJAX I Seminario Jorge Nieves 1 Diciembre 2010 Duración: 1 hora.
  2. 2. me Jorge Nieves 1 Diciembre 2010
  3. 3. ¿ AJAX ? … ¿ El qué ? … Jorge Nieves 1 Diciembre 2010
  4. 4. ¿? Jorge Nieves 1 Diciembre 2010
  5. 5. ¿? Jorge Nieves 1 Diciembre 2010
  6. 6. Ahora sabemos qué NO es AJAX.. ;) Jorge Nieves 1 Diciembre 2010
  7. 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. 8. <ul><li>JavaScript - Para manejar el objeto XMLHttpRequest y DOM para tratar los datos recibidos. </li></ul><ul><li>HTML - Distribuye en la ventana del navegador los elementos de la aplicación y la información recibida por el servidor. </li></ul><ul><li>CSS - Define el aspecto de cada elemento y dato de la aplicación. Look and feel de la aplicación. </li></ul><ul><li>XML (Json)- Es el formato de los datos transmitidos del servidor al cliente (navegador) y que posteriormente serán mostrados. </li></ul><ul><li>Lenguaje de servidor - Genera la información útil en XML y la envía al navegador. </li></ul>Jorge Nieves 1 Diciembre 2010
  9. 9. Caso de uso, caso de éxito Jorge Nieves 1 Diciembre 2010
  10. 10. AJAX : Funcionamiento Jorge Nieves 1 Diciembre 2010
  11. 11. <ul><li>El usuario accede a la web que es enviada por el servidor al navegador (cliente) en formato HTML, JavaScript y CSS. </li></ul>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. 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. 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. 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. 15. Jorge Nieves 1 Diciembre 2010
  16. 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. 17. Frameworks que lo implementan Jorge Nieves 1 Diciembre 2010
  18. 18. AJAX : Lenguajes JSP?? ASP NET?? PHP?? Jorge Nieves 1 Diciembre 2010
  19. 19. AJAX : Cielo o Infierno?? Jorge Nieves 1 Diciembre 2010
  20. 20. <ul><li>Incrementa la usabilidad de las páginas web </li></ul><ul><li>Creamos webs con un interfaz muy visual sin flash </li></ul><ul><li>Optimiza el uso del ancho de banda </li></ul><ul><li>Aumenta la velocidad de visualización de datos en una web. </li></ul><ul><li>Parecerse a las aplicaciones de escritorio . </li></ul><ul><li>Evitar los tiempos de espera al usuario. </li></ul><ul><li>Porque las soluciones anteriores fallaban en algo: Java Applets, FLASH, … </li></ul><ul><li>Mejorar rendimiento . </li></ul>Jorge Nieves 1 Diciembre 2010
  21. 21. <ul><li>Las páginas con AJAX son más tediosas y complejas de desarrollar. </li></ul><ul><li>Restricción de ajax (Seguridad): Uso entre nombres de dominios distintos. </li></ul><ul><li>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). </li></ul>Jorge Nieves 1 Diciembre 2010
  22. 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. 23. ¿Funciona igual en todos los navegadores? <ul><li>http://www.w3schools.com/ajax/default.asp </li></ul>Jorge Nieves 1 Diciembre 2010
  24. 24. AJAX = ¿Moda? Jorge Nieves 1 Diciembre 2010
  25. 25. EXPERIENCIA DE USUARIO Jorge Nieves 1 Diciembre 2010
  26. 26. EXPERIENCIA DE USUARIO Jorge Nieves 1 Diciembre 2010
  27. 27. AJAX : Traza de código Jorge Nieves 1 Diciembre 2010
  28. 28. <ul><li>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. </li></ul><ul><li>Las herramientas de desarrollo de flash no son libres ( Licencias ). </li></ul><ul><li>Generalmente las páginas que contienen o usan Flash se cargan más despacio . </li></ul><ul><li>La mayor parte del contenido cargado por flash no posiciona bien en buscadores . (Aunque se han hecho adelantos). </li></ul>AJAX vs. FLASH… Jorge Nieves 1 Diciembre 2010
  29. 29. AJAX : Accesibilidad Jorge Nieves 1 Diciembre 2010
  30. 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. 31. CONSIDERACIÓN FINAL: “ PIENSA EN LO QUE NECESITA EL USUARIO” Jorge Nieves 1 Diciembre 2010
  32. 32. “ Dime y lo olvido, enséñame y lo recuerdo, involúcrame y lo aprendo” — Benjamín Franklin Jorge Nieves 1 Diciembre 2010
  33. 33. Gracias por venir! ;) Jorge Nieves 1 Diciembre 2010
  34. 34. <ul><li>Bibliografía y referencias: </li></ul><ul><li>http:// www.openajax.org / whitepapers / Introducing %20Ajax%20and% 20OpenAjax . php </li></ul><ul><li>http://www.w3schools.com/ajax/default.asp </li></ul><ul><li>http://web-kreation.com/all/101-free-photo-image-galleries-ajax-flash-php/ </li></ul><ul><li>http://www.w3schools.com/htmldom/default.asp </li></ul><ul><li>http://www.softwaresecretweapons.com/jspwiki/javascriptrefactoringforsaferfasterbetterajax </li></ul><ul><li>http://www.adaptivepath.com/ideas/essays/archives/000385.php </li></ul><ul><li>http:// ajaxpatterns.org/wiki/index.php?title = AJAXFrameworks </li></ul><ul><li>http:// www.nosolousabilidad.com / articulos / experiencia_del_usuario.htm </li></ul><ul><li>http:// www.usolab.com / wl /2008/01/el-iceberg-de-la-experiencia- d.php </li></ul><ul><li>http://www.torresburriel.com/weblog/2010/01/25/proyecto-rediseno-de-solmeliacom/ </li></ul>AJAX : ¿Algo más? Jorge Nieves 1 Diciembre 2010

×