Apuntes sobre Otras cosas

Cajón Desastre: Todo lo que no encaja en ninguna parte.

JSON, intercambio de datos

JSON (JavaScript Object Notation) es un formato que sirve para tratar datos de forma estructurada y fácil de leer, tanto por humanos como por máquinas. Es un formato ligero y ampliamente usado en el desarrollo web, APIs y almacenamiento de configuraciones.

¿Para qué se usa?

  • Comunicación entre cliente y servidor: las aplicaciones web envían y reciben datos en formato JSON desde el servidor.
  • Almacenamiento de configuración: muchos programas guardan ajustes en archivos .json, como settings.json.
  • Intercambio entre lenguajes: JSON es compatible con la mayoría de los lenguajes de programación, lo que lo hace ideal para integrar sistemas diferentes.
  • Persistencia de datos: puedes guardar estructuras complejas (listas, objetos, diccionarios) sin necesidad de una base de datos.
{
  "nombre": "Ignit",
  "lenguajes": ["Python", "Bash", "JavaScript"],
  "activo": true
}

Debido a la sencillez del formato y a su carácter estructurado, sus archivos resultan fáciles de interpretar por otros lenguajes, lo que explica la adopción de JSON más allá de JavaScript, su origen natural.

Intercambio simple de variables con JSON: JavaScript ⇄ PHP

Este ejemplo muestra cómo JavaScript y PHP pueden intercambiar variables utilizando JSON como formato común.

1. HTML y JavaScript

El usuario escribe su nombre. Al hacer clic, JavaScript captura el valor y lo envía a un script PHP mediante una solicitud fetch(), sin recargar la página.

<input type="text" id="nombre" placeholder="Tu nombre" />
<button onclick="enviar()">Enviar</button>
<p id="respuesta"></p>

<script>
    function enviar() {
        // Capturamos el nombre introducido en el campo de texto
        var nombre = document.getElementById("nombre").value;

        // Iniciamos una petición fetch hacia el servidor
        fetch("recibir.php", {
                method: "POST",

                // Indicamos que estamos enviando datos en formato JSON
                headers: {
                    "Content-Type": "application/json"
                },

                // Enviamos un objeto convertido a JSON en el cuerpo de la petición
                body: JSON.stringify({ nombre: nombre })
            })
            // Cuando recibimos la respuesta...
            .then(function(res) { return res.json(); })  // Interpretamos la respuesta como JSON
            .then(function(data) {
                // Mostramos el mensaje recibido desde PHP en pantalla
                document.getElementById("respuesta").textContent = data.saludo;
            });
    }

    // Nota: fetch() significa "recoger" o "obtener".
    // Aunque le pasamos datos, su propósito es pedir una respuesta del servidor.
</script>

2. PHP (recibir.php)

<?php
// Leemos el contenido del cuerpo de la petición
// file_get_contents lee archivos y flujos, en este caso http
$raw = file_get_contents("php://input");

// Decodificamos el JSON a un array asociativo
$data = json_decode($raw, true);

// Accedemos al valor recibido
$nombre = $data["nombre"] ?? "invitado";

// Generamos una respuesta
$saludo = "Hola, $nombre";

// Devolvemos la respuesta como JSON
header("Content-Type: application/json");
echo json_encode(["saludo" => $saludo]);
?>

3. Flujo del intercambio

  1. JavaScript recoge la entrada del usuario.
  2. Convierte esa información a JSON y la envía con fetch().
  3. PHP recibe el JSON, lo interpreta y construye una respuesta.
  4. PHP devuelve un JSON con la respuesta, que JavaScript interpreta y muestra.

Este es un patrón fundamental para integrar JavaScript y PHP en aplicaciones modernas, especialmente cuando se quiere evitar la recarga de página y tener una comunicación fluida entre cliente y servidor.

Funciones útiles

  • JSON.stringify() convierte objeto JS a texto JSON (JavaScript)
  • JSON.parse() convierte texto JSON a objeto JS (JavaScript)
  • json_encode() convierte array/objeto PHP a JSON (PHP)
  • json_decode() convierte texto JSON a array/objeto PHP (PHP)

YAML: YAML Ain't Markup Language

YAML es otro formato limpio y legible que se usa ampliamente en configuraciones de herramientas como Docker, GitHub Actions o Ansible.

Ejemplo de YAML

nombre: Ignit
edad: 30
habilidades:
  - HTML
  - CSS
  - Bash
contacto:
  correo: ignit@example.com
  github: ignitdev

Comparación rápida

Característica JSON YAML
Legibilidad Media Alta
Comentarios No Sí
Formato Llaves, comillas Indentación limpia
Uso típico Datos y APIs Configuración

Buenas prácticas

  • Validar tus archivos con herramientas online antes de usarlos.
  • No usar tabuladores en YAML (siempre espacios).
  • Usar application/json al enviar JSON por HTTP.
  • Evitar comentarios en JSON (no están permitidos por la norma).
  • Guardar archivos con extensión .json, .yaml o .yml.

En la próxima lección: cURL: el cliente HTTP de línea de comandos para hacer peticiones, probar APIs y descargar archivos.

TOP