JavaScript 中怎么使用 Ajax 实现消息通知的未读红点异步刷新-js教程-PHP中文网

ajax实现未读红点异步刷新的核心是定时或事件触发请求后端接口获取未读数并更新dom，需保证轻量、及时、不阻塞ui且避免频繁请求；后端提供缓存友好、低延迟的/unread-count接口，前端用fetch封装请求并结合visibilitychange等事件智能拉取，再通过textcontent安全更新红点元素，超99显示“99+”，高实时场景可选sse替代轮询。

javascript 中怎么使用 ajax 实现消息通知的未读红点异步刷新

用 Ajax 实现未读红点的异步刷新，核心是定时或事件触发请求后端接口，获取未读数量，再动态更新 DOM 中的红点元素。关键在于轻量、及时、不阻塞 UI，同时避免频繁请求。

1. 后端提供简洁的未读数接口

后端需暴露一个返回未读消息数量的轻量接口，例如：/api/unread-count，响应格式建议为 JSON：

{"count": 3}

该接口应支持缓存控制（如 ETag 或短时效 Cache-Control），并尽量走内存或 Redis 查询，避免每次查数据库。

2. 前端用 fetch 或 XMLHttpRequest 请求

推荐使用 fetch，代码简洁且支持 Promise。注意处理网络异常和非 2xx 状态：

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

封装一个获取未读数的函数，统一处理错误和 loading 状态
只在用户可见时（如页面聚焦、Tab 激活）或间隔一定时间（如 30 秒）拉取，避免轮询过频
可结合 visibilitychange 事件，在用户切回页面时立即刷新一次

3. 动态更新红点 DOM 元素

假设红点容器 HTML 是：

<span class="notify-badge" id="msg-badge"></span>

JS 更新逻辑示例：

function updateBadge(count) {
  const badge = document.getElementById('msg-badge');
  if (!badge) return;
  
  if (count > 0) {
    badge.textContent = count > 99 ? '99+' : count;
    badge.style.display = 'inline-flex';
  } else {
    badge.style.display = 'none';
  }
}

注意：不要用 innerHTML 插入 HTML 字符串，避免 XSS；用 textContent 更安全；超过 99 显示 “99+” 是常见体验优化。