Your SlideShare is downloading. ×
Ajax
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Ajax

1,837

Published on

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

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
1,837
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×