本文介绍如何通过原生 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 方式，但建议封装为函数并添加错误处理：
