Otro formato de intercambio muy utilizado en AJAX, es el formato JSON. JSON es un formato de intercambio de datos, alternativo a XML, mucho mas simple de leer, escribir e interpretar. Significa Javascript Object Notation, y consiste en escribir los datos en formato de Javascript.
Para este ejemplo, lo primero que hemos hecho, otra vez, es crear un fichero datosjson.php que deberás localizar en la carpeta htdocs de tu servidor y que será al que realizaremos la petición. Este fichero devolverá un array en JSON con la misma colección que en el apartado anterior, pero en dicho formato. Su contenido será el siguiente:
<?php
// Cabecera para indicar que vamos a enviar datos JSON y que no haga caché de los datos.
header('Content-Type: application/json');
$datosjson = "[
{
\"title\": \"Empire Burlesque\",
\"artist\": \"Bob Dylan\",
\"country\": \"USA\",
\"company\": \"Columbia\",
\"price\": 10.90,
\"year\": 1985
},
{
\"title\": \"Hide your heart\",
\"artist\": \"Bonnie Tyler\",
\"country\": \"UK\",
\"company\": \"CBS Records\",
\"price\": 9.90,
\"year\": 1988
},
{
\"title\": \"Greatest Hits\",
\"artist\": \"Dolly Parton\",
\"country\": \"USA\",
\"company\": \"RCA\",
\"price\": 9.90,
\"year\": 1982
},
{
\"title\": \"Still got the blues\",
\"artist\": \"Gary Moore\",
\"country\": \"UK\",
\"company\": \"Virgin records\",
\"price\": 10.20,
\"year\": 1990
}
]";
echo $datosjson;
?>Al igual que antes, realizamos la petición mediante el método GET a la URL http://localhost/datosjson.xml. Ahora nos quedamos con el texto de la respuesta, pero lo pasamos a JSON mediante la instrucción JSON.parse(peticion.responseText). Eso nos devolverá un array de objetos que podremos recorrer. Como puedes ver en el ejemplo que se adjunta, es mucho más sencillo.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DWEC07.- Ejemplo petición JSON</title>
<script type="text/javascript">
let peticion;
const iniciar = () => {
peticion = new XMLHttpRequest();
peticion.open('GET', "http://localhost/datosjson.php");
peticion.send();
peticion.addEventListener("load", cargada);
}
const cargada = () => {
let resultados = '';
let cds = JSON.parse(peticion.responseText);
resultados += '<ul>';
for (let i = 0; i < cds.length; i++) {
resultados += `<li><b>CD nº ${i + 1}</b><ul>`;
resultados += `<li><b>Título:</b> ${cds[i].title}</li>`;
resultados += `<li><b>Artista:</b> ${cds[i].artist}</li>`;
resultados += `<li><b>País:</b> ${cds[i].country}</li>`;
resultados += `<li><b>Compania:</b> ${cds[i].company}</li>`;
resultados += `<li><b>Precio:</b> ${cds[i].price}</li>`;
resultados += `<li><b>Año:</b> ${cds[i].year}</li>`;
resultados += `</li></ul>`;
}
resultados += '</ul>';
document.getElementById("resultados").innerHTML = resultados;
}
window.addEventListener("load", iniciar, false);
</script>
<style>
#resultados{
background: yellow;
}
</style>
</head>
<body>
<p>
A continuación se cargarán por AJAX los datos recibidos en la solicitud ASINCRONA:
</p>
<p>
Contenedor resultados:
<div id="resultados"></div>
</p>
</body>
</html>