AJAX y JSON: Una pareja perfecta

En este artículo vamos a explicar por qué usar AJAX y JSON forman una pareja perfecta al realizar peticiones HTTP a un servidor. Como hemos visto en artículos anteriores de la serie introducción a AJAX, existen diversas técnicas y muchos tipos de datos para hacer peticiones AJAX. En este artículo nos centraremos en el por qué las peticiones AJAX con JASON forman la pareja perfecta y cómo pueden mejorar la experiencia del usuario y optimizar el desarrollo de aplicaciones web.

En el desarrollo web moderno, AJAX y JSON se han convertido en una gran combinación para la comunicación entre el cliente y el servidor. AJAX permite realizar solicitudes asíncronas para actualizar partes específicas de una página web sin recargarla completamente, mientras que JSON (JavaScript Object Notation) es un formato ligero de intercambio de datos que se utiliza para transmitir información entre el cliente y el servidor de manera eficiente. Por este motivo AJAX y JSON forman una pareja perfecta y en este artículo veremos algunos ejemplos prácticos.

¿Qué es JSON?

JSON, o JavaScript Object Notation, es un formato de texto ligero para el intercambio de datos. Es fácil de leer y escribir para los humanos y fácil de parsear y generar para las máquinas. JSON se utiliza ampliamente para representar datos estructurados en aplicaciones web.

Estructura de JSON

JSON está compuesto por pares clave-valor que pueden representar diferentes tipos de datos:

Objetos: Representados por pares clave-valor encerrados en llaves {}.
Arrays: Listas ordenadas de valores encerradas en corchetes [].

{
    "name": "John Doe",
    "age": 30,
    "isStudent": false,
    "courses": ["Math", "Science", "History"],
    "address": {
        "street": "123 Main St",
        "city": "Anytown",
        "zipcode": "12345"
    }
}

En este ejemplo, name, age, isStudent, courses y address son claves y los valores asociados a estas claves son de diferentes tipos: cadena, número, booleano, array y objeto. Esto permite estructuras complejas y anidadas, pero al mismo tiempo fáciles de visualizar para un humano.

Ventajas de usar JSON con AJAX

JSON y AJAX son una pareja perfecta porque se complementan de forma natural debido a las ventajas que ofrecen cuando se utilizan juntos:

Ligereza y simplicidad: JSON es un formato ligero, lo que significa que los datos ocupan menos espacio en comparación con otros formatos como XML. Esta ligereza contribuye a tiempos de carga más rápidos y a un menor consumo de ancho de banda.

Facilidad de uso en JavaScript: JSON se integra de manera natural con JavaScript, ya que se basa en la sintaxis de los objetos de JavaScript. Esto facilita la manipulación de datos recibidos del servidor directamente en el código del cliente sin necesidad de convertir formatos complicados.

Simplicidad en la conversión de datos: La conversión de JSON a objetos JavaScript se realiza fácilmente utilizando JSON.parse() y la conversión de objetos JavaScript a JSON se realiza utilizando JSON.stringify(). Esto simplifica el proceso de manejo de datos en aplicaciones web.

Compatibilidad con diferentes plataformas: JSON es un formato ampliamente aceptado y compatible con múltiples lenguajes de programación y plataformas. Esto facilita la integración de sistemas y el intercambio de datos entre diferentes tecnologías.

AJAX y JSON la pareja perfecta

Vamos a ver algunos ejemplos de cómo se puede utilizar JSON con AJAX para realizar solicitudes y manejar respuestas en una aplicación web. Imaginemos que tenemos una API que devuelve la estructura de datos en formato JSON que hemos definido anteriormente. Queremos realizar una solicitud AJAX para obtener estos datos y mostrarlos en la página.

Mostrar datos en formato JSON: Siguiendo con cualquiera de los métodos descritos en artículos anteriores para realizar peticiones AJAX a un servidor, finalmente obtendríamos la respuesta en una variable. El tratamiento de datos en formato JSON de esta respuesta podría ser la siguiente:

let data = respuesta_en_formato_JSON;
document.getElementById('content').innerHTML = `
  <h2>Person loaded</h2>
  <p>Name: ${data.name}</p>
  <p>Age: ${data.age}</p>
  <p>Courses: ${data.courses.join(', ')}</p>
  <p>Address: ${data.address.street}, ${data.address.city}</p>
`;

En este ejemplo vemos como AJAX y JSON son una pareja perfecta al complementarse ambos a la perfección. Se reciben los datos en formato JSON del servidor en la variable data. Los datos se procesan y se insertan en el elemento ID=»content» de la página web de forma sencilla.

Enviar datos en formato JSON: Ahora veremos un ejemplo donde enviaremos datos en formato JSON a un servidor mediante una solicitud AJAX POST.

let xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/submit', true);
xhr.setRequestHeader('Content-Type', 'application/json');
let data = {
  name: 'Jane Doe',
  age: 25,
 courses: ['Biology', 'Chemistry']
};

xhr.onload = function() {
  if (xhr.status === 200) console.log('Data sent successfully:', xhr.responseText);
  else console.error(`Error: ${xhr.status}`);
};

xhr.onerror = function() {
  console.error('Request failed');
};

xhr.send(JSON.stringify(data));

En este ejemplo vemos de nuevo la unión entre AJAX y JSON formando una pareja perfecta debido a la fácil conversión de datos entre JavaScript y JSON. Los datos se envían en formato JSON a través de una solicitud HTTP POST a un servidor utilizando el objeto XMLHttpRequest.

Se crea una nueva instancia de XMLHttpRequest.
Se configura la solicitud para usar el método POST y la URL https://api.example.com/submit, indicando que la solicitud es asíncrona.
Se establece el encabezado Content-Type a application/json para indicar que el cuerpo de la solicitud contiene datos en formato JSON.
Se define un objeto data con la información que se desea enviar al servidor.
Se define una función onload que se ejecuta cuando la solicitud se completa. Si la respuesta tiene un estado HTTP 200, se registra en la consola un mensaje de éxito junto con la respuesta del servidor. Si el estado es diferente, se registra un mensaje de error con el código de estado.
Se define una función onerror que se ejecuta si ocurre un error durante la solicitud, registrando un mensaje de error en la consola.
Se convierte el objeto data a una cadena JSON y se envía como cuerpo de la solicitud.