Conceptos de Ajax

Para ver como recuperamos datos del servidor en formato JSON en lugar de texto plano o XML implementaremos el siguiente ejemplo:
Confeccionar un sitio que permita ingresar el documento de una persona y nos retorne su apellido, nombre y lugar donde debe votar.

Para reducir el tamaño del problema y concentrarnos en la forma de transmisión de datos y su posterior recuperación en el navegador no implementaremos una base de datos en el servidor (en la realidad los datos de los votantes se encontrarían en una tabla)

El archivo pagina1.html:

<html>
<head>
<title>Problema</title>
<script src="funciones.js" language="JavaScript"></script>
</head>
<body>
Ingrese dni (solo existen los valores 1,2 y 3):<input type="text" 
name="dni" id="dni" size="10"><br>
<input type="button" value="Enviar" id="boton1">
<div id="resultados"></div>
</body>
</html>

El archivo html no tiene nada especial. Definimos el div resultados para mostrar posteriormente los datos devueltos por el servidor.

El archivo funciones.js:

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

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

function presionBoton(e)
{
  var ob=document.getElementById('dni');
  recuperarDatos(ob.value);
}


var conexion1;
function recuperarDatos(dni) 
{
  conexion1=crearXMLHttpRequest();
  conexion1.onreadystatechange = procesarEventos;
  conexion1.open('GET','pagina1.php?dni='+dni, true);
  conexion1.send(null);
}

function procesarEventos()
{
  var resultados = document.getElementById("resultados");
  if(conexion1.readyState == 4)
  {
    var datos=eval("(" + conexion1.responseText + ")");
    var salida = "Apellido:"+datos.apellido+"<br>";
    salida=salida+"Nombre:"+datos.nombre+"<br>";
    salida=salida+"Dirección donde debe votar:"+datos.direccion;
    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;
}

Cuando se presiona el botón enviar se ejecuta la función:

function presionBoton(e)
{
  var ob=document.getElementById('dni');
  recuperarDatos(ob.value);
}

En esta función recuperamos el documento ingresado por el operador y llamamos a la función recuperarDatos pasando como parámetro el dni de la persona.

La función:

var conexion1;
function recuperarDatos(dni) 
{
  conexion1=crearXMLHttpRequest();
  conexion1.onreadystatechange = procesarEventos;
  conexion1.open('GET','pagina1.php?dni='+dni, true);
  conexion1.send(null);
}

crea un objeto de la clase XMLHttpRequest y procede a realizar una comunicación asincrónica con el servidor pasando por parámetro GET el dni ingresado por el visitante al sitio.

Luego la función procesarEventos se ejecuta para cada uno de los estados de la petición:

function procesarEventos()
{
  var resultados = document.getElementById("resultados");
  if(conexion1.readyState == 4)
  {
    var datos=eval("(" + conexion1.responseText + ")");
    var salida = "Apellido:"+datos.apellido+"<br>";
    salida=salida+"Nombre:"+datos.nombre+"<br>";
    salida=salida+"Dirección donde debe votar:"+datos.direccion;
    resultados.innerHTML = salida;
  } 
  else 
  {
    resultados.innerHTML = "Cargando...";
  }
}

Cuando la propiedad readyState tiene almacenado un 4 procedemos a recuperar el string devuelto por la conexión como veremos un poco más abajo se trata de un string que almacena los datos en formato JSON.
Procedemos mediante la función eval a generar un objeto en JavaScript y posteriormente mostramos los datos accediendo a los atributos de dicho objeto.

Como podemos observar es muy fácil acceder luego a la información devuelta por el servidor.

Por último el archivo pagina1.php:

<?php
header('Content-Type: text/txt; charset=ISO-8859-1');
$nombre='';
$apellido='';
$direccion='';
if ($_REQUEST['dni']=='1')
{
  $nombre='Juan';
  $apellido='Rodriguez';
  $direccion='Colon 123';
}
if ($_REQUEST['dni']=='2')
{
  $nombre='Ana';
  $apellido='Maldonado';
  $direccion='Lima 245';
}
if ($_REQUEST['dni']=='3')
{
  $nombre='laura';
  $apellido='Pueyrredon';
  $direccion='Laprida 785';
}

echo "{
        'nombre':'$nombre',
        'apellido':'$apellido',
        'direccion':'$direccion'
      }";
?>

Como dijimos para concentrarnos en JSON no extraemos la información de una base de datos. Por medio de tres if verificamos que número de documento se trata y procedemos a inicializar tres variables.

Lo más interesante es como procedemos a generar la salida con formato JSON:

echo "{
        'nombre':'$nombre',
        'apellido':'$apellido',
        'direccion':'$direccion'
      }";

Recordemos que todo objeto JSON debe ir entre llaves y cada atributo le debe seguir el caracter dos puntos y el valor de dicho atributo.

20 - Recuperar datos del servidor en formato JSON