20 - Recuperar datos del servidor en formato JSON
Simulador
(Cuando presiona el botón "ejecutar el programa" se graban todos los cuadros de texto y se ejecuta el primero de la lista mostrando en una página el resultado.
)
Confeccionar un sitio que permita ingresar el documento de una persona y nos retorne su apellido, nombre y lugar donde debe votar.
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>
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; }
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' }"; ?>