Docsity
Docsity

Prepara tus exámenes
Prepara tus exámenes

Prepara tus exámenes y mejora tus resultados gracias a la gran cantidad de recursos disponibles en Docsity


Consigue puntos base para descargar
Consigue puntos base para descargar

Gana puntos ayudando a otros estudiantes o consíguelos activando un Plan Premium


Orientación Universidad
Orientación Universidad


Leyendo ficheros desde Javascript, Apuntes de Informática

Curso de desarrollo de aplicaciones web con Ajax y ficheros Json

Tipo: Apuntes

2019/2020

Subido el 26/05/2020

jose-rodri
jose-rodri 🇪🇸

5

(1)

10 documentos

1 / 9

Toggle sidebar

Esta página no es visible en la vista previa

¡No te pierdas las partes importantes!

bg1
ADMINISTRACIÓN DE SISTEMAS INFORMÁTICOS .
1
INDEX
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".
1. File: representa un archivo individual que proporciona información de
solo lectura (por ejemplo, el nombre, el tamaño del archivo, el tipo
MIME y una referencia al control del archivo).
2. FileList: representa una secuencia de conjunto de objetos File (tanto
la secuencia <input type="file" multiple> como arrastrar un directorio
de archivos desde el escritorio se consideran ejemplos de esta
interfaz).
3. Blob: permite fragmentar un archivo en intervalos de bytes.
Cuando se utiliza junto con las estructuras de datos estándad, la interfaz de
FileReader se puede utilizar para leer un archivo de forma asíncrona mediante
el control de eventos de JavaScript. Por lo tanto, se puede controlar el progreso
de una lectura, detectar si se han producido errores y determinar si ha finalizado
una carga. El modelo de evento de XMLHttpRequest guarda muchas
semejanzas con las API.
Nota: Las API necesarias para trabajar con archivos locales son compatibles
con Chrome 6.0 y Firefox 3.6. A partir de Firefox 3.6.3, no se admite el método
File.slice().
Unidad 3 Leyendo ficheros JSON
pf3
pf4
pf5
pf8
pf9

Vista previa parcial del texto

¡Descarga Leyendo ficheros desde Javascript y más Apuntes en PDF de Informática solo en Docsity!

INDEX

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".

  1. File: representa un archivo individual que proporciona información de solo lectura (por ejemplo, el nombre, el tamaño del archivo, el tipo MIME y una referencia al control del archivo).
  2. FileList : representa una secuencia de conjunto de objetos File (tanto la secuencia como arrastrar un directorio de archivos desde el escritorio se consideran ejemplos de esta interfaz).
  3. Blob : permite fragmentar un archivo en intervalos de bytes. Cuando se utiliza junto con las estructuras de datos estándad, la interfaz de FileReader se puede utilizar para leer un archivo de forma asíncrona mediante el control de eventos de JavaScript. Por lo tanto, se puede controlar el progreso de una lectura, detectar si se han producido errores y determinar si ha finalizado una carga. El modelo de evento de XMLHttpRequest guarda muchas semejanzas con las API. Nota: Las API necesarias para trabajar con archivos locales son compatibles con Chrome 6.0 y Firefox 3.6. A partir de Firefox 3.6.3, no se admite el método File.slice().

Unidad 3 – Leyendo ficheros JSON

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.

  1. FileReader.readAsBinaryString(Blob|File): la propiedad result contendrá los datos del archivo/objeto BLOB en forma de cadena binaria. Cada byte se representa con un número entero comprendido entre 0 y 0,255, ambos incluidos.
  2. FileReader.readAsText(Blob|File, opt_encoding): la propiedad result contendrá los datos del archivo/objeto BLOB en forma de cadena de texto. De forma predeterminada, la cadena se decodifica con el formato "UTF-8". Utiliza el parámetro de codificación opcional para especificar un formato diferente.
  3. FileReader.readAsDataURL(Blob|File): la propiedad result contendrá los datos del archivo/objeto BLOB codificados como una URL de datos.
  4. FileReader.readAsArrayBuffer(Blob|File): la propiedad result contendrá los datos del archivo/objeto BLOB como un objeto ArrayBuffer. Una vez que se ha activado uno de estos métodos de lectura en el objeto FileReader, se pueden utilizar los eventos onloadstart, onprogress, onload, onabort, onerror y onloadend para realizar un seguimiento de su progreso.

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: