在前端开发中，经常需要获取服务器上存储的静态TXT文件内容并展示在页面上，实现这个需求的核心是向服务器发起请求获取文件内容，再将内容渲染到页面中。接下来会介绍两种常用的实现方式，以及完整的实现流程和注意事项。
实现原理说明
服务器上的TXT文件属于静态资源，只要服务器正确配置了静态资源访问规则，就可以通过对应的URL直接访问。JavaScript需要向这个URL发起HTTP请求，获取文件的文本内容，之后将内容处理成合适的格式，插入到页面的DOM节点中，就能完成动态显示的效果。
方式一：使用XMLHttpRequest实现
XMLHttpRequest是比较传统的请求方式，兼容性较好，适合需要兼容旧浏览器的场景。实现步骤如下：
- 创建XMLHttpRequest实例
- 调用open方法设置请求方法和文件URL
- 监听onload事件处理返回的内容
- 调用send方法发送请求
下面是完整的代码示例：
// 创建XMLHttpRequest实例
const xhr = new XMLHttpRequest();
// 设置请求方法和TXT文件的服务器地址，这里假设文件放在服务器的static目录下
const txtUrl = '/static/demo.txt';
xhr.open('GET', txtUrl, true);
// 监听请求完成事件
xhr.onload = function() {
if (xhr.status >= 200 && xhr.status < 300) {
// 获取返回的文本内容
const txtContent = xhr.responseText;
// 获取页面中用于显示内容的容器，假设容器id为txtContainer
const container = document.getElementById('txtContainer');
if (container) {
// 将文本内容设置为容器的innerText，保留原始换行格式
container.innerText = txtContent;
}
} else {
console.error('读取TXT文件失败，状态码：', xhr.status);
}
};
// 监听请求错误事件
xhr.onerror = function() {
console.error('请求TXT文件时发生网络错误');
};
// 发送请求
xhr.send();
方式二：使用Fetch API实现
Fetch API是现代浏览器支持的原生请求接口，语法更简洁，基于Promise设计，更适合异步流程处理。实现步骤如下：
- 调用fetch方法传入TXT文件的URL
- 通过then处理响应，调用text方法将响应转为文本
- 将获取到的文本内容插入到页面容器中
- 通过catch捕获请求过程中的错误
下面是完整的代码示例：
// TXT文件的服务器地址
const txtUrl = '/static/demo.txt';
// 发起请求
fetch(txtUrl)
.then(response => {
// 检查响应状态是否正常
if (!response.ok) {
throw new Error('请求失败，状态码：' + response.status);
}
// 将响应内容转为文本
return response.text();
})
.then(txtContent => {
// 获取页面显示容器
const container = document.getElementById('txtContainer');
if (container) {
// 渲染文本内容，使用pre标签可以保留原始换行和空格格式
container.innerHTML = '<pre>' + txtContent + '</pre>';
}
})
.catch(error => {
console.error('读取TXT文件出错：', error.message);
});
注意事项
跨域问题处理
如果TXT文件存放在不同域的服务器上，需要目标服务器配置CORS（跨域资源共享）规则，允许当前域的请求访问，否则浏览器会拦截请求。如果是同域下的静态文件，一般不需要额外处理跨域问题。
文件编码问题
如果TXT文件包含中文等非ASCII字符，需要确保文件保存时的编码格式和服务器返回时的编码一致，通常建议使用UTF-8编码，避免出现乱码问题。
容器选择建议
如果TXT文件内容包含换行、空格等格式，建议使用<pre>标签作为容器，或者给容器设置white-space: pre-wrap的CSS样式，这样可以保留原始的文本格式，显示效果更符合预期。
页面容器示例
可以在HTML中提前定义好用于显示内容的容器，示例代码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>TXT文件内容展示</title>
<style>
#txtContainer {
width: 800px;
margin: 20px auto;
padding: 15px;
border: 1px solid #eee;
min-height: 200px;
}
</style>
</head>
<body>
<h1>TXT文件内容展示</h1>
<div id="txtContainer">加载中...</div>
<script>
// 这里可以放入上面两种方式的任意一段请求代码
</script>
</body>
</html>
JavaScriptTXT文件读取动态显示服务器请求Fetch_API修改时间：2026-06-08 23:12:27