Capítulo 13 Leer archivos JSON con AJAX

Presentación del tema: "Capítulo 13 Leer archivos JSON con AJAX"— Transcripción de la presentación:

1 Capítulo 13 Leer archivos JSON con AJAX

2 13.1 Introducción a JSON JSON es un formato de datos más ligero y sencillo de escribir que un documento XML. Es un acrónimo de JavaScript Object Notation. Aunque algunos piensen que significa “El hijito de JavaScript” (JavaScript-son) este formato es independiente del lenguaje y es muy utilizado con AJAX. Fue desarrollado en el año 2000, aproximadamente. Este formato es muy similar a los objetos de tipo JavaScript y sigue las convenciones ampliamente conocidas en los lenguajes de la familia C, como Java, C++, C#, PHP, etcétera. El formato JSON contiene dos estructuras básicas: una colección de “nombre/valor” que se le conoce como objeto, registro, estructura o diccionario, dependiendo del lenguaje, y una lista ordenada de valores que por lo general se les conoce como arreglos, vectores o listas, también desde el lenguaje en que se implemente.

3 Igual que los objetos de JavaScript, inicia con una llave que abre “{“ y termina con una llave de cierre “}”. El nombre de la propiedad es seguido de dos punto “:” y a continuación el valor de la propiedad. Una coma separa los distintos pares de nombre/valor. A diferencia de JavaScript, los nombres también van escritos entre comillas. La extensión de los archivos es .json y su encabezado MIME es “application/json”. Las listas ordenadas o vectores van escritas entre corchetes, al igual que en JavaScript. Si necesita hacer una secuencia de escape, se utiliza la diagonal invertida “\”. Todas estas notaciones son comunes en los lenguajes que provienen del lenguaje C, como ya se había dicho. Al igual que un documento XML, el formato JSON es un texto plano, es autodescriptivo, jerárquico y puede ser leído fácilmente desde el XMLHttpRequest. Un ejemplo sencillo de un objeto JSON sería:

4 13.2 Analizar un objeto JSON desde JavaScript
Igual que los documentos XML, la información de JSON se puede escribir como una cadena dentro de JavaScript, aunque esta práctica es poco común, ya que funciona para pequeñas cantidades de información. Esto lo veremos en el siguiente listado sólo para fines didácticos del método parse(). A diferencia de XML, JavaScript tiene métodos estándares para analizar los objetos JSON: Observe que estamos creando la información en formato JSON dentro de una cadena y lo convertimos en un objeto JavaScript, con lo cual podemos utilizarlo como siempre.

5 13.3 Leer un archivo de formato JSON desde AJAX
Tendremos en este caso un archivo en formato JSON ya creado, el cual puede crear usted desde cualquier editor que no escriba caracteres de control. Lo puede encontrar dentro de los archivos del libro.

6 13.4 Leer un archivo JSON desde una base de datos
AJAX en realidad no puede leerse directamente de una base de datos, sino que llama a un script de un lenguaje de servidor, como puede ser PHP o ASP. Este ejemplo debe de ejecutarse en un servidor, sea local o remoto. Luego mostramos el script para leer una base de datos a los cuales formatea como una salida JSON. No estamos modificando el encabezado MIME, sino que simplemente formateamos los datos como una enorme cadena que es analizada en JavaScript. Un punto importante es que debemos de calcular cuál es el último de los registros, ya que éste no debe tener la coma que separa los objetos, de lo contrario el método parse() no podrá analizar el archivo.

7 13.5 JSON y los navegadores antiguos
Los navegadores antiguos, entiéndase IE7-, no soportan el objeto JSON. El soporte de los navegadores a este objeto es: • Firefox 3.5 • Internet Explorer 8 • Chrome • Opera 10 • Safari 4 En caso de que su navegador no soporte el objeto JSON, puede utilizar la instrucción eval(), que es soportada por cualquier versión de navegador, aunque su uso no se recomienda, ya que ejecuta cualquier instrucción que contenga la cadena.

8 El formato para utilizar esta instrucción es: Observe que es necesario el uso de los paréntesis como una cadena para ser evaluado. El resultado será un objeto con un arreglo que contiene objetos de datos. Por ejemplo: Podremos extraer la información de la siguiente forma: