如何使用 JavaScript 从服务器读取已存在的 TXT 文件并动态显示

本文介绍如何通过原生 javascript（无需用户手动选择文件）异步读取服务器上已部署的纯文本文件（如 `example.txt`），并在网页中点击按钮后将其内容加载并显示在指定 html 元素内。

在 Web 开发中，javaScript 默认无法直接访问服务器本地文件系统（出于安全限制），但可以轻松通过 http 请求获取服务器已公开托管的静态资源——例如位于网站根目录或子路径下的 example.txt。关键在于：该文件必须可通过浏览器直接访问（即 URL 可达，如 https://yoursite.com/example.txt），且服务端未禁止跨域或 MIME 类型拦截。

✅ 推荐方案：使用 fetch()（现代、简洁、基于 promise）

相比传统的 XMLHttpRequest，fetch() 更简洁、可读性更强，并天然支持 async/await：

加载文本内容 
  

⚠️ 注意事项与常见问题

• 路径必须正确：./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，避免中文乱码；建议在 中声明 。
• 服务端需启用静态文件服务：本地直接双击 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 =          `加载失败：${xhr.status} ${xhr.statusText}`;     }   };   xhr.onerror = () => {     document.getElementById('text-container').innerHTML =        '网络请求失败，请检查文件路径与服务器状态';   };   xhr.send(); } // 调用示例：loadTextFromFile();

总之，只要文本文件已部署在 Web 服务器可访问路径下，即可通过标准 HTTP 请求高效读取——无需后端 API、无需用户交互，真正实现“服务端预置 + 前端按需加载”的轻量交互模式。

立即学习“Java免费学习笔记（深入）”；