在前端开发中，有时需要读取文本文件并在网页中展示其内容。JavaScript 提供了几种方法来实现这一功能。本文将介绍如何使用这些方法读取文本文件，并提供详细的示例代码。
使用 XMLHttpRequest 对象
XMLHttpRequest 是一个内置对象，用于向服务器发送 HTTP 请求。它可以用于读取文本文件，例如 JSON 文件、HTML 文件、CSS 文件等等。以下是一个简单的示例：
----- --- - --- -----------------
--------------- ----------- ------
---------- - ---------- -
-- ------------ --- ---- -
-------------------------------
-
--
-----------在此示例中，我们通过 XMLHttpRequest 对象发送 GET 请求到 file.txt 文件，并在成功加载响应后，将文件内容打印到控制台上。
使用 Fetch API
Fetch API 是一种新的网络请求 API，具有更加简洁和易于使用的界面，而且还支持 Promise。以下是一个使用 Fetch API 的示例：
-----------------
-------------- -- ----------------
---------- -- -------------------与 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