Conceptos de Ajax

Ahora veremos otra librería, pero esta librería es en JavaScript, la misma nos permite convertir un objeto o array de JavaScript en formato JSON. Así de modo inverso nos permite generar un objeto o array JavaScript a partir de un string JSON y esto de modo seguro.

Esta librería se encuentra en json.js

Solo debemos descargarla y agregarla en nuestra página. Para poder probarlos en este sitio yo la incorporé en una carpeta que se encuentra inmediatamente en el nivel superior donde se almacenan las páginas que está probando. Es decir que para hacer uso en estos ejemplos debemos tipear:

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

La primera función que veremos es la que nos permite convertir un objeto o array a una cadena JSON. Para esto implementaremos un pequeño ejercicio donde al presionar un botón definimos un objeto que almacena tres atributos, de los cuales uno es una array. Luego convertimos dicho objeto a formato JSON con un método contenido en la librería json.js.

pagina1.html:

<html>
<head>
<title>Problema</title>
<script src="../json.js" language="JavaScript"></script>
<script src="funciones.js" language="JavaScript"></script>
</head>
<body>
<h2>Convertir un objeto JavaScript a formato JSON</h2>
<input type="button" value="Convertir" id="boton1">
</body>
</html>

Es importante notar que hemos insertado dos archivos externos codificados en JavaScript:

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

Nuestro archivo con las funciones en JavaScript (funciones.js):

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

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

function mostrarConversion(e)
{
  var obj={
    nombre:'juan',
    edad:25,
    sueldos:[1200,1700,1990]
  };

  var cadena=obj.toJSONString();
  alert(cadena);
}



//***************************************
//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;
}

Lo más importante lo podemos encontrar en la función mostrarConversion:

function mostrarConversion(e)
{
  var obj={
    nombre:'juan',
    edad:25,
    sueldos:[1200,1700,1990]
  };

  var cadena=obj.toJSONString();
  alert(cadena);
}

Primero definimos un objeto en JavaScript:

  var obj={
    nombre:'juan',
    edad:25,
    sueldos:[1200,1700,1990]
  };

El objeto obj contiene tres atributos (nombre,edad y sueldo), de los cuales el último es un array con tres elementos.

Luego simplemente llamando al método toJSONString retorna un string con el contendio del objeto pero codificado en formato JSON:

  var cadena=obj.toJSONString();
  alert(cadena);

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