ajax展示列表【ajax实时显示数据：示例代码】

1、使用Ajax可以实现网页实时展示数据的功能，其中最常见的应用就是实时展示列表数据。Ajax通过异步请求，可以在不刷新整个页面的情况下，从服务器获取最新的数据并将其展示在网页上。

2、下面是一个简单的示例代码，演示了如何使用Ajax实时展示列表数据。

HTML部分：

<div id="list-container">
  <ul id="list"></ul>
</div>

JavaScript部分：

function updateList() {
  // 创建一个XMLHttpRequest对象
  var xhr = new XMLHttpRequest();
  // 设置请求的方法和URL
  xhr.open('GET', 'http://example.com/api/list', true);
  // 设置请求完成后的回调函数
  xhr.onload = function() {
    // 检查请求的状态
    if (xhr.status === 200) {
      // 解析服务器返回的数据
      var data = JSON.parse(xhr.responseText);
      // 清空列表
      var listElement = document.getElementById('list');
      listElement.innerHTML = '';
      // 遍历数据，添加到列表中
      data.forEach(function(item) {
        var li = document.createElement('li');
        li.textContent = item;
        listElement.appendChild(li);
      });
    }
  };
  // 发送请求
  xhr.send();
}
// 每隔一段时间更新列表
setInterval(updateList, 5000);

在上述示例代码中，我们首先在HTML中定义了一个列表容器和一个空的列表。然后，在JavaScript中定义了一个`updateList`函数，该函数使用XMLHttpRequest对象发送一个GET请求到服务器的API接口，获取最新的列表数据。当请求完成后，我们解析服务器返回的数据，并将其逐个添加到列表中。我们使用`setInterval`函数每隔5秒钟调用一次`updateList`函数，以实现列表数据的实时展示。

通过上述示例代码，我们可以看到，使用Ajax可以方便地实现网页的实时展示列表数据的功能，提升了用户体验。