本文介绍如何通过原生 javascript（使用 xmlhttprequest）在网页中点击按钮后异步加载并显示服务器上已存在的纯文本文件（如 ./example.txt），无需用户手动选择文件。
在 Web 开发中，若需读取服务器上预先部署的静态文本文件（例如 ./example.txt），不能使用 的客户端文件读取 API（如 FileReader），因为它仅处理用户本地选择的文件。正确方式是通过 HTTP 请求向服务器发起 GET 请求，获取该文件内容——这本质上是一个跨源受限但同域安全的资源拉取操作。
✅ 推荐方案：使用 XMLHttpRequest（兼容性好）
以下是一个完整、可直接运行的示例：
AOXO_CMS建站系统企业通用版1.0
下载
一个功能强大、性能卓越的企业建站系统。使用静态网页技术大大减轻了服务器负担、加快网页的显示速度、提高搜索引擎推广效果。本系统的特点自定义模块多样化、速度快、占用服务器资源小、扩展性强，能方便快捷地建立您的企业展示平台。简便高效的管理操作从用户使用的角度考虑，对功能的操作方便性进行了设计改造。使用户管理的工作量减小。网站互动数据可导出Word文档，邮件同步发送功能可将互动信息推送到指定邮箱，加快企业
? 关键说明：./example.txt 必须真实存在于 Web 服务器的对应路径下（如 Nginx/Apache 的根目录或项目 public 文件夹中）；浏览器会自动处理 MIME 类型，.txt 文件通常返回 text/plain，xhr.responseText 可直接使用；使用 textContent（而非 innerHTML）更安全，可避免 XSS 风险；若确需渲染 HTML 内容，请确保服务端已做严格转义。
✅ 现代替代方案：使用 fetch()（推荐用于新项目）
async function loadText() {
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 (err) {
document.getElementById("text-container").textContent = `错误：${err.message}`;
}
}⚠️ 注意事项
- CORS 限制：若文件位于不同域名/端口的服务器，需服务端配置 Access-Control-Allow-Origin 响应头；
- 路径问题：确保 ./example.txt 路径正确，建议用浏览器开发者工具的 Network 标签页验证请求是否 200 OK；
- MIME 类型与编码：默认按 UTF-8 解析；若文件含中文乱码，请确认服务器返回头包含 Content-Type: text/plain; charset=utf-8；
- 安全性：切勿将敏感信息（如密钥、配置）以明文 .txt 形式暴露在 Web 可访问路径下。
掌握此方法后，你即可轻松实现“服务端预置文本 → 前端按需加载 → 动态展示”的交互流程，适用于日志预览、帮助文档、版本说明等常见场景。
