Ahora que esta de moda las API Rest en todo el medio de la Internet, es necesario innovar, y es que en eso pasamos nuestra vida los programadores, innovando e innovando, y como no ser así, si nuestra carrera en eso consiste. Las API Rest si no han escuchado antes el termino son un método de programacion que despeja por completo la relacion que hay entre un servidor y el cliente, llamese navegador.
Aunque este es un tema mas profundo y del cual hablare mas completo en una entrada futura, hoy solo quiero mencionar y enseñarles como mostrar datos de un Archivo JSON en una pagina común, mediante el uso de Ajax de jQuery para la funcionalidad asincrona que requiere este estilo de programacion.
A continuación, vamos a crear esta simple estructura para empezar nuestro proyecto.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Post</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="row">
<div class="row col s12">
<div id="post">
</div>
</div>
</div>
<!-- Agregamos la libreria de jQuery -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
</body>
</html>
Este es el código básico que necesitamos para empezar, pero aun no tenemos nada, antes que nada debemos añadir la función que cargara las entradas, pero de donde?
Crearemos un archivo JSON, yo lo voy a llamar file.json y tendrá la siguiente estructura
[
{
"Titulo" : "Conociendo sobre los efectos de transiciones CSS3",
"Categoria" : "CSS",
"Fecha" : "03-01-2017",
"Hora" : "14:55",
"Permalink" : "https://frikibloggeo.blogspot.com/2017/01/conociendo-sobre-los-efectos-de.html",
"Autor" : "Anthony Medina",
"Contenido" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus est ipsam nesciunt? Inventore distinctio hic iusto totam officia sed, veniam eum corporis, repellendus repudiandae, debitis voluptas quos, alias neque porro?"
},
{
"Titulo" : "Menu contextual sencillo con HTML5, CSS3 y JavaScript (jQuery)",
"Categoria" : "JavaScript",
"Fecha" : "25-12-2015",
"Hora" : "17:06",
"Permalink" : "https://frikibloggeo.blogspot.com/2015/12/menu-contextual-sencillo-con-html5-css3.html",
"Autor" : "Anthony Medina",
"Contenido" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas illo esse animi adipisci quia non tempore vero. Voluptatibus modi nesciunt ducimus quibusdam rerum, fugiat quo mollitia facilis, qui quidem veritatis."
},
{
"Titulo" : "Crear tu propio sistema de comentarios con MySQL y PHP",
"Categoria" : "PHP",
"Fecha" : "09-06-2016",
"Hora" : "14:14",
"Permalink" : "https://frikibloggeo.blogspot.com/2014/06/crear-tu-propio-sistema-de-comentarios.html",
"Autor" : "Anthony Medina",
"Contenido" : "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est quas, ea, recusandae laudantium non dolor ad repellat commodi sint? Fugit, voluptas minus aspernatur iste eius atque aliquid recusandae magnam, sunt."
}
]Como ya habrás podido notar, un JSON no es mas que un array estructurado mediante un estandar establecido que se puede leer de una manera mas sencilla que cualquier array convencional en cualquier lenguaje, particularmente, en el ejemplo, tenemos un array de JSON cuya longitud presenta 3 objetos, los cuales contienen cierta información sobre entradas de un blog cualquiera como son el titulo, fecha, hora, etc.
Si bien, mirar y leer datos de un archivo JSON ya es humanamente legible por decirlo de alguna manera, no es todavía suficientemente humanamente legible, por el uso de corchetes, comas, llaves, puntos, comillas, etc. Y es que JSON no ha sido creado para ser leído por humanos, ha sido creado para ser consumido por humanos mediante el uso de herramientas con jQuery, AngularJS, PHP, entre muchos otros frameworks y lenguajes.
Ahora, que hacemos con este pedazo de JSON?
Bien, a la estructura HTML anteriormente creada, justo debajo de la CDN de jQuery, pegamos el siguiente codigo
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
url: "file.json",
type: "GET",
async: true,
contentType: "application/json; charset=utf-8",
dataType: "json",
beforeSend: function() {
$('#post').html("Cargando post, por favor, espere");
},
success: function(response) {
$('#post').html("");
$.each(response, function(i, post) {
$('#post').append(
"<h5 class='row col s12'><a href='"+post.Permalink+"'>"+post.Titulo+"</a></h5>"
+ "<div class='meta row col s6'>"
+ "<span class='chip'>Autor: <b>"+post.Autor+"</b></span>"
+ "<span class='chip'>Fecha: <b>"+post.Fecha+"</b></span>"
+ "<span class='chip'>Hora: <b>"+post.Hora+"</b></span>"
+ "<span class='chip'>Categoria: <b>"+post.Categoria+"</b></span>"
+ "</div>"
+ "<p class='row col s12'>"+post.Contenido+"</p>"
);
});
}
});
});
</script>
Donde podemos observar, tenemos un script cuyo ejecución es realizada al iniciar la pagina mediante el uso de la función $('document').ready(); de jQuery, dentro de ella llamamos a la función $.ajax();, la cual nos hace un llamado a nuestro archivo JSON que anteriormente creamos, enviando una serie de parámetros necesarios para la lectura del mismo, una vez hecho el llamado, la función success de jQuery imprime el callback de la manera mas humanamente legible dentro de nuestro documento HTML.
Que tenemos hasta ahora?
Bien, pasamos de tener un documento en blanco a tener un pagina cargada con post, pero un poco aburrido esos estilos predeterminados?
Que tal si añadimos un poco de magia con materialize? Simplemente, agrega este código de la CDN justo antes de cerrar la etiqueta </head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">Eso es todo, mira que bonito se ve ahora, aqui te dejo el codigo completo y una demo del mismo en Plunkr
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Post</title>
<!-- Agregamos la hoja de Estilos de Materialize (Opcional) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/css/materialize.min.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="row">
<div class="row col s12">
<div id="post">
</div>
</div>
</div>
<!-- Agregamos la libreria de jQuery -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<!-- Agregamos la libreria de Materialize (Opcional) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.8/js/materialize.min.js"></script>
<!-- Script que se ejecuta al iniciar la pagina y carga los posts a la misma -->
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
url: "file.json",
type: "GET",
async: true,
contentType: "application/json; charset=utf-8",
dataType: "json",
beforeSend: function() {
$('#post').html("Cargando post, por favor, espere");
},
success: function(response) {
$('#post').html("");
$.each(response, function(i, post) {
$('#post').append(
"<h5 class='row col s12'><a href='"+post.Permalink+"'>"+post.Titulo+"</a></h5>"
+ "<div class='meta row col s6'>"
+ "<span class='chip waves-effect'>Autor: <b>"+post.Autor+"</b></span>"
+ "<span class='chip waves-effect'>Fecha: <b>"+post.Fecha+"</b></span>"
+ "<span class='chip waves-effect'>Hora: <b>"+post.Hora+"</b></span>"
+ "<span class='chip waves-effect'>Categoria: <b>"+post.Categoria+"</b></span>"
+ "</div>"
+ "<p class='row col s12'>"+post.Contenido+"</p>"
);
});
}
});
});
</script>
</body>
</html>DEMO
![[2] Crear una calculadora simple en Microsoft Visual Studio 2010 (El Código) Parte I](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihK06o3qxRgndTN83gagg5xMy8Y0s4rg9GCiBabAgKpoFDpCUkp8Al_rfR6HKBuaEHmmst0IOnxKE7V2kHfX63AoPgzF_mZQ-nZ-Bkj4vdbhyphenhyphenPMU_bP1Dk_0ZJf_4_NgJh7dzseZHN7Okh/s72-c/calculadora.JPG "[2] Crear una calculadora simple en Microsoft Visual Studio 2010 (El Código) Parte I")
