Ajax加载文本文件异常：添加第二段时重复显示同一内容求助

看起来你是因为复用了同一个请求实例或者变量，导致第二个请求覆盖了第一个的结果对吧？我给你几个具体的调整方案：

1. 为每个段落创建独立的处理函数 #

别把两个文件的读取逻辑硬塞在同一个函数里，最好封装成通用函数，让每个文件对应唯一的DOM元素，彻底避免互相干扰：

// 封装通用的文件加载&实时更新函数
function loadAndWatchFile(filePath, elementSelector) {
  // 定义请求逻辑
  function fetchLatestContent() {
    const xhr = new XMLHttpRequest();
    // 加时间戳避免浏览器缓存旧内容
    xhr.open('GET', `${filePath}?t=${new Date().getTime()}`, true);
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        document.querySelector(elementSelector).textContent = xhr.responseText;
      }
    };
    xhr.send();
  }

  // 首次加载内容
  fetchLatestContent();
  // 定时拉取更新（间隔可按需调整）
  setInterval(fetchLatestContent, 1000);
}

// 分别调用，对应不同的文件和DOM元素
loadAndWatchFile('PruebasGeneral/MBVR000008.txt', '#demo');
loadAndWatchFile('PruebasGeneral/MBVR000009.txt', '#demo2');

2. 检查DOM选择器是否正确 #

确保HTML里两个段落的标识是唯一的，比如：

<p id="demo"></p>
<p id="demo2"></p>

如果之前用了相同的类名或者模糊选择器，会导致内容被重复设置到所有匹配的元素上，这也是常见的坑。

3. 避免变量作用域冲突 #

如果之前是在同一个函数里复用了xhr变量，比如：

// 错误示例：同一个xhr被复用，第二个请求会覆盖第一个的回调逻辑
let xhr = new XMLHttpRequest();
xhr.open('GET', 'PruebasGeneral/MBVR000008.txt', true);
xhr.onreadystatechange = function() {
  document.querySelector('#demo').textContent = xhr.responseText;
};
xhr.send();

// 这里如果没有重新创建新的xhr实例，直接复用的话就会出问题！
xhr.open('GET', 'PruebasGeneral/MBVR000009.txt', true);
xhr.onreadystatechange = function() {
  document.querySelector('#demo2').textContent = xhr.responseText;
};
xhr.send();

这种情况下要确保每个请求都创建独立的XMLHttpRequest实例，别偷懒复用同一个变量。

你可以对照自己的现有代码，对应调整这几点，应该就能解决两个段落内容重复的问题了！

内容的提问来源于stack exchange，提问作者Freddy Alex Saavedra