• Ir al contenido
  • Ir a la navegación
  • Ir al buscador
 
Infoudo
ING English
Directorio WAP para móvil, Tablet, iPhone o Smartphone

Centro de Noticias de la Universidad de Oriente

Categorías

 

Inicio  |  Contacto  |  Posts  |  TIENDA PUBLISHOP  |  Sobre nosotros  |  Registro y Planes  |  Pagos  |  Donaciones

Ver Código QR de esta página

Campaña #AyudemosaYuli  |  Campaña #AyudemosaStephany.  |  ¿Interesado(a) en cursos y resolución de ejercicios de materias prácticas? Para más información, contáctenos por: Teléfono: +58 (412) - 8226575. WhatsApp y Telegram: +58 (426) - 6836955 o escriba al correo: [email protected]. Únete al grupo: SISTEMAS (UDOMO).

[»] **Musica para tu celular

WEB TRANSLATOR

LINK for English Language

Use this link for translate into English


+ Buscar en InfoUDO

 

Qué es JSON?

Tweet
 

domingo julio 10, 2016

19 - Qué es JSON?


JSON es el acrónimo de JavaScript Object Notation.

JSON es un formato alternativo de envío y recepción de datos, es decir remplaza a XML o el envío de texto plano.

Este formato de datos es más liviano que XML.

Veremos que hace el código más sencillo ya que utiliza el código JavaScript como modelo de datos.

Tenemos que repasar un poco como se definen los array literales y objetos literales en JavaScript, ya que serán las estructuras para la transmisión de datos:

var usuario=["juan","26"];

Como vemos los elementos de un array literal se encierran entre corchetes y los valores contenidos van separados por coma.

Cuando definimos un array literal no le indicamos a cada elemento de que tipo se trata, podemos almacenar cadenas (entre comillas), números, valores lógicos (true,false) y el valor null.

Para acceder a los elementos de un array literal lo hacemos por su nombre y entre corchetes indicamos que elementos queremos acceder:

  alert(usuario[0]); //Imprimimos el primer elemento del array
  alert(usuario[1]); //Imprimimos el segundo elemento del array

Veamos como definimos los objetos literales en JavaScript:

var persona={
  "nombre":"juan",
  "clave":"xyz",
  "edad":"26"
};

Los objetos literales se definen por medio de pares "nombre":"valor"

Todo objeto literal tiene un nombre, en el ejemplo le llamé persona. Un objeto literal contiene una serie de propiedades con sus respectivos valores. Todas las propiedades del objetos se encuentran encerradas entre llaves. Luego cada propiedad y valor se las separa por dos puntos. Y por último cada propiedad se las separa de las otras propiedades por medio de la coma.

Para acceder a las propiedades del objeto literal lo podemos hacer de dos formas:

alert(persona.nombre);  //Imprime el valor de la propiedad nombre del objeto persona.

La segunda forma es indicando la propiedad entre corchetes:

alert(persona['nombre']); 

Luego se pueden combinar objetos literales y array literales:

var persona={
             "nombre":"juan",
             "edad":"22",
             "estudios":["primario","secundario"]
            };

Como podemos ver podemos crear estructuras de datos complejas combinando objetos literales y array literales.

Luego para acceder a los distintos elementos tenemos:

alert(persona.nombre);
alert(persona.estudios[0]);
alert(persona.estudios[1]);

La sintaxis de JSON difiere levemente de lo visto anteriormente:

{
  "nombre":"juan",
  "edad":"22",
  "estudios":["primario","secundario"]
}

Como podemos ver en la sintaxis JSON no aparecen variables, sino directamente indicamos entre llaves las propiedades y sus valores.

También hemos eliminado el punto y como luego de la llave final. El resto es igual.

Ahora veamos la diferencia entre JSON y XML utilizando este ejemplo:

XML:

<persona>
<nombre>juan</nombre>
<edad>22</edad>
<estudios>
<estudio>primario</estudio>
<estudio>secundario</estudio>
</estudios>
</persona>

Y como vimos en JSON:

{
  "nombre":"juan",
  "edad":"22",
  "estudios":["primario","secundario"]
}

Podemos ver que es mucho más directa la definición de esta estructura.

Como podemos ver si tenemos que transmitir estas estructuras por internet la notación JSON es más liviana.

Otra ventaja es como recuperamos los datos en el navegador, como vimos si se trata de un archivo XML llamamos al método requestXML y luego accedemos por medio del DOM

En cambio con JSON al llegar el archivo procedemos a generar una variable en JavaScript que recree el objeto literal, esto mediante la el método parse del objeto JSON:

var persona=JSON.parse(conexion1.responseText);

Ya veremos en el próximo concepto como recuperar los datos del servidor mediante el objeto XMLHttpRequest

Para probar y generar un objeto a partir de una notación JSON haremos el siguiente problema:

Confeccionar una página que contenga un botón. Al ser presionado evaluar un string que almacena un objeto literal con notación JSON. El objeto literal debe representar las características de una computadora (procesador, memoria ram, capacidad de cada disco duro)

Mostrar los datos mediante el método alert

Hay que tener bien en cuenta que en este problema no hay nada de AJAX ya que no nos comunicaremos con el servidor para el envío de datos.

pagina1.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Problema</title>
  <script src="funciones.js"></script>
</head>
<body>
  <h1>Evaluar una variable que contiene notación JSON.</h1>
  <input type="button" id="boton1" value="Ver">
</body>
</html>

funciones.js

addEventListener('load',inicializarEventos,false);

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

function presionBoton(e)
{
  var cadena='{"microprocesador":"pentium",' +
             '"memoria":1024,' +
             '"discos":[80,250]' +
             '}';
  var maquina=JSON.parse(cadena);
  alert('microprocesador:'+maquina.microprocesador);
  alert('Memoria ram:'+maquina.memoria);
  alert('Capacidad disco 1:'+maquina.discos[0]);
  alert('Capacidad disco 2:'+maquina.discos[1]);
}

Cuando se presiona el botón se ejecuta la función presionBoton. En esta lo primero que hacemos definimos un string que contiene un objeto con notación JSON:

  var cadena='{"microprocesador":"pentium",' +
             '"memoria":1024,' +
             '"discos":[80,250]' +
             '}';

Seguidamente pasamos a evaluar este string:

  var maquina=JSON.parse(cadena);

Ahora si tenemos un objeto JavaScript. Esto se logra utilizando la función parse del objeto JSON.

Una vez que tenemos el objeto en JavaScript procedemos a acceder a sus atributos:

  alert('microprocesador:'+maquina.microprocesador);
  alert('Memoria ram:'+maquina.memoria);
  alert('Capacidad disco 1:'+maquina.discos[0]);
  alert('Capacidad disco 2:'+maquina.discos[1]);


Problema resuelto.


Confeccionar una página que contenga un botón. Al ser presionado evaluar un string que almacena un objeto literal con notación JSON. El objeto literal debe representar las características de una computadora (procesador, memoria ram, capacidad de cada disco duro)

Mostrar los datos mediante el método alert


pagina1.html



Ejecutar ejemplo



funciones.js


Problema propuesto.

Definir con JSON una estructura que represente a un empleado, almacenar el nombre,fecha de ingreso, número de documento y los importes de sus últimos tres sueldos.

Imprimir los datos luego en pantalla.


Ver solución


pagina1.html

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Problema</title> <script src="funciones.js"></script> </head> <body> <h1>Evaluar una variable que contiene notación JSON.</h1> <input type="button" id="boton1" value="Ver"> </body> </html>

funciones.js

addEventListener('load',inicializarEventos,false); function inicializarEventos() { var ob=document.getElementById('boton1'); ob.addEventListener('click',presionBoton,false); } function presionBoton(e) { var cadena='{ "nombre":"Gonzalez luis",' + ' "fechanac":"23/12/1968",' + ' "dni":"20546789",' + ' "sueldos":[1880,1900,2130]' + ' }'; var empleado=JSON.parse(cadena); alert('Nombre:'+empleado.nombre); alert('Fecha de nacimiento:'+empleado.fechanac); alert('DNI:'+empleado.dni); alert('Sueldo 1:'+empleado.sueldos[0]); alert('Sueldo 2:'+empleado.sueldos[1]); alert('Sueldo 3:'+empleado.sueldos[2]); }
  Ejecutar ejemplo	

Retornar

— @INFOUDO.OFICIAL

— Síguenos en Facebook@INFOUDO.OFICIAL

Categorías: #Ajax, #


[0] Atrás | Directorio
« Inicio
Apps Infoudo
Apps Infoudo ¡Descarga el icono directo en el menú de tu equipo!
[»] Las mejores Apps para tu celular
[»] Imágenes Gratis


Comenta o lee lo que otros opinan

COMPÁRTELO:

Indica que te gusta y comparte

Me Gusta :)Facebook Tuiteame :)Twitter .WhatsApp .Telegram . LinkedIn

También te puede interesar:

Validación de la existencia de un nombre de usuario en forma asincrónica (AJAX)
Pizarra interactiva multiusuario
De JSON a PHP (utilizando la función json_decode)
De JSON a JavaScript (utilizando utilizando la función parse)
De JavaScript a JSON (utilizando la función stringify del objeto JSON)
De PHP a JSON (utilizando la función json_encode)
Recuperar datos del servidor en formato JSON
Encuenta con AJAX
Autocompletar un control de tipo text
Mostrar un tooltip con datos recuperados del servidor en forma asincrónica


« Encuenta con AJAX  |  Recuperar datos del servidor en formato JSON »
 
Apps Infoudo
 
Buscador:
Powered by Google:


Web móvil
Imágenes
La Web

 

Síguenos por RSS


Puedes leerlos mediante el navegador Firefox, lectores de noticias en la computadora o el móvil o usando el servicio de Feedburner de Google para recibir las notificaciones por correo electrónico.
RSS - Suscribirse usando Feedburner de Google

email Recibir las nuevas publicaciones de Infoudo por email

Atom


»Ir a URL
.....
Registra Gratis Tu Negocio
....
Sugerir un nuevo sitio WAP

...
¡Bloguea Ya!

..
Registro de Profesionales(Abogados, escritores, doctores, licenciados, ingenieros, etc.)
.
Soporte

Síguenos en las redes sociales

Síguenos en Facebook facebook.com/INFOUDO.OFICIAL Síguenos en Twitter @infoudomon Síguenos en Instagram @infoudooficial Síguenos en Telegram t.me/Infoudooficial
Síguenos en Facebook facebook.com/tuinfou Síguenos en Twitter @infoudomonagas
Síguenos en WhatsApp INFO UDO Síguenos en YouTube youtube.com/@infoudooficial
Síguenos en Facebook facebook.com/SergioAlemanFans Síguenos en Twitter @SergioAleman1 Síguenos en Instagram @sergioalemanfans
Síguenos en WhatsApp wa.me/qr/Y7Q232VLZPR5O1 Síguenos en Tiktok @sergioalemanoficial Síguenos en Tiktok @sergioalemanfans
Síguenos en Telegram t.me/SergioAlemanOficial Síguenos en YouTube youtube.com/@sergioaleman
Síguenos en Facebook facebook.com/boludooficial Síguenos en Twitter @bolUDOoficial Síguenos en Instagram @boludooficial Síguenos en Telegram t.me/Boludooficial
Síguenos en WhatsApp BolUDOoficial Síguenos en YouTube youtube.com/@boludo.oficial

Mis cuentas sociales

FB
Twitter
Pinterest
Instagram
Otras

Móvil: (0426 683 6955 - 0412 8226575) - E-mail: [email protected] - [email protected] - WhatsApp: +58 (0426) 683.69.55


Copyscape
Volver arriba

Protocolo  |  Mapa del Sitio  |  Report Abuse - DMCA  |  Términos y Condiciones  |  Ayuda  |  Privacidad de Datos  |  Política de Cookies  |  Reportar un bug  |  Licencia: CC BY-NC-ND 3.0

Copyright ©2023 Infoudo. Todos los derechos reservados. Diseñado y Desarrollado por Sergio Alemán Mi perfil en GitHub


SUBIR