用javascript实现页面无刷新更新数据

实现页面无刷新更新数据的常见方法是使用 AJAX 技术，而在 JavaScript 中，可以使用 XMLHttpRequest 对象来实现 AJAX 请求。下面是实现页面无刷新更新数据的详细攻略：

1. 发送 AJAX 请求

使用 JavaScript 发送 AJAX 请求需要执行以下步骤：

1. 创建 XMLHttpRequest 对象
2. 使用 open() 方法打开一个 HTTP 请求
3. 使用 send() 方法发送请求

以下是示例代码：

// 创建 XMLHttpRequest 对象
const xhr = new XMLHttpRequest();

// 打开一个 HTTP 请求
xhr.open('GET', 'url');

// 发送请求
xhr.send();

2. 处理 AJAX 响应

在 AJAX 请求返回后，可以通过监听 XMLHttpRequest 对象的 readystatechange 或 load 事件来获取响应数据。

以下是示例代码：

xhr.addEventListener('load', function() {
  // 响应已完成
  if (xhr.status === 200) {
    // 响应成功
    console.log(xhr.responseText);
  } else {
    // 响应失败
    console.error('请求失败');
  }
});

xhr.addEventListener('error', function() {
  console.error('请求错误');
});

xhr.addEventListener('abort', function() {
  console.warn('请求已取消');
});

3. 实现局部刷新

在处理 AJAX 响应时，可以通过修改页面中特定元素的 innerHTML 属性来实现局部刷新，从而达到无刷新更新数据的效果。

以下是示例代码：

xhr.addEventListener('load', function() {
  if (xhr.status === 200) {
    const response = JSON.parse(xhr.responseText);
    const listEl = document.getElementById('list');
    listEl.innerHTML = renderList(response.data);
  } else {
    console.error('请求失败');
  }
});

function renderList(data) {
  return data.map(function(item) {
    return '<li>' + item.name + '</li>';
  }).join('');
}

该示例代码中，通过解析响应数据并使用 renderList() 函数渲染出新的列表的 HTML 代码，并将其赋值给名为 "list" 的元素的 innerHTML 属性，从而实现了局部刷新效果。

另外一个示例是使用 jQuery 中的 AJAX 方法实现页面无刷新更新数据，代码如下：

$.ajax({
  url: 'url',
  method: 'GET',
  dataType: 'json',
  success: function(response) {
    const listEl = $('#list');
    listEl.html(renderList(response.data));
  },
  error: function() {
    console.error('请求失败');
  }
});

function renderList(data) {
  return data.map(function(item) {
    return '<li>' + item.name + '</li>';
  }).join('');
}

该示例代码中，通过使用 jQuery 中的 AJAX 方法发送请求，成功响应后，使用名为 "$" 的全局函数获取元素并将其 innerHTML 赋值为新列表的 HTML 代码，从而实现了局部刷新效果。