ajax滚动加载页面demo—示例代码

滚动加载是一种常见的网页优化技术，它可以实现在用户滚动页面时动态加载更多内容，从而提升用户体验。使用Ajax技术可以很方便地实现滚动加载功能。

我们需要监听用户滚动事件。当用户滚动到页面底部时，我们就触发加载更多内容的操作。可以通过绑定滚动事件来实现这一功能。

示例代码如下所示：

// 监听滚动事件
window.addEventListener('scroll', function() {
  // 获取页面滚动距离
  var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  // 获取页面可视区域高度
  var clientHeight = document.documentElement.clientHeight;
  // 获取页面总高度
  var scrollHeight = document.documentElement.scrollHeight;
  // 判断是否滚动到页面底部
  if (scrollTop + clientHeight >= scrollHeight) {
    // 发送Ajax请求加载更多内容
    var xhr = new XMLHttpRequest();
    xhr.open('GET', '/api/loadmore', true);
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        // 处理返回的数据
        var data = JSON.parse(xhr.responseText);
        // 将加载到的内容插入到页面中
        var content = document.getElementById('content');
        for (var i = 0; i < data.length; i++) {
          var item = document.createElement('div');
          item.innerText = data[i];
          content.appendChild(item);
        }
      }
    };
    xhr.send();
  }
});

在上面的示例代码中，我们首先通过`window.addEventListener`方法来监听滚动事件。在滚动事件的回调函数中，我们获取页面的滚动距离、可视区域高度和总高度，然后判断是否滚动到页面底部。如果是，则发送Ajax请求去加载更多内容。

在Ajax请求的回调函数中，我们处理返回的数据，并将加载到的内容插入到页面中。在这个示例中，我们假设服务器返回的数据是一个包含多个字符串的数组，然后通过循环创建`div`元素，并将每个字符串内容赋值给`div`的`innerText`属性，最后将`div`插入到页面中的`content`元素中。

通过以上的示例代码，我们可以实现一个简单的滚动加载页面的功能。当用户滚动到页面底部时，会自动加载更多内容，从而提升用户体验。