在 JavaScript 中读取文本文件

在开发 Web 应用程序时，有时需要读取文本文件来获取信息。在 JavaScript 中，有多种方法可以实现这一目的。

XMLHttpRequest

使用 XMLHttpRequest 对象是一种常见的方法来获取文本文件。该对象可以向服务器发送异步请求，并接收响应。以下是使用 XMLHttpRequest 获取文本文件的示例代码：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'file.txt', true);

xhr.onload = function () {
  if (this.status === 200) {
    console.log(this.responseText);
  }
};

xhr.send();

上述代码中，xhr.open() 方法打开一个 GET 请求以获取 file.txt 文件。在成功加载文件后，xhr.onload() 回调函数执行，并在控制台中输出文件的文本内容。

Fetch API

Fetch API 是一个现代的 Web API，它提供了一种简单、便捷的方式来获取资源。使用 Fetch API 加载文本文件的示例代码如下所示：

fetch('file.txt')
  .then(response => response.text())
  .then(data => console.log(data));

上述代码中，fetch() 方法发送 GET 请求以获取 file.txt 文件。在成功加载文件后，response.text() 方法将响应数据作为文本解析。最后，then() 回调函数在控制台中输出文件的文本内容。

使用 FileReader

FileReader 是 HTML5 中的一个 API，使 JavaScript 能够直接访问用户计算机上的本地文件。下面是使用 FileReader 读取文本文件的示例代码：

const input = document.querySelector('input[type="file"]');
input.addEventListener('change', function() {
  const file = input.files[0];
  const reader = new FileReader();
  reader.readAsText(file, 'UTF-8');
  reader.onload = function() {
    console.log(reader.result);
  }
});

上述代码中，input 元素为用于选择文件的文件输入框。当用户选择文件时，change 事件将触发。事件处理函数使用 FileReader 对象来读取被选择的文件。readAsText() 方法将整个文件作为文本读取并将其编码为 UTF-8。onload 事件处理程序在文件加载完成后执行，输出文件的文本内容。

以上是在 JavaScript 中读取文本文件的三种常见方法。您可以根据自己的需求选择适合您应用程序的方法。