{"id":97,"date":"2010-09-08T14:33:46","date_gmt":"2010-09-08T14:33:46","guid":{"rendered":"http:\/\/blog.espol.edu.ec\/chjorive\/?p=97"},"modified":"2010-09-08T20:13:10","modified_gmt":"2010-09-08T20:13:10","slug":"desarrollando-aplicaciones-web-con-ajax","status":"publish","type":"post","link":"https:\/\/blog.espol.edu.ec\/chjorive\/2010\/09\/08\/desarrollando-aplicaciones-web-con-ajax\/","title":{"rendered":"DESARROLLANDO APLICACIONES WEB CON AJAX"},"content":{"rendered":"<p><a href=\"http:\/\/blog.espol.edu.ec\/chjorive\/files\/2010\/09\/AJAX.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-98\" title=\"AJAX\" src=\"http:\/\/blog.espol.edu.ec\/chjorive\/files\/2010\/09\/AJAX-300x150.jpg\" alt=\"\" width=\"300\" height=\"150\" srcset=\"https:\/\/blog.espol.edu.ec\/chjorive\/files\/2010\/09\/AJAX-300x150.jpg 300w, https:\/\/blog.espol.edu.ec\/chjorive\/files\/2010\/09\/AJAX.jpg 316w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>En esta ocasi\u00f3n les quiero platicar sobre la tecnolog\u00eda AJAX pero primero quiero comentarles acerca de sus inicios para aquellos que no est\u00e1n familiarizados con el termino.<\/p>\n<p>El termino AJAX t\u00e9rmino se present\u00f3 por primera vez en el art\u00edculo llamado \"Ajax: A New Approach to Web Applications\" (\u00c1yax: Un Nuevo Acercamiento a las Aplicaciones de Web) publicado por Jesse James Garrett el 18 de Febrero de 2005.<\/p>\n<p>Pero a pesar de que el t\u00e9rmino \u201cAjax\u201d fuese creado en 2005, la historia de las tecnolog\u00edas que permiten Ajax se remonta a una d\u00e9cada antes con la iniciativa de Microsoft en el desarrollo de Scripting Remoto. Sin embargo, las t\u00e9cnicas para la carga as\u00edncrona de contenidos en una p\u00e1gina existente sin requerir recarga completa remontan al tiempo del elemento iframe (introducido en Internet Explorer 3 en 1996) y el tipo de elemento layer (introducido en Netscape 4 en 1997, abandonado durante las primeras etapas de desarrollo de Mozilla). Ambos tipos de elemento ten\u00edan el atributo \u201csrc\u201d que pod\u00eda tomar cualquier direcci\u00f3n URL externa, y cargando una p\u00e1gina que contenga java script que manipule la p\u00e1gina paterna, pueden lograrse efectos parecidos al Ajax.<\/p>\n<p>El Microsoft's Remote Scripting (o MSRS, introducido en 1998) result\u00f3 un sustituto m\u00e1s elegante para estas t\u00e9cnicas, con env\u00edo de datos a trav\u00e9s de un Apple Java el cual se puede comunicar con el cliente usando JavaScript. Esta t\u00e9cnica funcion\u00f3 en ambos navegadores, Internet Explorer versi\u00f3n 4 y Netscape Navigator versi\u00f3n 4. Microsoft la utiliz\u00f3 en el Outlook Web Access provisto con la versi\u00f3n 2000 de Microsoft Exchange Server.<\/p>\n<p>La comunidad de desarrolladores web, desarrollaron una gama de t\u00e9cnicas de scripting remoto para conseguir los mismos resultados en diferentes navegadores. Los primeros ejemplos incluyen la biblioteca JSRS en el a\u00f1o 2000, la introducci\u00f3n a la t\u00e9cnica imagen\/cookie en el mismo a\u00f1o y la t\u00e9cnica JavaScript bajo demanda (JavaScript on Demand) en 2002. En ese a\u00f1o, se realiz\u00f3 una modificaci\u00f3n por parte de la comunidad de usuarios al Microsoft's Remote Scripting para reemplazar el applet Java por XMLHttpRequest.<\/p>\n<p>Frameworks de Scripting Remoto como el ARSCIF aparecieron en 2003 poco antes de que Microsoft introdujera Callbacks en ASP. NET.<\/p>\n<p>En RESUMEN el t\u00e9rmino AJAX es un acr\u00f3nimo de Asynchronous JavaScript + XML, que se puede traducir como \"JavaScript as\u00edncrono + XML\".<\/p>\n<p>El art\u00edculo define AJAX de la siguiente forma:<\/p>\n<p>\u201cAjax no es una tecnolog\u00eda en s\u00ed mismo. En realidad, se trata de varias tecnolog\u00edas independientes que se unen de formas nuevas y sorprendentes.\u201d<\/p>\n<p><strong>Las tecnolog\u00edas que forman AJAX son:<\/strong><\/p>\n<ul>\n<li>\u25aa XMLHttpRequest, para el intercambio as\u00edncrono de informaci\u00f3n<\/li>\n<li>.\u25aa DOM, para la interacci\u00f3n y manipulaci\u00f3n din\u00e1mica de la presentaci\u00f3n.<\/li>\n<li>\u25aa XML, XSLT y JSON, para el intercambio y la manipulaci\u00f3n de informaci\u00f3n.<\/li>\n<li>\u25aa JavaScript, para unir todas las dem\u00e1s tecnolog\u00edas.<\/li>\n<li>\u25aa XHTML y CSS, para crear una presentaci\u00f3n basada en est\u00e1ndares.<\/li>\n<\/ul>\n<p><a href=\"http:\/\/blog.espol.edu.ec\/chjorive\/files\/2010\/09\/ESTRUC.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-100\" title=\"ESTRUC\" src=\"http:\/\/blog.espol.edu.ec\/chjorive\/files\/2010\/09\/ESTRUC-300x197.jpg\" alt=\"\" width=\"300\" height=\"197\" srcset=\"https:\/\/blog.espol.edu.ec\/chjorive\/files\/2010\/09\/ESTRUC-300x197.jpg 300w, https:\/\/blog.espol.edu.ec\/chjorive\/files\/2010\/09\/ESTRUC.jpg 455w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Sin lugar a dudas Google es uno de los grandes responsables de la popularizaci\u00f3n de AJAX, al usarla en varias de sus aplicaciones, entre las que se cuentan Google Groups, Google Suggest, Google Maps y el servicio de correo electr\u00f3nico gratuito Gmail. As\u00ed como tambi\u00e9n empresas en crecimiento que actualmente est\u00e1n desarrollando aplicaciones basadas en AJAX.<\/p>\n<p><strong>Otros aplicaciones que est\u00e1n usando AJAX:<\/strong><\/p>\n<ul>\n<li>Basecamp, servicio de gesti\u00f3n de proyectos dise\u00f1ado por 37Signals sobre plataforma Rails.<\/li>\n<li>Panoramio.com Comunidad de fotos sobre Google Maps<\/li>\n<li>Flickr. \u00c1lbumes de fotos online.<\/li>\n<li>Oddpost, servicio avanzado de webmail de Yahoo!<\/li>\n<li>24SevenOffice ERP\/CRM<\/li>\n<li>meebo Mensajer\u00eda Instant\u00e1nea desde tu navegador<\/li>\n<li>A9, buscador de Amazon<\/li>\n<\/ul>\n<p><strong>Entre sus caracter\u00edsticas tenemos Caracter\u00edsticas<\/strong><\/p>\n<p><strong>Calificar un art\u00edculo o elemento<\/strong><\/p>\n<p>Youtube nos ense\u00f1\u00f3 a calificar los videos, es una forma pr\u00e1ctica de lograr que los usuarios nos den retroalimentaci\u00f3n sobre lo que publicamos para luego tomar decisiones en base a ello o sencillamente mostrar lo m\u00e1s popular a nuestros visitantes.<\/p>\n<p><strong>Autocompletado<\/strong><\/p>\n<p>Esto nos ha sido de gran ayuda para completar formularios, visto en Google Suggest que ofrec\u00eda sugerencias de posibles b\u00fasquedas, tambi\u00e9n lo incluye GMail para ayudarnos a ingresar direcciones de correo.<\/p>\n<p><strong> Validaci\u00f3n al enviar formularios<\/strong><\/p>\n<p>Atr\u00e1s quedaron los tiempos en los que se enviaba un formulario y la p\u00e1gina se recargaba diciendo que no hab\u00edamos ingresado alg\u00fan dato, lo que a veces ocasionaba que se perdiera la informaci\u00f3n y tuvi\u00e9ramos que llenar de nuevo todos los campos, ahora con AJAX se valida y muestra de forma \u00fatil cuando hemos cometido alg\u00fan error.<\/p>\n<p><strong> Informaci\u00f3n en pesta\u00f1as<\/strong><\/p>\n<p>Mejor\u00f3 la forma de presentar la informaci\u00f3n en un sitio web haci\u00e9ndolo m\u00e1s ordenado, es com\u00fan que ahora las barras laterales de un sitio contengan al menos un m\u00f3dulo de \u00e9ste tipo.<\/p>\n<p><strong>Entre sus VENTAJAS m\u00e1s notables tenemos:<\/strong><\/p>\n<ul>\n<li>Las p\u00e1ginas con AJAX son m\u00e1s dif\u00edciles de desarrollar que las p\u00e1ginas est\u00e1ticas.<\/li>\n<li>Permite la reconfiguraci\u00f3n de la p\u00e1gina, mostrando los datos instant\u00e1neamente.<\/li>\n<li>No se necesita recargar las p\u00e1ginas en el envi\u00f3 de informaci\u00f3n\u00b4<\/li>\n<\/ul>\n<p><strong>Y entre sus DESVENTAJAS tenemos:<\/strong><\/p>\n<ul>\n<li>El sitio con Ajax usa m\u00e1s recursos en el servidor.<\/li>\n<li>C\u00f3digo oculto\u00a0tras Java Script, impidiendo a buscadores la indexaci\u00f3n de los contenidos<\/li>\n<li>Hay problemas usando Ajax entre nombres de dominios. Eso es una funci\u00f3n de seguridad.<\/li>\n<li>Los usuarios pueden no estar acostumbrados a que la p\u00e1gina no recargue, pensando que su solicitud no ha sido enviado o que no funcione.<\/li>\n<li>Requiere de muchas librer\u00edas Java script, haciendo lento la carga.<\/li>\n<\/ul>\n<p><strong> <\/strong><\/p>\n<p><strong>Hay pocos Navegadores que permiten Ajax como por ejemplo:<\/strong><\/p>\n<p><a href=\"http:\/\/blog.espol.edu.ec\/chjorive\/files\/2010\/09\/navegadores-web.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-99\" title=\"navegadores-web\" src=\"http:\/\/blog.espol.edu.ec\/chjorive\/files\/2010\/09\/navegadores-web-300x180.jpg\" alt=\"\" width=\"300\" height=\"180\" srcset=\"https:\/\/blog.espol.edu.ec\/chjorive\/files\/2010\/09\/navegadores-web-300x180.jpg 300w, https:\/\/blog.espol.edu.ec\/chjorive\/files\/2010\/09\/navegadores-web.jpg 600w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p><strong><br \/>\n<\/strong><\/p>\n<ol>\n<li>Opera versi\u00f3n 8.0 y superiores, incluyendo Opera Mobile Browser versi\u00f3n 8.0 y superiores.<\/li>\n<li>Navegadores basados en Gecko como Mozilla, Mozilla Firefox, SeaMonkey, Camino, K-Meleon, IceWeasel, Flock, Epiphany, Galeon y Netscape versi\u00f3n 7.1 y superiores<\/li>\n<li>Microsoft Internet Explorer para Windows versi\u00f3n 5.0 y superiores, y los navegadores basados en \u00e9l<\/li>\n<li>Navegadores con el API KHTML versi\u00f3n 3.2 y superiores implementado, incluyendo Konqueror versi\u00f3n 3.2 y superiores, Apple Safari versi\u00f3n 1.2 y superiores, y el Web Browser for S60 de Nokia tercera generaci\u00f3n y posteriores<\/li>\n<li>Google Chrome<\/li>\n<\/ol>\n<p><strong>A continuaci\u00f3n los Navegadores que no permiten Ajax<\/strong><\/p>\n<ul>\n<li>Safari 1.2 y anteriores<\/li>\n<li>Microsoft Internet Explorer para Windows versi\u00f3n 4.0 y anteriores<\/li>\n<li>Opera 7 y anteriores<\/li>\n<li>Algunos navegadores de tel\u00e9fonos m\u00f3viles<\/li>\n<li>Navegadores basados en texto como Lynx y Links<\/li>\n<li>Navegadores para personas con capacidades especiales visuales (Braille)<\/li>\n<li>Navegador de la PSP<\/li>\n<li>Dillo<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>En esta ocasi\u00f3n les quiero platicar sobre la tecnolog\u00eda AJAX pero primero quiero comentarles acerca de sus inicios para aquellos que no est\u00e1n familiarizados con el termino. El termino AJAX t\u00e9rmino se present\u00f3 por primera vez en el art\u00edculo llamado \"Ajax: A New Approach to Web Applications\" (\u00c1yax: Un Nuevo Acercamiento a las Aplicaciones de [&hellip;]<\/p>\n","protected":false},"author":4562,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[20654],"tags":[],"class_list":["post-97","post","type-post","status-publish","format-standard","hentry","category-api-world"],"_links":{"self":[{"href":"https:\/\/blog.espol.edu.ec\/chjorive\/wp-json\/wp\/v2\/posts\/97","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.espol.edu.ec\/chjorive\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.espol.edu.ec\/chjorive\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.espol.edu.ec\/chjorive\/wp-json\/wp\/v2\/users\/4562"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.espol.edu.ec\/chjorive\/wp-json\/wp\/v2\/comments?post=97"}],"version-history":[{"count":3,"href":"https:\/\/blog.espol.edu.ec\/chjorive\/wp-json\/wp\/v2\/posts\/97\/revisions"}],"predecessor-version":[{"id":102,"href":"https:\/\/blog.espol.edu.ec\/chjorive\/wp-json\/wp\/v2\/posts\/97\/revisions\/102"}],"wp:attachment":[{"href":"https:\/\/blog.espol.edu.ec\/chjorive\/wp-json\/wp\/v2\/media?parent=97"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.espol.edu.ec\/chjorive\/wp-json\/wp\/v2\/categories?post=97"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.espol.edu.ec\/chjorive\/wp-json\/wp\/v2\/tags?post=97"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}