Leer datos de MySQL con PHP: de Flash a JSON y JavaScript

En 2014 publiqué aquí cómo leer datos de una base de datos MySQL con PHP para mostrarlos en una animación de Flash. Hoy ese método ya no sirve: Adobe dejó de dar soporte a Flash Player el 31 de diciembre de 2020 y los navegadores modernos ya no lo ejecutan. En este post actualizado te cuento cómo funcionaba aquel ejemplo (como nota histórica) y, sobre todo, cómo se hace hoy lo mismo de forma moderna y segura: PHP con PDO devolviendo JSON y JavaScript con fetch mostrando los datos en la página.

Nota histórica: cómo funcionaba con Flash

El esquema era sencillo. Un archivo prueba.php se conectaba a MySQL, leía la columna nombre de una tabla y devolvía un texto con el formato muestra=Ana Luis Pedro. La animación Flash, incrustada en el HTML, pedía ese archivo al servidor y mostraba la variable muestra en pantalla. El tutorial original se apoyaba en un ejemplo descargable del sitio sitiotutoriales.com.

Ese código usaba las funciones mysql_connect, mysql_query y mysql_fetch_array, que fueron eliminadas en PHP 7. Además, escribía el usuario y la contraseña de la base de datos directamente en el código publicado, algo que nunca se debe hacer. Por esas razones no lo reproduzco aquí: hoy no funcionaría y sería inseguro.

La forma moderna, en tres piezas

MySQL guarda los datos (por ejemplo, una tabla jugadores con id y nombre).
PHP (archivo datos.php) consulta la base de datos con PDO y responde en formato JSON.
JavaScript en la página HTML pide ese JSON con fetch y lo muestra.

JSON es simplemente texto con una estructura que cualquier lenguaje entiende, por ejemplo: [{"id":1,"nombre":"Ana"},{"id":2,"nombre":"Luis"}].

Paso 1: la tabla en MySQL

CREATE TABLE jugadores (
  id INT AUTO_INCREMENT PRIMARY KEY,
  nombre VARCHAR(80) NOT NULL
);

INSERT INTO jugadores (nombre) VALUES ('Ana'), ('Luis'), ('Pedro');

Puedes ejecutarlo en la pestaña SQL de phpMyAdmin. Si te aparece el error "No database selected", revisa el post solución al error #1046 en phpMyAdmin.

Paso 2: config.php (credenciales fuera del código público)

<?php
// config.php — NO lo subas a repositorios públicos ni lo publiques
return [
    'host' => 'localhost',
    'db'   => 'mi_base',
    'user' => 'mi_usuario',
    'pass' => 'una_clave_segura',
];

Lo ideal es guardar este archivo fuera de la carpeta pública (public_html) o usar variables de entorno. Así, aunque alguien vea tu código, no verá tu contraseña.

Paso 3: datos.php con PDO y consultas preparadas

<?php
header('Content-Type: application/json; charset=utf-8');
$cfg = require __DIR__ . '/../config.php';

try {
    $pdo = new PDO(
        "mysql:host={$cfg['host']};dbname={$cfg['db']};charset=utf8mb4",
        $cfg['user'], $cfg['pass'],
        [PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION]
    );

    // Filtro opcional: datos.php?buscar=an
    $buscar = $_GET['buscar'] ?? '';
    $sql = 'SELECT id, nombre FROM jugadores WHERE nombre LIKE ? ORDER BY nombre LIMIT 50';
    $stmt = $pdo->prepare($sql);
    $stmt->execute(['%' . $buscar . '%']);

    echo json_encode($stmt->fetchAll(PDO::FETCH_ASSOC), JSON_UNESCAPED_UNICODE);
} catch (PDOException $e) {
    http_response_code(500);
    echo json_encode(['error' => 'No se pudo consultar la base de datos']);
}

¿Por qué consultas preparadas?

Con prepare y execute, el valor que escribe el usuario (buscar) viaja separado de la instrucción SQL. Eso evita la inyección SQL, uno de los ataques más comunes contra sitios web. Nunca armes la consulta pegando directamente $_GET o $_POST dentro del texto SQL.

Si prefieres mysqli, también es válido: usa $mysqli->prepare(), bind_param() y execute(). PDO tiene la ventaja de funcionar con varios motores de bases de datos con casi el mismo código.

Paso 4: la página HTML con JavaScript

<input id="buscar" placeholder="Buscar nombre">
<ul id="lista"></ul>

<script>
async function cargar() {
  const q = encodeURIComponent(document.getElementById('buscar').value);
  const resp = await fetch('datos.php?buscar=' + q);
  if (!resp.ok) { alert('Error al cargar los datos'); return; }
  const datos = await resp.json();
  const lista = document.getElementById('lista');
  lista.innerHTML = '';
  for (const fila of datos) {
    const li = document.createElement('li');
    li.textContent = fila.nombre;   // textContent evita inyectar HTML
    lista.appendChild(li);
  }
}
document.getElementById('buscar').addEventListener('input', cargar);
cargar();
</script>

Este código es para tu propio sitio (en tu hosting), no para pegarlo dentro de una entrada de Blogger. Cada vez que escribes en el cuadro de búsqueda, la página pide los datos al servidor sin recargarse, que era justamente la gracia del ejemplo con Flash.

¿Y si quería hacer un juego o una animación?

Lo que antes se hacía con Flash hoy se hace con HTML5: el elemento <canvas> con JavaScript, animaciones CSS o motores de juego que exportan a la web. Todos pueden leer datos con fetch exactamente como en el paso 4.

Errores comunes

La página muestra el código PHP en vez de ejecutarlo: abriste el archivo directamente desde el disco. Debe servirse desde un servidor con PHP (hosting, XAMPP, Laragon, etc.).
"SQLSTATE[HY000] [2002]": el nombre del servidor es incorrecto o MySQL no está encendido. Mira cómo saber el nombre del servidor MySQL en cPanel.
Tildes y eñes salen mal: usa charset=utf8mb4 en la conexión y guarda los archivos en UTF-8.
Error de CORS en la consola: el HTML y el PHP están en dominios distintos. Ponlos en el mismo dominio o configura las cabeceras CORS en el servidor.

Preguntas frecuentes

¿Puedo seguir usando mysql_connect?

No. Las funciones mysql_* no existen desde PHP 7. Usa PDO o mysqli con consultas preparadas.

¿Hay forma de abrir mis viejos archivos .swf?

Existen emuladores de código abierto como Ruffle que reproducen muchos contenidos Flash antiguos, pero para proyectos nuevos lo recomendable es HTML5 y JavaScript.

Publiqué por error una contraseña en internet, ¿qué hago?

Cámbiala de inmediato en el panel de tu hosting y revisa los permisos de ese usuario de base de datos.

Conclusión

Flash ya es historia, pero la idea de fondo sigue vigente: un programa en el servidor lee MySQL y una página web muestra los datos. Hoy se hace con PHP + PDO devolviendo JSON y JavaScript con fetch, usando consultas preparadas y sin dejar contraseñas en el código.