Apuntes otros

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 que se usa ?

  • Comunicación entre cliente y servidor: Las aplicaciones web (por ejemplo, en JavaScript) envían y reciben datos en formato JSON desde el servidor.
  • Almacenamiento de configuración: Muchos programas guardan ajustes y opciones 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 (como 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, con reglas sintácticas claras, sus archivos resultan fáciles de interpretar por otros lenguajes, lo que explica la adopción de este formato mas 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, (sin recargar la página) JavaScript captura el valor y lo envía a un script PHP mediante una solicitud fetch().


        <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
                const 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(res => res.json()) // Interpretamos la respuesta como JSON
                    .then(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() onvierte 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

Características

  • No requiere comillas ni llaves (aunque se pueden usar)
  • Soporta comentarios con #
  • Es muy sensible a la indentación
  • Ideal para estructuras anidadas y configuraciones

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
TOP