在前端开发中，我们经常需要从外部文件中读取数据，例如配置文件、模板文件、JSON 数据等。而对于文本文件，我们可以利用 JavaScript 的内置函数和技术来实现将文本文件内容加载到 JavaScript 变量中的操作。
1. 使用 XMLHttpRequest
XMLHttpRequest 是一个内置对象，可用于向服务器发起 HTTP 请求，并获取服务器响应的数据。通过使用 XMLHttpRequest 对象，我们可以轻松地从服务器获取文本文件的内容，并将其加载到 JavaScript 变量中。
以下是使用 XMLHttpRequest 加载文本文件内容的示例代码：
----- --- - --- -----------------
--------------- ------------
---------- - -- -- -
-- ----------- --- ---- -
----- ------- - -----------------
---------------------
-
--
-----------在上面的示例代码中，我们首先创建了一个 XMLHttpRequest 对象，并使用 open() 方法打开了一个 GET 请求，其中 file.txt 表示要加载的文本文件的 URL 地址。然后，我们定义了一个 onload 回调函数，它会在请求成功返回时被触发。在回调函数中，我们检查响应状态码是否为 200（表示成功），如果是，则使用 responseText 属性获取文本文件的内容，并输出到控制台中。
注意：由于 XMLHttpRequest 是异步请求，因此我们必须在回调函数中处理文本文件的内容。如果将文本内容赋值给外部变量或返回值，则可能会得到 undefined 或其他意外的结果。
2. 使用 fetch
fetch 是一种用于获取资源的新 API，它基于 Promise 设计，可以更加简洁并且易于使用。与 XMLHttpRequest 不同，fetch 直接返回一个 Promise 对象，并提供了多种数据格式（包括文本、JSON 和二进制等）的处理方式。
以下是使用 fetch 加载文本文件内容的示例代码：
-----------------
-------------- -- ----------------
------------- -- -
---------------------
---在上面的示例代码中，我们使用 fetch 函数发起了一个 GET 请求，并将返回的 Promise 对象链式地传递给 then 方法。第一个 then 方法通过调用 response.text() 方法将响应内容转换为文本字符串，并将其传递给第二个 then 方法。最终，我们将文本内容输出到控制台中。
注意：由于 fetch 也是异步请求，因此我们需要使用 Promise 的链式调用方式来处理文本内容。类似地，如果将文本内容赋值给外部变量或返回值，则可能会得到 undefined 或其他意外的结果。
3. 使用 FileReader
FileReader 是 HTML5 中新增的 API，用于将文件读入内存，并进行操作。它可以用于读取本地文件或用户上传的文件，并提供了多种数据格式（包括文本、二进制和 ArrayBuffer 等）的读取方式。
以下是使用 FileReader 加载本地文本文件内容的示例代码：
----- ----- - --------------------------------
---------- - -------
-------------------------------- -- -- -
----- ---- - ---------------
----- ------ - --- -------------
------------- - -- -- -
----- ------- - --------------
---------------------
--
------------------------
---
---------------------------------在上面的示例代码中，我们创建了一个 input 元素，并将其类型设置为文件选择。当用户选择完文件后，我们从 input.files 中获取第一个文件对象，并创建一个 FileReader 对象。然后，我们定义了一个 onload 回调函数，在读取成功后会将文件内容赋值给 result 属性，并输出到控制台中。最后，我们将 input 元素添加到文档中。
注意：由于 FileReader 是异步读取文件，因此我们必须在回调函数中处理文件内容。如果将文本内容赋值给外部变量或返回值，则可能会得到 undefined 或其他意外的结果
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/10622