在 JavaScript 中读取文本文件的方法-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，有时需要读取文本文件并在网页中展示其内容。JavaScript 提供了几种方法来实现这一功能。本文将介绍如何使用这些方法读取文本文件，并提供详细的示例代码。

使用 XMLHttpRequest 对象

XMLHttpRequest 是一个内置对象，用于向服务器发送 HTTP 请求。它可以用于读取文本文件，例如 JSON 文件、HTML 文件、CSS 文件等等。以下是一个简单的示例：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'file.txt', true);
xhr.onload = function() {
    if (this.status === 200) {
        console.log(this.responseText);
    }
};
xhr.send();

在此示例中，我们通过 XMLHttpRequest 对象发送 GET 请求到 file.txt 文件，并在成功加载响应后，将文件内容打印到控制台上。

使用 Fetch API

Fetch API 是一种新的网络请求 API，具有更加简洁和易于使用的界面，而且还支持 Promise。以下是一个使用 Fetch API 的示例：

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

与 XMLHttpRequest 类似，我们也可以通过 Fetch API 发送 GET 请求到 file.txt 文件，并在成功获取响应后，将文件内容打印到控制台上。值得一提的是，我们可以直接调用 response.text() 方法来获取响应内容。

使用 FileReader 对象

FileReader 是一个用于读取文件内容的内置对象。它可以通过 readAsText() 方法读取文本文件，并在成功加载后，将文件内容打印到控制台上。以下是一个使用 FileReader 的示例：

-- -------------------- ---- -------
----- --------- - --------------------------------------
------------------------------------ ---------- -
    ----- ---- - -------------------
    ----- ------ - --- -------------
    ------------------------
    ------------- - ---------- -
        ---------------------------
    --
---

在此示例中，我们首先获取文件输入框元素 file-input，并监听其 change 事件。当用户选择文件后，我们创建一个 FileReader 对象，并调用 readAsText() 方法读取文件内容。最后，在成功加载后，我们将文件内容打印到控制台上。

总结

本文介绍了三种在 JavaScript 中读取文本文件的方法。使用 XMLHttpRequest 和 Fetch API 可以发送 HTTP 请求并获取响应，而使用 FileReader 则可以直接读取本地文件内容。这些方法各有优缺点，需要根据具体情况进行选择。同时，我们还提供了详细的示例代码，供读者参考和学习。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/28539