Saltar al contenido

¿Qué es AJAX y cómo funciona?

AJAX significa JavaScript y XML asincrónicos. Es un conjunto de técnicas de desarrollo web que permiten que las aplicaciones web funcionen de forma asincrónica, procesando cualquier solicitud al servidor en segundo plano. Espera, ¿qué es AJAX? Repasemos cada término por separado.

JavaScript es un lenguaje de programación muy conocido. Entre otras funciones, gestiona el contenido dinámico de un sitio web y permite la interacción dinámica del usuario. XML es otra variante de un lenguaje de marcado como HTML, como su nombre indica: eXtensible Markup Language. Mientras que HTML fue diseñado para mostrar datos, XML fue diseñado para contener y transportar datos.

Tanto JavaScript como XML funcionan de forma asincrónica en AJAX. Como resultado, cualquier aplicación web que utilice AJAX puede enviar y recuperar datos del servidor sin tener que recargar toda la página.

Descarga el glosario completo de desarrollo web

Ejemplos prácticos de AJAX

Tomemos como ejemplo la función de autocompletar de Google; Esto le ayuda a completar sus palabras clave a medida que las escribe. Las palabras clave cambian en tiempo real, pero la página en sí no cambia. A principios de los 90, cuando Internet no era tan avanzado, la misma función requería que Google recargara la página cada vez que aparecía una nueva recomendación en pantalla. AJAX permite que la capa de presentación y intercambio de datos funcione simultáneamente sin interferir entre sí.

ejemplo de autocompletar de google ajax
Autocompletar de Google

El concepto de AJAX existe desde mediados de la década de 1990, sin embargo, ganó un reconocimiento más amplio cuando Google comenzó a incorporar el concepto en Google Mail y Google Maps en 2004. Hoy en día, se usa ampliamente en varias aplicaciones web para agilizar el proceso de servidor. comunicación. .

Leer  Qué es renderizar: dos tipos de renderizado, cómo funciona y el mejor software

Aquí hay más ejemplos útiles de AJAX en nuestra vida diaria.

  • Sistemas de votación y clasificación.

¿Alguna vez ha evaluado un producto que compró en línea? ¿Alguna vez ha completado un formulario de votación en línea? De cualquier manera, ambas operaciones usan AJAX. Una vez que haga clic en el botón de calificación o votación, el sitio actualizará el cálculo, pero la página completa permanecerá sin cambios.

Algunos sitios web tienen un chat integrado en su página de inicio a través del cual puedes hablar con un agente de atención al cliente. No necesita preocuparse si desea explorar la página al mismo tiempo. AJAX no recargará la página cada vez que envíe y reciba un mensaje nuevo.

  • Notificación de tendencias de Twitter

Twitter incorporó recientemente AJAX para sus actualizaciones. Cada vez que se crean nuevos tweets sobre ciertos temas de tendencia, Twitter actualizará los nuevos números sin afectar la página principal.

En pocas palabras, AJAX facilita la multitarea. Si alguna vez ve una situación similar en la que dos operaciones se ejecutan simultáneamente, una en ejecución y la otra inactiva, podría ser AJAX en funcionamiento.

¿Cómo funciona AJAX?

Hay que tener en cuenta que AJAX no es una tecnología única, ni tampoco un lenguaje de programación. Como se dijo antes, AJAX es un conjunto de técnicas de desarrollo web. El sistema generalmente comprende:

  • HTML/XHTML para el idioma principal y CSS para la presentación.
  • El modelo de objetos de documento (DOM) para datos de visualización dinámica y su interacción.
  • XML para intercambio de datos y XSLT para manipulación. Muchos desarrolladores han comenzado a reemplazarlo con JSON porque su forma es más similar a JavaScript.
  • El objeto Solicitud XMLHttp para comunicación asincrónica.
  • Finalmente, el lenguaje de programación. javascript para unir todas estas tecnologías.
Leer  ¿Qué es un Pingback en WordPress?

Se requieren algunos conocimientos técnicos para comprenderlo completamente. Sin embargo, el procedimiento general de trabajo de AJAX es bastante sencillo. Eche un vistazo al diagrama y la tabla a continuación para obtener más explicaciones.

Diagrama:

cómo funciona ajax

Tabla comparativa:

modelo convencionalModelo AJAX
1. Se envía una solicitud HTTP desde el navegador web al servidor.1. El navegador crea una llamada JavaScript que activará XMLHttpRequest.
2. El servidor recibe y luego recupera los datos.2. En segundo plano, el navegador web crea una solicitud HTTP al servidor.
3. El servidor envía los datos solicitados al navegador web.3. El servidor recibe, recupera y envía los datos al navegador web.
4. El navegador web recibe los datos y recarga la página para mostrarlos.4. El navegador recibe los datos solicitados que aparecerán directamente en la página. No es necesario recargar.
Durante este proceso, los usuarios no tienen más remedio que esperar hasta que se complete todo el proceso. No sólo lleva mucho tiempo sino que también supone una carga innecesaria para el servidor.
ES Web hosting in text banner

En resumen

Dejando a un lado la definición, la mayor ventaja de usar AJAX es que optimiza la experiencia del usuario. Sus visitantes no tienen que esperar mucho para acceder a su contenido. Sin embargo, también depende de lo que necesites. Google, por ejemplo, permite a los usuarios elegir entre AJAX y una versión convencional cuando utilizan Google Mail. Es mejor poner las necesidades de los usuarios en la parte superior de su lista y utilizar AJAX en consecuencia.

Compartir

Deja una respuesta