





Prepara tus exámenes y mejora tus resultados gracias a la gran cantidad de recursos disponibles en Docsity
Gana puntos ayudando a otros estudiantes o consíguelos activando un Plan Premium
Prepara tus exámenes
Prepara tus exámenes y mejora tus resultados gracias a la gran cantidad de recursos disponibles en Docsity
Prepara tus exámenes con los documentos que comparten otros estudiantes como tú en Docsity
Encuentra los documentos específicos para los exámenes de tu universidad
Estudia con lecciones y exámenes resueltos basados en los programas académicos de las mejores universidades
Responde a preguntas de exámenes reales y pon a prueba tu preparación
Consigue puntos base para descargar
Gana puntos ayudando a otros estudiantes o consíguelos activando un Plan Premium
Comunidad
Pide ayuda a la comunidad y resuelve tus dudas de estudio
Ebooks gratuitos
Descarga nuestras guías gratuitas sobre técnicas de estudio, métodos para controlar la ansiedad y consejos para la tesis preparadas por los tutores de Docsity
Curso de desarrollo de aplicaciones web con Ajax y ficheros Json
Tipo: Apuntes
1 / 9
Esta página no es visible en la vista previa
¡No te pierdas las partes importantes!






1.- Lectura de ficheros con JavaScript 2.- Utilizando JQuey. 3.- La API de Yahoo. 1.- Lectura de ficheros con JavaScript HTML5 ofrece una forma estándar de interactuar con archivos locales a través de la especificación del API de archivos. El API de archivos se puede utilizar, por ejemplo, para crear una vista previa en miniatura de imágenes mientras se envían al servidor o para permitir que una aplicación guarde una referencia de un archivo mientras el usuario está sin conexión. También se podría utilizar lógica de cliente para verificar si el tipo MIME de un archivo subido coincide con la extensión del archivo o para restringir el tamaño de una subida. A continuación se indican las interfaces que ofrece la especificación para acceder a archivos desde un sistema de archivos "local".
En primer lugar, se debe comprobar que el navegador sea totalmente compatible con el API de archivos: // Chequeo del navegador con varias APIS utilizadas if (window.File && window.FileReader && window.FileList && window.Blob) { alert(“Navegador compatible”); } else { alert(“El navegador no es compatible”'); } Lo primero es escoger el fichero que queremos leer. Objeto input type file Después de obtener una referencia de File, crea instancias de un objeto FileReader para leer su contenido en memoria. Cuando finaliza la carga, se activa el evento onload del lector y se puede utilizar su atributo result para acceder a los datos del archivo. A continuación, se indican las cuatro opciones de lectura asíncrona de archivo que incluye FileReader.
Leer archivo de texto
for (x in obj) { document.getElementById("salida").innerHTML += x; } 2.- Utilizando JQuey. En el apartado anterior vimos como abrir ficheros del lado del cliente utilizando javascript. Si queremos leer ficheros del lado del servidor tendremos que utilizar otra técnica como PHP, AJAX o bien el framework JQuery. jQuery es UN FRAMEWORK multiplataforma de JavaScript que permite simplificar la manera de interactuar con los documentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la técnica AJAX a páginas web En este ejercicio trabajaremos con el fichero datos.json cuyo contenido es el siguiente: { "Nombre": "Antonio Perez", "Domicilio": "La Unión,3", "DNI": "30675453" } Este fichero debe estar ubicado en el servidor en cualquier carpeta de trabajo que esté dentro del directorio htdocs de xampp. La página html que procesa este fichero también debe estar en el servidor en la misma carpeta (aunque no es necesario). La página index.html contiene el código jquery que lee el fichero json. Previamente hay que llamar a la API jquery
Y después ejecutamos el siguiente código
La línea $(document).ready(function () { // aqui el código jquery } Es imprescindible y su función es asegurarse de que la jerarquía DOM se ha cargado satisfactoriamente La Línea $("#boton1").click(function () { Programa el objeto cuyo ID es “boton1” de forma que al pulsar sobre el se dispara el código que está dentro de la función. Este código es el que permite leer el fichero json y cargarlo en un objeto javascript llamado data (podría ser cualquier otro nombre) $.getJSON( "datos.json", function( data ) { alert(data.Nombre); }); Despues, utilizamos la nomenclatura de objetos para extraer la propiedad nombre y escribir su valor en una ventana. El ejercicio completo sería el siguiente:
El resultado sería el siguiente: En el siguiente ejemplo mostramos los datos del objeto en forma de tabla
// Definimos un Array formado por 4 elementos var jsonString = '[ {"nombre":"Antonio Serrano", "Curso":"1ASIR"},{"nombre":"Luis Marín", "Curso":"1ASIR"},{"nombre":"María Jimenez", "Curso":"1ASIR"},{"nombre":"Marcos Ruiz", "Curso":"1ASIR"}]'; // JSON.parse convierte en objeto javascript try { var data = Y.JSON.parse(jsonString); } catch (e) { alert("Datos no válidos"); } var p=data.length; document.write (""); for (i=0;i" +data[i].nombre + "" + data[i].Curso + ""); document.write (""); }) }
El resultado sería: