如何通过定时Ajax请求监测元素变化且无需刷新页面？

核心逻辑 #

你需要完成三个核心步骤：

1. 每15分钟发起一次Ajax请求，拉取目标元素的最新状态
2. 保存上一次的状态，和新获取的状态做对比
3. 当状态发生变化时，触发提醒（比如弹窗或浏览器通知）

修正代码并实现完整功能 #

你的现有代码存在几个小问题：

• jQuery里没有ClassName()这种写法，正确选择器是$('.类名')
• 请求数据用字符串拼接容易出错，建议用对象格式
• 缺少状态对比和历史状态保存的逻辑

下面是完整的可运行代码，每一步都加了注释：

// 保存上一次的元素状态，初始值取页面加载时的状态
let lastStatus = $('.activeClass').hasClass('Enabled') ? 'Enabled' : 'Disabled';

// 定义检查状态的函数
function checkElementStatus() {
  $.ajax({
    type: 'POST',
    // 用对象传参，避免字符串拼接的语法错误
    data: { gofor: "Enabled activeClass" },
    url: 'ajax.php',
    success: function(response) {
      // 把返回的HTML转换成jQuery对象，方便操作
      const newTdElement = $(response);
      // 获取当前最新的状态
      const currentStatus = newTdElement.hasClass('Enabled') ? 'Enabled' : 'Disabled';

      // 对比新旧状态，不一样就触发提醒
      if (currentStatus !== lastStatus) {
        // 弹窗提醒，也可以换成浏览器通知
        alert(`元素状态变了：从${lastStatus}改成${currentStatus}`);
        
        // 可选：用浏览器通知（需要用户先授权）
        // if (Notification.permission === 'granted') {
        //   new Notification('状态更新提醒', { body: `元素状态从${lastStatus}变为${currentStatus}` });
        // }

        // 更新历史状态，下次对比用
        lastStatus = currentStatus;
      }

      // 可选：把页面上的旧元素替换成最新的
      $('.activeClass').replaceWith(newTdElement);
    },
    error: function() {
      // 请求失败时的提示
      alert('请求出错了，稍后再试吧');
    }
  });
}

// 页面加载完成后先执行一次检查，再启动定时任务
$(document).ready(function() {
  checkElementStatus();
  // 15分钟 = 15*60*1000 毫秒，设置定时循环执行
  setInterval(checkElementStatus, 15 * 60 * 1000);
});

关键细节说明 #

• 状态对比：用hasClass()判断元素的类，直接对比Enabled/Disabled两个状态
• 定时任务：setInterval()是浏览器自带的定时函数，时间单位是毫秒，换算成15分钟即可
• 请求格式：用对象传参data: { gofor: "xxx" }更安全，jQuery会自动处理参数编码
• 页面同步：如果需要让页面上的元素和最新状态保持一致，用replaceWith()替换旧元素就行

可选：浏览器通知优化 #

如果想用更友好的浏览器通知，需要先请求用户授权：

$(document).ready(function() {
  // 先判断浏览器是否支持通知功能
  if (!("Notification" in window)) {
    alert("你的浏览器不支持通知功能");
  } else if (Notification.permission !== "denied") {
    // 请求用户授权通知
    Notification.requestPermission();
  }
});

授权后就可以用浏览器通知替代弹窗，体验更好。

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