Conceptos de Ajax

Habíamos visto que para convertir una cadena que contiene información en formato JSON solo debíamos utilizar la función eval de JavaScript. Esto lo podemos seguir utilizando siempre y cuando la información del archivo JSON provenga de nuestro sitio.

Tengamos en cuenta si el archivo JSON proviene de un sitio que no tenemos la seguridad que nos envíe solo objetos y array literales, nuestro sitio está en peligro, ya que eval también ejecutará funciones en JavaScript si el archivo JSON las tiene.

Hay una solución para el problema que hemos planteado y se encuentra en utilizar un método contenido en la librería json.js que verifica que el archivo JSON solo contenga datos.

Habíamos resuelto este problema con el siguiente código:

    var datos=eval("(" + conexion1.responseText + ")");

Si utilizamos la librería json.js debemos hacer:

    var datos=conexion1.responseText.parseJSON();

Resolveremos el mismo problema sobre la base de datos de periféricos. Luego en el navegador emplearemos la librería json.js para convertir el archivo JSON a JavaScript.

pagina1.html

<html>
<head>
<title>Problema</title>
<script src="../json.js" language="JavaScript"></script>
<script src="funciones.js" language="JavaScript"></script>
</head>
<body>
<h2>Recuperar datos del servidor almacenados en una base de datos en formato 
JSON utilizando la librería JSON.php y en el cliente utilizando la librería 
json.js</h2>
<br>
<input type="button" value="Recuperar" id="boton1">
<div id="resultados"></div>
</body>
</html>

Es importante importar la librería json.js:

<script src="../json.js" language="JavaScript"></script>
<script src="funciones.js" language="JavaScript"></script>

funciones.js

addEvent(window,'load',inicializarEventos,false);

function inicializarEventos()
{
  var ob=document.getElementById('boton1');
  addEvent(ob,'click',presionBoton,false);
}

var conexion1;
function presionBoton(e)
{
  conexion1=crearXMLHttpRequest();
  conexion1.onreadystatechange = procesarEventos;
  conexion1.open('GET','pagina1.php', true);
  conexion1.send(null);
}

function procesarEventos()
{
  var resultados = document.getElementById("resultados");
  if(conexion1.readyState == 4)
  {
    alert('Cadena en formato JSON:  '+conexion1.responseText);

    var datos=conexion1.responseText.parseJSON();
    var salida='';
    for(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...";
  }
}

//***************************************
//Funciones comunes a todos los problemas
//***************************************
function addEvent(elemento,nomevento,funcion,captura)
{
  if (elemento.attachEvent)
  {
    elemento.attachEvent('on'+nomevento,funcion);
    return true;
  }
  else  
    if (elemento.addEventListener)
    {
      elemento.addEventListener(nomevento,funcion,captura);
      return true;
    }
    else
      return false;
}

function crearXMLHttpRequest() 
{
  var xmlHttp=null;
  if (window.ActiveXObject) 
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  else 
    if (window.XMLHttpRequest) 
      xmlHttp = new XMLHttpRequest();
  return xmlHttp;
}

En la función procesar eventos debemos llamar al método parseJSON:

    var datos=conexion1.responseText.parseJSON();

Esto lo podemos hacer ya que la librería añade esta funcionalidad a los string.

el archivo pagina1.php no tiene cambios:

<?php
$conexion=mysql_connect("localhost","root","z80") 
  or die("Problemas en la conexion");
mysql_select_db("bdajax",$conexion) or 
 die("Problemas en la seleccion de la base de datos");

$registros=mysql_query("select codigo,descripcion,precio from perifericos",$conexion) 
  or die("Problemas en el select".mysql_error());

while ($reg=mysql_fetch_array($registros))
{
  $vec[]=$reg;
}

require('../JSON.php');
$json=new Services_JSON();
$cad=$json->encode($vec);
echo $cad;
?>

23 - De JSON a JavaScript (utilizando la librería json.js)