Introducción
Hay muchas opciones para diferentes formas de llamar a Ajax en JavaScript que pueden mejorar enormemente las experiencias del usuario, como enviar datos al servidor, verificar nombres de usuario, crear formularios de autocompletar, votar y calificar, crear salas de chat, etc.
Este artículo ofrece información sobre la lista más reciente de opciones para realizar llamadas AJAX. Para simplificar, centrémonos en qué son: cada opción tiene sus ventajas y desventajas.
1. XHR
XMLHttpRequest es un objeto (un componente nativo en la mayoría de los demás navegadores, un objeto ActiveX en Microsoft Internet Explorer) que permite que una página web realice una solicitud a un servidor y reciba una respuesta sin recargar toda la página. El usuario continúa en la misma página como si no se hubiera recargado y, lo que es más importante, no ve ni percibe el procesamiento; es decir, al menos por defecto, no ve la carga de una nueva página.
El uso del objeto XMLHttpRequest permite al desarrollador modificar una página ya cargada en el navegador con datos del servidor, sin tener que volver a solicitar la página completa al servidor.
Realizar una solicitud GET mediante XHR
const Http = new XMLHttpRequest();
const url='http://yourdomain.com/';
Http.open("GET", url);
Http.send();
Http.onreadystatechange=(e)=>{
console.log(Http.responseText)
}Realizar una solicitud de envío mediante XHR
var xhr = new XMLHttpRequest();
xhr.open("POST", '/submit', true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function() {
if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
// Request finished. Do processing here.
}
}
xhr.send("name=Ketan&id=1");2. Obtener API
La API Fetch es una nueva alternativa a XMLHttpRequest para recuperar recursos de un servidor. A diferencia de XMLHttpRequest, ofrece un conjunto de funciones más potente y nombres más significativos. Fetch también es flexible y fácil de usar gracias a su sintaxis y estructura. Sin embargo, lo que la distingue de otras bibliotecas HTTP AJAX es que es compatible con todos los navegadores web modernos. Fetch sigue un enfoque de solicitud-respuesta: realiza una solicitud y devuelve una promesa que se resuelve en un objeto Response.
Beneficios de usar Fetch API
- Es flexible y fácil de usar.
- Las promesas evitan el infierno de las devoluciones de llamadas
- Compatible con todos los navegadores modernos
- Sigue un enfoque de solicitud-respuesta
Desventajas de usar Fetch API
- No envía cookies por defecto.
- CORS está deshabilitado de forma predeterminada.
Realizar una solicitud GET en la API Fetch
fetch('https://www.yourdomain.com', {
method: 'get'
})
.then(response => response.json())
.then(jsonData => console.log(jsonData))
.catch(err => {
//error block
}Realizar una solicitud POST en la API Fetch
var url = 'https://www.yourdomain.com/updateProfile';
var data = {username: 'courseya'};
fetch(url, {
method: 'POST', // or 'PUT'
body: JSON.stringify(data), // data can be `string` or {object}!
headers:{
'Content-Type': 'application/json'
}
}).then(res => res.json())
.then(response => console.log('Success:', JSON.stringify(response)))
.catch(error => console.error('Error:', error));3. jQuery
jQuery es un lenguaje de programación del lado del cliente que puedes usar para crear aplicaciones web geniales y sorprendentes. Es gratuito, pero potente, relativamente fácil de configurar y aprender, y cuenta con varios plugins y extensiones para hacer prácticamente cualquier cosa que puedas imaginar. Puedes empezar rápidamente y no te quedarás pequeño cuando le pilles el truco.
Ventajas de usar jQuery
- La mayor ventaja de jQuery es su simplicidad.
- También es increíblemente flexible porque jQuery permite a los usuarios agregar complementos.
- También es una solución muy rápida a tus problemas. Si bien existen soluciones "mejores", jQuery y sus desarrolladores trabajan en equipo para garantizar que puedas implementar jQuery de forma rápida y eficaz, lo que te permite ahorrar dinero.
- El software de código abierto significa un crecimiento rápido y libertad para que los desarrolladores brinden el mejor servicio posible sin burocracia.
Desventajas de usar jQuery
- Además, las actualizaciones frecuentes significan que es poco probable que los miembros de la comunidad ofrezcan soluciones.
- También hay muchas versiones diferentes de jQuery disponibles actualmente, y algunas son menos compatibles que otras.
- A veces, jQuery es más lento que CSS. En esos casos, su simplicidad se convierte en una lacra, ya que no es compatible con las interacciones del lado del cliente.
Realizar una solicitud GET en jQuery
$.ajax({
url: '/users',
type: "GET",
dataType: "json",
success: function (data) {
console.log(data);
},
error: function (error) {
console.log(`Error ${error}`);
}
});Realizar una solicitud POST en Jquery
$.ajax({
url: '/users',
type: "POST",
data: {
name: "Ipseeta",
id: 1
},
dataType: "json",
success: function (data) {
console.log(data);
},
error: function (error) {
console.log(`Error ${error}`);
}
});4. Axios
Axios es uno de los muchos clientes HTTP basados en promesas que funcionan tanto en el navegador como en el entorno Node.js. Básicamente, proporciona una única API para gestionar XMLHttpRequest y la interfaz HTTP de Node. Además, conecta las solicitudes mediante un polyfill para la nueva sintaxis ES6.
Beneficios de usar Axios
- Promete soporte listo para usar
- Soporte del lado del cliente para protección contra XSRF
- Puede registrar solicitudes o respuestas antes de que se lleven a cabo.
- Conversión automática de datos JSON
- Admite API de promesa
- Puede ajustar o cancelar una solicitud
- Puede ajustar el tiempo de respuesta
- Funciona tanto en Nodejs como en el navegador.
Realizar una solicitud GET en Axios
axios.get('/get-user', {
params: {
ID: 1
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.then(function () {
// always executed
});Realizar una solicitud POST en Axios
axios.post('/user', {
name: 'Sanjeev',
id: 1
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});5. Solicitud
La biblioteca de solicitudes es una de las formas más sencillas de realizar llamadas HTTP. Su estructura y sintaxis son muy similares a la gestión de solicitudes en Node.js. Actualmente, el proyecto cuenta con 18 000 estrellas en GitHub y merece la pena mencionarlo por ser una de las bibliotecas HTTP más populares.
Sintaxis
var request = require('request');
request('http://www.yourdomain.com', function (error, response, body) {
console.log('error:', error);
console.log('statusCode:', response && response.statusCode);
console.log('body:', body);
});6. SuperAgente
SuperAgent es una biblioteca AJAX ligera y avanzada que prioriza la legibilidad y la flexibilidad. A diferencia de otras bibliotecas disponibles, SuperAgent requiere un aprendizaje suave. SuperAgent cuenta con un objeto de solicitud que acepta métodos como GET, POST, PUT, DELETE y HEAD.
Beneficios del SuperAgente
- Tiene un entorno y un ecosistema basados en complementos donde se pueden crear y desarrollar extensiones para obtener funcionalidades adicionales o complementarias.
- Fácilmente ajustable
- Bonita interfaz para solicitudes HTTP.
- Múltiples funciones de encadenamiento para enviar solicitudes.
- Debe admitir el progreso de carga y descarga.
- Tiene soporte para cifrado de transporte fragmentado.
- Se admiten llamadas de estilo antiguo.
- Hay numerosos complementos disponibles para muchas funciones comunes.
Realizar una solicitud GET
request
.get('/user')
.query({ id: 1 })
.then(res => {
});Realizar una solicitud de publicación
request.post('/user')
.set('Content-Type', 'application/json')
.send('{"name":"Ipseeta","id":1}')
.then(callback)
.catch(errorCallback)Resultado
La elección dependerá de su proyecto, su escala, el público objetivo y su adopción. No hay una opción correcta o incorrecta. Si elige la biblioteca incorrecta para los requisitos incorrectos, esta pregunta podría tener respuesta. Elija la herramienta adecuada para el trabajo.
