当前位置：首页 > JavaScript

js实现局部刷新

2026-01-30 19:16:36JavaScript

使用AJAX实现局部刷新

通过XMLHttpRequest对象或Fetch API异步请求数据，动态更新DOM元素内容。以下是两种常见方法：

XMLHttpRequest方式：

const xhr = new XMLHttpRequest();
xhr.open('GET', 'data-endpoint', true);
xhr.onload = function() {
  if (xhr.status === 200) {
    document.getElementById('target-element').innerHTML = xhr.responseText;
  }
};
xhr.send();

Fetch API方式（现代推荐）：

fetch('data-endpoint')
  .then(response => response.text())
  .then(data => {
    document.getElementById('target-element').innerHTML = data;
  });

使用jQuery的load方法

jQuery简化了局部刷新操作，适合快速实现：

$('#target-element').load('data-endpoint #specific-content');

使用Vue/React等框架

现代前端框架内置数据绑定机制，通过状态管理实现自动局部更新：

Vue示例：

new Vue({
  el: '#app',
  data: { content: '' },
  mounted() {
    fetch('data-endpoint')
      .then(res => res.json())
      .then(data => this.content = data);
  }
});

React示例：

function Component() {
  const [data, setData] = useState('');
  useEffect(() => {
    fetch('data-endpoint')
      .then(res => res.json())
      .then(data => setData(data));
  }, []);
  return <div>{data}</div>;
}

使用WebSocket实时更新

对于需要实时刷新的场景：

const socket = new WebSocket('ws://server-endpoint');
socket.onmessage = function(event) {
  document.getElementById('target-element').innerHTML = event.data;
};