JavaScript 读取 TXT 文件
在网页开发中，我们经常需要从服务器获取一些文本数据，这些数据可能是 JSON 格式，也可能是普通的文本格式，无论是哪种格式，我们都可以使用 JavaScript 来读取这些数据，本文将介绍如何使用 JavaScript 读取 TXT 文件。
1、使用 FileReader API
FileReader API 是 HTML5 提供的一个用于读取文件的 API，我们可以使用它来读取用户上传的 TXT 文件，以下是一个简单的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>读取 TXT 文件</title>
</head>
<body>
<input type="file" id="fileInput">
<script>
document.getElementById('fileInput').addEventListener('change', function(event) {
var file = event.target.files[0];
var reader = new FileReader();
reader.onload = function(e) {
var contents = e.target.result;
console.log(contents);
};
reader.readAsText(file);
});
</script>
</body>
</html>
在这个示例中，我们首先创建了一个文件输入框，然后为其添加了一个 change 事件监听器，当用户选择了一个文件后，事件监听器会被触发，在事件处理函数中，我们首先获取了用户选择的文件，然后创建了一个 FileReader 对象，接着，我们为 FileReader 对象添加了一个 onload 事件监听器，当文件读取完成时，这个事件监听器会被触发，在事件处理函数中，我们获取了文件的内容，并将其输出到控制台，我们调用了 readAsText 方法来读取文件内容。
2、使用 AJAX 请求
除了使用 FileReader API，我们还可以使用 AJAX 请求来读取 TXT 文件，以下是一个简单的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>读取 TXT 文件</title>
</head>
<body>
<button id="loadFile">加载文件</button>
<pre id="content"></pre>
<script>
document.getElementById('loadFile').addEventListener('click', function() {
var xhr = new XMLHttpRequest();
xhr.open('GET', 'example.txt', true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
document.getElementById('content').textContent = xhr.responseText;
}
};
xhr.send();
});
</script>
</body>
</html>
在这个示例中，我们创建了一个按钮和一个预格式化元素，当用户点击按钮时，我们会发送一个 AJAX 请求来获取 TXT 文件的内容，在请求的回调函数中，我们将文件内容设置为预格式化元素的文本内容，注意，我们需要将请求的 URL 替换为实际的 TXT 文件路径。
3、使用 fetch API
fetch API 是一个新的、更现代的 HTTP 请求 API，它可以替代传统的 XMLHttpRequest，以下是一个简单的示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>读取 TXT 文件</title>
</head>
<body>
<button id="loadFile">加载文件</button>
<pre id="content"></pre>
<script>
document.getElementById('loadFile').addEventListener('click', async function() {
const response = await fetch('example.txt');
const text = await response.text();
document.getElementById('content').textContent = text;
});
</script>
</body>
</html>
在这个示例中，我们同样创建了一个按钮和一个预格式化元素，当用户点击按钮时，我们会发送一个 fetch 请求来获取 TXT 文件的内容，在请求的回调函数中，我们将文件内容设置为预格式化元素的文本内容，注意，我们需要将请求的 URL 替换为实际的 TXT 文件路径，由于 fetch API 返回的是一个 Promise，我们需要使用 await 关键字来等待请求完成。