XMLHttpRequest请求text1.txt却返回当前页面HTML问题求助

这种情况核心原因是请求的text1.txt文件未被服务器找到，服务器返回了当前页面的HTML内容（通常是404错误的 fallback 页面），再加上代码没有判断请求是否成功，直接把响应内容赋值给了div，就出现了显示当前页面HTML的问题。

具体原因拆解 #

• 路径错误：text1.txt的相对路径不正确，比如文件实际不在当前HTML文件的同级目录，或者文件名拼写错误（比如大小写不一致，服务器区分大小写的话会找不到）
• 未校验请求状态：代码里只监听了onload事件，但这个事件在请求完成（不管成功还是失败）都会触发。当请求返回404时，服务器返回的响应内容就是当前页面的HTML，被直接赋值给了目标div。

解决步骤 #

1. 确认文件路径与名称

   • 确保text1.txt和当前HTML文件在同一目录下
   • 可以显式使用相对路径./text1.txt来明确指向当前目录的文件，避免路径解析问题
   • 检查文件名大小写（比如服务器是Linux系统的话，Text1.txt和text1.txt是不同的文件）

2. 增加请求状态校验
   修改onload函数，先判断HTTP状态码是否在成功范围内（200-299），再处理响应内容：

   function loadDoc() {
     const xhttp = new XMLHttpRequest();
     xhttp.onload = function() {
       // 校验请求是否成功
       if (this.status >= 200 && this.status < 300) {
         document.getElementById("ajaxLanding").innerText = this.responseText;
       } else {
         console.log(`请求失败，状态码：${this.status}`);
         document.getElementById("ajaxLanding").innerText = "加载失败，请检查文件路径";
       }
     }
     // 监听网络错误
     xhttp.onerror = function() {
       console.log("网络连接错误");
       document.getElementById("ajaxLanding").innerText = "网络错误，请检查连接";
     }
     xhttp.open("GET", "./text1.txt");
     xhttp.send();
   }
   

3. 调试确认请求状态
   打开浏览器开发者工具（F12），切换到Network标签，点击按钮发起请求，查看text1.txt请求的状态码：

   • 如果是404：说明文件路径或名称有误
   • 如果是200：再查看响应内容是否正确，排除服务器配置问题

内容的提问来源于stack exchange，提问作者DennisM