Cómo funciona Ajax
Este artículo discutirá los componentes de Ajax y cómo funciona Ajax. Hablaremos sobre el funcionamiento de AJAX en algunas aplicaciones principales basadas en la web. Además, se proporcionará una comparación entre el modelo convencional y AJAX. Entonces, comencemos!
Componentes de AJAX
Ajax es un conjunto de técnicas de desarrollo web. Se basa en los componentes dados a continuación:
- En el modelo AJAX, el Xhtml/html se considera lenguas centrales y hojas de estilo cascade (CSS) como el lenguaje de presentación.
- El Modelo de objetos de documento se utiliza para mostrar fines de contenido dinámico e interacción.
- Para el intercambio de datos, Ajax se basa en Xml, y XSLT se utiliza para la manipulación de datos.
- El Xmlhttprequest El objeto se usa para la comunicación asincrónica en el modelo.
- Por último, Javascript se utiliza para conectar todas estas tecnologías en AJAX.
Cómo funciona Ajax
Cada vez que los usuarios envían cualquier solicitud desde la interfaz de usuario, o se produce un evento, como un botón que se hace clic o la página web que se está cargando, JavaScript crea un "Xmlhttprequest" objeto. Después de eso, el objeto creado envía un httprequest al servidor web. Luego, el proceso del servidor recibió Httprequest interactuando con la base de datos. Cuando los datos requeridos se obtienen de la base de datos, se genera una respuesta y el servidor envía que Json o Xml datos al navegador. En el siguiente paso, JavaScript procesa los datos devueltos y actualiza la página web en consecuencia.
La imagen dada a continuación también ilustra el funcionamiento de AJAX:
AJAX Ejemplos prácticos
Considere la característica de autocompletar del Google sitio web. Le ayuda a completar las palabras clave mientras escribe. Las páginas web de Google siguen siendo las mismas cuando las palabras clave cambian en tiempo real. Cuando Internet no fue tan avanzado en el principio 90s, La página web de Google se volvió a cargar cada vez que mostraba una nueva recomendación de la pantalla del navegador.
En 2004, Google comenzó a incrustar el modelo Ajax detrás de escena de Google Map y Google Mail. Permite el intercambio de datos y permite que la capa de presentación funcione sin interferir.
AJAX ahora se utiliza comúnmente en varias aplicaciones basadas en la web para simplificar la comunicación con el servidor. También hemos compilado una lista de otros ejemplos prácticos de Ajax:
- Salas de chat: Hoy en día, las salas de chat incorporadas se encuentran entre las características más de un sitio web. Los sitios web ofrecen salas de chat en su página de inicio, utilizando las cuales puede comunicarse con su representante de servicio al cliente. Puede explorar la página web mientras envía y recibe mensajes de las salas de chat. Ajax no recarga toda la página durante estas actividades simultáneas.
- Sistemas de calificación y votación: ¿Alguna vez ha participado en algún formulario de votación en línea, o ha dado una calificación de producto después de comprarlo en línea?? AJAX se utiliza en ambos sistemas mencionados. Después de dar la calificación o votación, el sitio web actualizará la sección de cálculo, mientras que el resto permanece inalterado.
- Notificación de tendencia de Twitter: La notificación moderna de Twitter es una gran característica para mantenerse al día con lo que está sucediendo en el mundo. AJAX se empleó recientemente en Twitter para las actualizaciones, y actualiza la aplicación cada vez que se envían nuevos tweets con respecto a temas modernos sin afectar el sitio web principal.
En resumen, los modelos AJAX facilitan la multitarea. Supongamos que nota una aplicación que ejecuta dos actividades simultáneamente, sin poner una en inactiva y la otra en un estado activo. En estos escenarios, Ajax está funcionando en segundo plano.
Comparación de AJAX y modelo convencional
| Modelo AJAX | Modelo convencional |
|---|---|
| Cuando ocurre un evento, el navegador define una llamada de JavaScript, activando xmlhttprequest. | El navegador pasa una solicitud HTTP al servidor en el modelo convencional. |
| El objeto creado luego envía una solicitud HTTP al servidor en segundo plano. | Los datos son recibidos y luego recuperados por el servidor. |
| La solicitud se recibe, se recuperan los datos requeridos y se envían de regreso al navegador web. | El navegador web acepta la respuesta del servidor. |
| Los datos recuperados se envían de regreso al navegador y se muestran directamente en la página. En el modelo AJAX, no se realiza la operación de recarga de páginas mientras se realiza. | El navegador recarga la página para actualizarlo. Durante esta operación, los usuarios deben esperar hasta que la página se vuelva a cargar. Esta acción requiere mucho tiempo y pone cargas adicionales en el servidor. |
Conclusión
AJAX permite que las páginas web se actualicen de manera asincrónica mientras intercambian los datos en segundo plano. Esto establece que los elementos de la página web se pueden actualizar sin la recarga de la página. Este artículo sobre los componentes de Ajax y cómo funciona Ajax. Hemos hablado sobre el funcionamiento de AJAX en algunas aplicaciones principales basadas en la web. Además, también se proporciona una comparación entre los modelos convencionales y AJAX.