html5提供五种原生数据读取机制：一、FileReader异步读取本地文件；二、fetch()获取远程结构化数据；三、XMLHttpRequest精细控制请求；四、URL.createObjectURL()预览二进制文件；五、IndexedDB持久化读取本地结构化数据。
如果您需要在网页中从本地文件或服务器获取结构化数据，html5 提供了多种原生机制来实现数据读取。以下是执行 HTML5 数据读取操作的具体步骤：
一、使用 FileReader 读取本地文件
FileReader 接口允许 Web 应用程序异步读取存储在用户计算机上的文件内容，适用于用户通过 选择的文件。
1、在页面中添加文件选择输入框：<input type="file" id="fileInput">。
2、为该输入框绑定 change 事件监听器，获取 FileList 对象中的首个文件。
立即学习“前端免费学习笔记（深入）”；
3、创建 FileReader 实例，并设置其 onload 事件处理函数，在其中访问 e.target.result 获取读取结果。
4、调用 readAsText() 方法读取文本文件，或使用 readAsDataURL() 读取图像等二进制资源。
二、使用 fetch() API 读取远程数据
fetch() 是 HTML5 后期引入的标准网络请求接口，用于替代 XMLHttpRequest，支持 promise，可读取 jsON、文本、Blob 等格式的远程资源。
1、调用 fetch(‘https://api.example.com/data.json’) 发起 GET 请求。
2、使用 .then() 链式调用 response.json() 解析响应体为 javaScript 对象。
3、若需读取纯文本，改用 response.text()；若需读取二进制数据，使用 response.blob()。
4、在后续 .then() 中处理解析后的数据，例如渲染到页面或存入变量。
三、使用 XMLHttpRequest 手动读取响应
XMLHttpRequest（XHR）是较早的浏览器内置对象，仍被广泛支持，适用于需精细控制请求头、超时、进度监听等场景。
1、创建 XHR 实例：const xhr = new XMLHttpRequest();。
2、调用 xhr.open(‘GET’, ‘data.csv‘, true) 初始化请求。
3、设置 xhr.responseType = ‘text’ 或 ‘json’ 指定响应解析类型。
4、绑定 xhr.onload 事件，在其中检查 xhr.status === 200 并访问 xhr.response 获取数据。
四、使用 URL.createObjectURL() 读取文件引用
该方法生成临时 URL 指向本地 File 或 Blob 对象，适用于快速预览图像、音频、视频等二进制内容，无需实际读取为文本或数据流。
1、监听文件输入元素的 change 事件，从 Event.target.files[0] 获取 File 对象。
2、调用 URL.createObjectURL(file) 生成可直接赋值给 或
3、在不再需要时，必须显式调用 URL.revokeObjectURL(url) 释放内存引用。
五、使用 IndexedDB 读取本地结构化数据
IndexedDB 是浏览器提供的低级 API，用于在客户端存储大量结构化数据，并支持索引与事务操作，适合离线应用的数据持久化读取。
1、调用 indexedDB.open(‘myDB’, 1) 打开或创建数据库实例。
2、在 onupgradeneeded 事件中创建 objectStore 并设置 keyPath 与索引。
3、使用 transaction.objectStore(‘storeName’).get(key) 执行单条记录读取。
4、对多条记录读取，可使用 openCursor() 遍历所有匹配项，或 getAll() 获取全部数据数组。