本文介绍如何通过原生 javascript（无需用户手动选择文件）异步读取服务器上已部署的纯文本文件（如 `example.txt`），并在网页中点击按钮后将其内容加载并显示在指定 html 元素内。
在 Web 开发中，JavaScript 默认无法直接访问服务器本地文件系统（出于安全限制），但可以轻松通过 HTTP 请求获取服务器已公开托管的静态资源——例如位于网站根目录或子路径下的 example.txt。关键在于：该文件必须可通过浏览器直接访问（即 URL 可达，如 https://yoursite.com/example.txt），且服务端未禁止跨域或 MIME 类型拦截。
✅ 推荐方案：使用 fetch()（现代、简洁、基于 Promise）
相比传统的 XMLHttpRequest，fetch() 更简洁、可读性更强，并天然支持 async/await：
<!-- index.html -->
<button id="loadBtn">加载文本内容</button>
<div id="text-container"></div>
<script>
document.getElementById('loadBtn').addEventListener('click', async () => {
try {
const response = await fetch('./example.txt');
if (!response.ok) {
throw new Error(`HTTP 错误！状态码: ${response.status}`);
}
const text = await response.text();
document.getElementById('text-container').textContent = text;
} catch (error) {
document.getElementById('text-container').innerHTML =
`<span style="color:red;">加载失败：${error.message}</span>`;
}
});
</script>⚠️ 注意事项与常见问题
- 路径必须正确：./example.txt 表示与当前 HTML 文件同级的相对路径；若文件在 /assets/example.txt，请相应修改 URL。
- CORS 限制：若前端部署在 https://a.com，而请求发送至 https://b.com/example.txt，需确保目标服务器响应头包含 Access-Control-Allow-Origin: *（或指定域名）。
- MIME 类型与编码：确保服务器返回正确的 Content-Type: text/plain; charset=utf-8，避免中文乱码；建议在 <head> 中声明 <meta charset="UTF-8">。
-
服务端需启用静态文件服务：本地直接双击 index.html 打开将因浏览器同源策略导致 fetch 失败（file:// 协议不支持跨文件请求）。务必通过本地开发服务器运行，例如：
npx serve # 或 python3 -m http.server 8000
? 向后兼容：XMLHttpRequest 写法（适用于需支持旧版浏览器场景）
如需兼容 IE10+，可采用原始答案中的 XMLHttpRequest 方式，但建议封装为函数并添加错误处理：
function loadTextFromFile(filePath = './example.txt') {
const xhr = new XMLHttpRequest();
xhr.open('GET', filePath, true);
xhr.onload = function() {
if (xhr.status === 200) {
document.getElementById('text-container').textContent = xhr.responseText;
} else {
document.getElementById('text-container').innerHTML =
`<span style="color:red;">加载失败：${xhr.status} ${xhr.statusText}</span>`;
}
};
xhr.onerror = () => {
document.getElementById('text-container').innerHTML =
'<span style="color:red;">网络请求失败，请检查文件路径与服务器状态</span>';
};
xhr.send();
}
// 调用示例：loadTextFromFile();总之，只要文本文件已部署在 Web 服务器可访问路径下，即可通过标准 HTTP 请求高效读取——无需后端 API、无需用户交互，真正实现“服务端预置 + 前端按需加载”的轻量交互模式。
立即学习“Java免费学习笔记（深入）”；
