Ajax es un mecanismo que tiene Javascript para trabajar con la asincronía y hacer peticiones al lado del servidor. Ajax significa Asynchronous Javascript and XML, es decir, Javascript y XML asíncrono. Hay que decir que el XML ha sido delegado por JSON. Antes se utilizaba para el intercambio de información, al tratarse de un lenguaje de marcado uniforme, cualquier lenguaje de programación (PHP, Python, Java…) tiene métodos para poder leer archivos JSON y archivos XML. A principios de la web, XML era el estándar de intercambio entre tecnologías.
Al inicio, Ajax comenzó trabajando con XML para la carga del nuevo contenido.
Modelo tradicional de una aplicación web
La aplicación se aloja en el navegador web del usuario, el servidor le entrega al navegador código front (HTML, CSS, Javascript, multimedia), el usuario, cuando por ejm accede a un login, envía datos mediante un formulario, o pide otra página web, lo que hace es una petición por el protocolo HTTP o HTTPS (el protocolo estándar en la actualidad), y dependiendo de lo que haga esa petición web, se pueden hacer transacciones con bases de datos, con microservicios… hace los procesos y posteriormente se envían los datos al navegador. Esto hace que cada vez que solicitamos un recurso al servidor, se tiene que recargar el navegador, aquí es donde entra en juego Ajax, que lo que hace es colocarse como un motor el cual es un intermediario entre la interfaz de usuario del navegador y el servidor, con lo que, sin necesidad de recargar el navegador web, el servidor entrega información al cliente que en este caso es el usuario y su navegador web.
Nota: Ajax fue creado por personal de Microsoft cuando Internet Explorer era el navegador más usado en el mundo.
El atractivo de Ajax reside en su naturaleza asíncrona, ya que para enviar y recibir información se puede utilizar JSON, XML, HTML plano… y Ajax nos permite comunicar con el servidor, intercambiar datos y actualizar la interfaz del usuario sin la necesidad de recargar el navegador.
Métodos
Disponemos de 3 métodos nativos para poder hacer Ajax.
- ActiveXObject: es un objeto exclusivo de Internet Explorer 8 e inferiores, el cual está obsoleto.
- XMLHttpRequest: es el objeto que describe Ajax, el cual es utilizado por todos los navegadores.
- API Fetch: es una forma moderna de hacer Ajax.
Librerías externas
Existen librerías externas para el uso de Ajax, como son:
- jQuery: es la librería muy popular, la cual está dando los últimos coletazos.
- Axios: es una librería que se ha vuelto muy popular, está basada en promesas. Es un cliente de peticiones HTTP/HTTPS basado en promesas.
No es sólo una tecnología
Ajax no es una tecnología en sí misma, hay una interacción de muchas tecnologías, del cliente, del servidor, se trata de un conjunto de tecnologías que se unen en un todo:
- HTML y CSS para crear presentaciones basadas en estándares.
- DOM para la interacción y manipulación dinámica de la presentación.
- HTML, XML o JSON para el intercambio y la manipulación de información.
- XMLHttpRequest o Fetch para el intercambio asíncrono de información.
- Javascript para unir todas las demás tecnologías.
Estados de una petición
Los estados de una petición asíncrona pueden ser los siguientes:
- READY_STATE_UNINITIALIZED = 0
- READY_STATE_LOADING = 1
- READY_STATE_LOADED = 2
- READY_STATE_INTERACTIVE = 3
- READY_STATE_COMPLETE = 4
En estos capítulos van a cobrar mucho protagonismo lo que se vio en su momento referente a peticiones asíncronas (promesas, callbacks, Async… Await…). Es muy importante entender que una petición de Ajax del objeto XMLHttpRequest va a tener 4 estados, el estado de no inicialización, donde el cliente se empieza a comunicar con el servidor (READY_STATE_UNINITIALIZED), un estado de cargando, donde se están enviando los datos al servidor (READY_STATE_LOADING), un estado de cargado, en el cual el servidor respondió al cliente pero el cliente todavía no tiene la información lista para que nosotros comencemos a interactuar (READY_STATE_LOADED), una fase de estado interactivo, donde el motor de Javascript tiene acceso a los datos de esta petición (READY_STATE_INTERACTIVE) y finalmente cuando ha terminado todo el proceso de que el objeto XMLHttpRequest hace la petición, el servidor le responde y ya tiene los datos listos para que nosotros los manipulemos y mostremos la información (READY_STATE_COMPLETE).
Estos estados son muy importantes, y tomarán gran relevancia en el siguiente capítulo, donde comenzaremos a trabajar con el objeto XMLHttpRequest.
Códigos de estado de respuesta
Como se trata de una interacción entre el cliente y el servidor, es muy importante entender los códigos de estado de respuesta del protocolo HTTP. Existen 5 tipos de mensajes:
- Códigos 100 (100-199): se trata de respuestas informativas.
- Códigos 200 (200-299): se trata de respuestas satisfactorias.
- Códigos 300 (300-399): se trata de redirecciones.
- 301: Redirección permanente
- 302: Redirección momentánea
- Códigos 400 (400-499): se trata de errores de los clientes.
- 401: No autorizado
- 403: Forbidden
- 404: Not found
- Códigos 500 (500-599): se trata de errores de los servidores.
- 502: Máximo de ancho de banda.
Cuando realizamos una solicitud, los códigos 200 son los tipos de mensajes que estamos esperando recibir del servidor. Por lo tanto vamos a trabajar mucho con los códigos 200 y con los códigos 500.
Nota: es muy importante familiarizarse con este tipo de mensajes.