InfoUDO: Recuperar datos del servidor en formato JSON

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:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Problema</title>
  <script src="funciones.js"></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:

addEventListener('load',inicializarEventos,false);

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

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


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

function procesarEventos()
{
  var resultados = document.getElementById("resultados");
  if(conexion1.readyState == 4)
  {
    var datos=JSON.parse(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 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=new XMLHttpRequest();
  conexion1.onreadystatechange = procesarEventos;
  conexion1.open('GET','pagina1.php?dni='+dni, true);
  conexion1.send();
}

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=JSON.parse(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 parse del objeto JSON 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=utf-8');
$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. También deben ir con comillas dobles los nombres de las propiedades y sus valores.

Problema resuelto.

Confeccionar un sitio que permita ingresar el documento de una persona y nos retorne su apellido, nombre y lugar donde debe votar.
pagina1.html

Ejecutar ejemplo

funciones.js

pagina1.php

Problema propuesto.

Modificar el problema resuelto de tal forma que se muestre un mensaje si no existe el dni ingresado.

Ver solución

pagina1.html<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Problema</title>
  <script src="funciones.js"></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>

funciones.jsaddEventListener('load',inicializarEventos,false);

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

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


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

function procesarEventos()
{
  var resultados = document.getElementById("resultados");
  if(conexion1.readyState == 4)
  {
    var datos=JSON.parse(conexion1.responseText);
    if (datos.apellido.length>0)
    {
      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 = 'Número de documento inexistente.';
    }
  } 
  else 
  {
    resultados.innerHTML = "Cargando...";
  }
}

pagina1.php<?php
header('Content-Type: text/txt; charset=utf-8');
$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'
      }";
?>

  Ejecutar ejemplo

WEB TRANSLATOR

Recuperar datos del servidor en formato JSON

20 - Recuperar datos del servidor en formato JSON

Problema resuelto.

Problema propuesto.

pagina1.html

funciones.js

pagina1.php

Retornar

COMPÁRTELO:

Síguenos por RSS

Síguenos en las redes sociales

Mis cuentas sociales


Ir al contenido Ir a la navegación Ir al buscador

English Directorio WAP para móvil, Tablet, iPhone o Smartphone Centro de Noticias de la Universidad de Oriente Categorías