AJAX<\/strong> (Asynchronous Javascrip y XML) es una t\u00e9cnica de desarrollo web que permite crear aplicaciones web interactivas. Estas aplicaciones se ejecutan del lado del cliente y permite mantener la comunicaci\u00f3n as\u00edncrona con el servidor en segundo plano permitiendo as\u00ed realizar cambios sobre las p\u00e1ginas sin necesidad de recargarlas.<\/p>\n

En este post nos vamos a centrar en conocer el motor de la tecnolog\u00eda AJAX, es decir nos vamos a centrar\u00a0en ver c\u00f3mo funciona realmente y cu\u00e1l es el \u201cmotor\u201d que mueve toda la maquinar\u00eda de\u00a0AJAX.<\/p>\n

Aunque HTML+CSS nos proporciona el medio para presentar los contenidos mediante\u00a0p\u00e1ginas Web y XML nos ofrece un medio estandarizado para transmitir la informaci\u00f3n, es la\u00a0tecnolog\u00eda JavaScript la que verdaderamente nos aporta la posibilidad de crear la\u00a0comunicaci\u00f3n as\u00edncrona de la que hac\u00edamos referencia en el apartado de ventajas. Por este\u00a0motivo, podemos afirmar que el verdadero motor de AJAX es JavaScript<\/strong>.<\/p>\n

Comparando esta tecnolog\u00eda con\u00a0un autom\u00f3vil, podr\u00edamos decir que HTML+CSS representa el chasis\u00a0del coche, \u00a0XML el combustible y JavaScript es el motor que mueve todo.<\/em><\/p>\n

JavaScript<\/strong> es un lenguaje de programaci\u00f3n (scripting language) en el que normalmente se efect\u00faan las funciones de llamada de Ajax mientras que el acceso a los datos se realiza mediante XMLHttpRequest.<\/strong>\u00a0Este objeto est\u00e1 disponible en los navegadores actuales y es el eje central de AJAX, por lo que todos los navegadores que no lo contemplen no permitir\u00e1n trabajar con AJAX.<\/p>\n

El objeto XMLHttpRequest<\/strong> es un API implementado en el navegador Web, es decir, en la\u00a0parte cliente, que puede ser invocado desde varios lenguajes de programaci\u00f3n, entre los que\u00a0se encuentra, como es obvio, JavaScript. T\u00e9cnicamente, est\u00e1 desarrollado para crear un\u00a0canal de comunicaci\u00f3n independiente entre el servidor y la p\u00e1gina Web que se est\u00e1\u00a0mostrando en el navegador.<\/p>\n

La W3C, World Wide Web Consortium<\/strong>, \u00a0(organizaci\u00f3n internacional que crea los\u00a0est\u00e1ndares de Internet) en \u00a02006 cre\u00f3 la primera especificaci\u00f3n completa para\u00a0el objeto XMLHttpRequest. Dicha especificaci\u00f3n marca las caracter\u00edsticas m\u00ednimas que deben implementar los\u00a0navegadores que afirmen que poseen la posibilidad de usar dicho objeto para que funcione\u00a0perfectamente la aplicaci\u00f3n Web.<\/p>\n

<\/p>\n

Podr\u00edamos indicar como principales caracter\u00edsticas de AJAX que:<\/p>\n

\n
• \n

  AJAX es una uni\u00f3n de tres tecnolog\u00edas ya existentes: HTML+CSS, XML y\u00a0DOM+XMLHttpRequest.<\/p><\/blockquote>\n<\/li>\n

  \n

  HTML+CSS nos proporcionan el medio para crear una p\u00e1gina Web.<\/p><\/blockquote>\n<\/li>\n

  \n

  XML nos suministra una forma de enviar y recibir informaci\u00f3n en un formato\u00a0est\u00e1ndar.<\/p><\/blockquote>\n<\/li>\n

  \n

  JavaScript, mediante DOM y el objeto XMLHttpRequest, nos da la\u00a0posibilidad de acceder a los elementos de la p\u00e1gina Web para su modificaci\u00f3n\u00a0y establece el camino de acceso al servidor.<\/p><\/blockquote>\n<\/li>\n

  \n

  La mayor ventaja de AJAX es que posibilita una comunicaci\u00f3n as\u00edncrona con\u00a0el servidor.<\/p><\/blockquote>\n<\/li>\n

  \n

  Haciendo uso de AJAX vamos a conseguir crear aplicaciones Web interactivas\u00a0que puedan cambiar y actualizarse sin necesidad de que la p\u00e1gina deba ser\u00a0recargada desde cero; s\u00f3lo se tendr\u00e1n que recargar partes de ella.<\/p><\/blockquote>\n<\/li>\n

  \n

  No todos los navegadores tienen soporte para AJAX o alguna de sus\u00a0tecnolog\u00edas por lo que una aplicaci\u00f3n puede no funcionar.<\/p><\/blockquote>\n<\/li>\n

  \n

  El objeto XMLHttpRequest, encargado de la comunicaci\u00f3n entre el\u00a0navegador y el servidor, tiene su propia especificaci\u00f3n, desarrollada por la\u00a0W3C, con los requisitos m\u00ednimos que debe cumplir.<\/p><\/blockquote>\n<\/li>\n<\/ul>\n

  Por tanto de lo descrito aqu\u00ed deducimos que un correcto manejo de AJAX nos obliga a conocer y controlar perfectamente el objeto\u00a0XMLHttpRequest.<\/p>\n","protected":false},"excerpt":{"rendered":"

  AJAX (Asynchronous Javascrip y XML) es una t\u00e9cnica de desarrollo web que permite crear aplicaciones web interactivas. Estas aplicaciones se ejecutan del lado del cliente y permite mantener la comunicaci\u00f3n as\u00edncrona con el servidor en segundo plano permitiendo as\u00ed realizar cambios sobre las p\u00e1ginas sin necesidad de recargarlas. En este post nos vamos a centrar en conocer el motor de la tecnolog\u00eda AJAX, es decir nos vamos a centrar\u00a0en ver c\u00f3mo funciona realmente y cu\u00e1l es el \u201cmotor\u201d que mueve toda la maquinar\u00eda de\u00a0AJAX. Aunque HTML+CSS nos proporciona el medio para presentar los contenidos mediante\u00a0p\u00e1ginas Web y XML nos ofrece un medio estandarizado para transmitir la informaci\u00f3n, es la\u00a0tecnolog\u00eda JavaScript la que verdaderamente nos aporta la posibilidad de crear la\u00a0comunicaci\u00f3n as\u00edncrona de la que hac\u00edamos referencia en el apartado de ventajas. Por este\u00a0motivo, podemos afirmar que el verdadero motor de AJAX es JavaScript. Comparando esta tecnolog\u00eda con\u00a0un autom\u00f3vil, podr\u00edamos decir que HTML+CSS representa el chasis\u00a0del coche, \u00a0XML el combustible y JavaScript es el motor que mueve todo. JavaScript es un lenguaje de programaci\u00f3n (scripting language) en el que normalmente se efect\u00faan las funciones de llamada de Ajax mientras que el acceso a los datos se realiza mediante XMLHttpRequest.\u00a0Este objeto est\u00e1 […]<\/p>\n","protected":false},"author":3,"featured_media":2754,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":""},"categories":[18],"tags":[488,236,497,498],"jetpack_featured_media_url":"http:\/\/piloto.foc.es\/wp-content\/uploads\/2016\/06\/FOC-ajax.jpg","jetpack_sharing_enabled":true,"jetpack-related-posts":[{"id":2752,"url":"http:\/\/piloto.foc.es\/2016\/06\/06\/2752-tiempo-real-para-tu-app-mediante-ajax.html","url_meta":{"origin":2802,"position":0},"title":"Tiempo real para tu App mediante AJAX","date":"6 junio, 2016","format":false,"excerpt":"Como sabemos Ajax no es una tecnolog\u00eda en s\u00ed mismo. En realidad, se trata de varias tecnolog\u00edas independientes que se unen para conseguir un fin. Las tecnolog\u00edas que forman AJAX son: XHTML y CSS, para crear una presentaci\u00f3n basada en est\u00e1ndares. DOM, para la interacci\u00f3n y manipulaci\u00f3n din\u00e1mica de la\u2026","rel":"","context":"En \u00abWebinars\u00bb","img":{"alt_text":"modelo-AJAX-FOC","src":"https:\/\/i0.wp.com\/www.foc.es\/wp-content\/uploads\/2016\/06\/modelo-AJAX-FOC.gif?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3205,"url":"http:\/\/piloto.foc.es\/2017\/02\/13\/3205-quieres-crear-listas-css-con-animacion-en-javascript-como-un-programador-web-experto-pues-apuntate-con-nosotros.html","url_meta":{"origin":2802,"position":1},"title":"Quieres crear listas CSS con animaci\u00f3n en JavaScript como un programador web experto? Pues ap\u00fantate con nosotros.","date":"13 febrero, 2017","format":false,"excerpt":"A continuaci\u00f3n vamos a explicar c\u00f3mo crear listas CSS y c\u00f3mo aplicarles animaci\u00f3n con tan solo unas pocas l\u00edneas de c\u00f3digo JavaScript. En el siguiente c\u00f3digo puedes ver c\u00f3mo con unas pocas l\u00edneas en HTML y un c\u00f3digo JavaScript muy sencillo, podemos crear una lista con tres elementos, los cuales\u2026","rel":"","context":"En \u00abCertificado de Profesionalidad\u00bb","img":{"alt_text":"ListasCSS-Codigo","src":"https:\/\/i1.wp.com\/cdp.foc.es\/wp-content\/uploads\/2016\/08\/ListasCSS-Codigo.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":2746,"url":"http:\/\/piloto.foc.es\/2016\/06\/06\/2746-efectos-visuales-para-tu-app-web-mediante-jquery.html","url_meta":{"origin":2802,"position":2},"title":"Efectos visuales para tu App Web mediante JQuery","date":"6 junio, 2016","format":false,"excerpt":"JQuery\u00a0es una biblioteca de funciones y utilidades escritas en JavaScript, que permite simplificar la manera de interactuar con los documentos HTML, manipulando el objeto DOM, manejando eventos, permitiendo desarrollar animaciones, etc. (Ver m\u00e1s). En este webinar\u00a0aprender\u00e1s de un modo pr\u00e1ctico a usar la biblioteca de funciones JQuery y conocer\u00e1s el\u2026","rel":"","context":"En \u00abWebinars\u00bb","img":{"alt_text":"jqueryUI-FOC-pagina","src":"https:\/\/i1.wp.com\/www.foc.es\/wp-content\/uploads\/2016\/06\/jqueryUI-FOC-pagina.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":3581,"url":"http:\/\/piloto.foc.es\/2017\/06\/06\/3581-programar-efectos-sencillos-en-javascript-de-forma-rapida-y-eficiente.html","url_meta":{"origin":2802,"position":3},"title":"Programar efectos sencillos en JavaScript, de forma r\u00e1pida y eficiente.","date":"6 junio, 2017","format":false,"excerpt":"Con JavaScript podemos conseguir efectos sencillos y muy visuales en nuestras p\u00e1ginas web. Nuestros alumnos de IFCD0210 Desarrollo de Aplicaciones con Tecnolog\u00edas Web conocen bien como hacer estos efectos r\u00e1pidamente y de forma sencilla. Os propongo el siguiente ejercicio, vamos pintar en pantalla una tabla. Para ello nuestra peque\u00f1a aplicaci\u00f3n\u2026","rel":"","context":"En \u00abCertificado de Profesionalidad\u00bb","img":{"alt_text":"","src":"https:\/\/i1.wp.com\/piloto.foc.es\/wp-content\/uploads\/2017\/06\/pantalla-003-06-06-17.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":2756,"url":"http:\/\/piloto.foc.es\/2016\/06\/07\/2756-el-uso-de-jquery.html","url_meta":{"origin":2802,"position":4},"title":"El uso de JQuery","date":"7 junio, 2016","format":false,"excerpt":"JQuery es una biblioteca de funciones y utilidades escritas en JavaScript que permite simplificar el modo de interactuar con las web as\u00ed como de presentar la informaci\u00f3n en la misma. JQuery se ha desarrollado bajo la filosof\u00eda del software libre y de c\u00f3digo abierto y no depende de ninguna tecnolog\u00eda.\u2026","rel":"","context":"En \u00abActualidad Tecnol\u00f3gica\u00bb","img":{"alt_text":"","src":"https:\/\/i2.wp.com\/piloto.foc.es\/wp-content\/uploads\/2016\/06\/jquery-post.jpg?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":5506,"url":"http:\/\/piloto.foc.es\/2020\/07\/21\/5506-5506.html","url_meta":{"origin":2802,"position":5},"title":"Desarrollo de aplicaciones web y de escritorio","date":"21 julio, 2020","format":false,"excerpt":"Al finalizar esta sesi\u00f3n ser\u00e1s capaz de: Crear aplicaciones de escritorio Conocer la programaci\u00f3n orientada a eventos Crear aplicaciones web Conocer ASP .NET Conocer IIS Contenidos de la sesi\u00f3n: Para poder conseguir los objetivos previstos en la sesi\u00f3n trataremos los siguientes contenidos con un enfoque pr\u00e1ctico Conceptos de las aplicaciones\u2026","rel":"","context":"En \u00abActualidad Tecnol\u00f3gica\u00bb","img":{"alt_text":"Desarrollo de aplicaciones web y de escritorio","src":"https:\/\/i2.wp.com\/piloto.foc.es\/wp-content\/uploads\/2020\/07\/cabecera_post_programacion_c_sharp.jpg?resize=350%2C200","width":350,"height":200},"classes":[]}],"jetpack_shortlink":"https:\/\/wp.me\/p6jO3Y-Jc","amp_validity":null,"amp_enabled":true,"_links":{"self":[{"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/posts\/2802"}],"collection":[{"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/comments?post=2802"}],"version-history":[{"count":4,"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/posts\/2802\/revisions"}],"predecessor-version":[{"id":2807,"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/posts\/2802\/revisions\/2807"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/media\/2754"}],"wp:attachment":[{"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/media?parent=2802"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/categories?post=2802"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/piloto.foc.es\/wp-json\/wp\/v2\/tags?post=2802"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}