Habíamos visto que para convertir una cadena que contiene información en formato JSON solo debíamos utilizar la función parse del objeto JSON de JavaScript.
Nos concentraremos nuevamente en como convertir un archivo JSON que viene del servidor y lo debemos convertir a un objeto literal en JavaScript.
pagina1.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Problema</title> <script src="funciones.js"></script> </head> <body> <h2>Recuperar datos enviados del servidor en formato JSON y luego convertido a objeto literal en el cliente.</h2> <br> <input type="button" value="Recuperar" id="boton1"> <div id="resultados"></div> </body> </html>
funciones.js
addEventListener('load',inicializarEventos,false); function inicializarEventos() { var ob=document.getElementById('boton1'); ob.addEventListener('click',presionBoton,false); } var conexion1; function presionBoton(e) { conexion1=new XMLHttpRequest(); conexion1.onreadystatechange = procesarEventos; conexion1.open('GET','pagina1.php', true); conexion1.send(); } function procesarEventos() { var resultados = document.getElementById("resultados"); if(conexion1.readyState == 4) { var datos=JSON.parse(conexion1.responseText); var salida=''; for(var f=0;f<datos.length;f++) { salida += 'Codigo:'+datos[f].codigo+"<br>"; salida += 'Descripcion:'+datos[f].descripcion+"<br>"; salida += 'Precio:'+datos[f].precio+"<br><br>"; } resultados.innerHTML = salida; } else { resultados.innerHTML = "Cargando..."; } }
En la función procesarEventos debemos llamar al método parse del objeto JSON pasando el archivo recuperado del servidor:
var datos=JSON.parse(conexion1.responseText);
el archivo pagina1.php:
<?php header('Content-Type: text/txt; charset=utf-8'); $conexion=mysqli_connect("localhost","root","","bdajax") or die("Problemas con la conexión"); $registros=mysqli_query($conexion,"select codigo,descripcion,precio from perifericos") or die("Problemas en el select".mysqli_error($conexion)); while ($reg=mysqli_fetch_array($registros)) { $vec[]=$reg; } $cad=json_encode($vec); echo $cad; ?>
Se tiene una tabla llamada "perifericos" donde almacenamos el código, descripción y precio de distintos periféricos de computadoras. Generar un archivo JSON en el servidor y proceder a mostrar los datos de los periféricos en el navegador.