AJAX
JavaScript asíncrono y XML, es un enfoque "nuevo" para usar varias tecnologías existentes juntas, incluido HTML o XHTML, CSS, JavaScript, DOM, XML, XSLT y, lo que es más importante, el objeto XMLHttpRequest. Cuando estas tecnologías se combinan en el modelo AJAX, las aplicaciones web pueden realizar actualizaciones rápidas e incrementales en la interfaz de usuario sin recargar toda la página del navegador. Esto hace que la aplicación sea más rápida y responda mejor a las acciones del usuario.
Aunque X en AJAX significa XML, hoy en día se prefiere JSON a XML debido a sus muchas ventajas, como ser parte de JavaScript y, por lo tanto, tener un tamaño más ligero. Tanto JSON como XML se utilizan para empaquetar información en el modelo AJAX.
AJAX es el uso del objeto XMLHttpRequest para comunicarse con los servidores. Puede enviar y recibir información en varios formatos, incluidos JSON, XML, HTML y archivos de texto. La característica más atractiva de AJAX es su naturaleza "asincrónica", lo que significa que puede comunicarse con el servidor, intercambiar datos y actualizar la interfaz de usuario sin tener que actualizar toda la página.
Las dos características principales de AJAX permiten hacer lo siguiente:
- Realiza solicitudes al servidor sin recargar la página.
- Recibir y trabajar con datos del servidor.
Objeto XMLHttpRequest:
Este objeto se utiliza para interactuar con los servidores. Puede recuperar datos de una URL sin tener que actualizar la página completa. Esto permite que una página web actualice solo una parte de una página sin interrumpir lo que está haciendo el usuario.
Fetch API:
Proporciona una interfaz JavaScript para acceder y manipular partes del canal HTTP, como peticiones y respuestas. Es similar al objeto XMLHttpRequest, pero la nueva API ofrece un conjunto de características más potente y flexible.
También provee un método global fetch() que proporciona una forma fácil y lógica de obtener recursos de forma asíncrona por la red. Está basado en promesas, por lo cual tiene un response y un reject internos.
Response tiene varios métodos:
- arrayBuffer():
- Archivos binarios en bruto (mp3, pdf, jpg, etc). Se utiliza cuando se necesita manipular el contenido del archivo.
- blob():
- Archivos binarios en bruto (mp3, pdf, jpg, etc). Se utiliza cuando no se necesita manipular el contenido y se va a trabajar con el archivo directamente.
- clone():
- crea un clon de un objeto de respuesta, idéntico en todos los sentidos, pero almacenado en una variable diferente.
- formData():
- Se utiliza para leer los objetos formData.
- json():
- Convierte los archivos json en un objeto de JavaScript.
- text():
- Se utiliza cuando queremos leer un archivo de texto. Siempre se codifica en UTF-8.