JS实现页面数据无限加载

关于“JS实现页面数据无限加载”的攻略，我可以提供如下的详细讲解：

1. 实现原理

在页面滚动到底部的时候，通过监听滚动事件，判断当前滚动的位置是否达到了页面底部，在满足条件的情况下，通过AJAX技术异步向后端请求数据，再将数据呈现在页面上，实现数据的无限加载。

2. 实现步骤

2.1 监听页面滚动事件

首先，需要监听页面的滚动事件，可以通过以下代码实现：

window.onscroll = function() {
  // 判断是否达到了页面底部
  if ((document.documentElement.scrollTop + document.documentElement.clientHeight) ==
    document.documentElement.scrollHeight) {
    // 实现AJAX请求数据的功能
    // ...
  }
}

其中，document.documentElement.scrollTop表示滚动条滚动的距离，document.documentElement.clientHeight表示窗口可视区域的高度，document.documentElement.scrollHeight表示页面的总高度。

2.2 实现数据请求功能

在达到页面底部的时候，需要向后端请求数据，可以通过AJAX技术实现异步请求数据，代码如下：

let page = 1; // 记录当前的页码
let isLoading = false; // 判断是否正在加载数据

function loadData() {
  if (isLoading) {
    // 如果正在加载数据，则直接退出
    return;
  }

  isLoading = true;
  // 发送AJAX请求
  let xhr = new XMLHttpRequest();
  xhr.open('GET', '/api/getList?page=' + page, true);
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
      let responseData = JSON.parse(xhr.responseText);
      if (responseData.length > 0) {
        // 如果有数据返回，则先添加到页面上
        addDataToPage(responseData);
        // 加载完成后增加页码
        page++;
      } else {
        // 如果没有数据了，则移除滚动事件
        window.removeEventListener('scroll', onScrollHandler);
      }
      isLoading = false;
    }
  };
  xhr.send();
}

其中，loadData函数实现了向后端请求数据的功能，addDataToPage函数实现了将返回的数据渲染到页面上的功能。需要注意的是，在每次请求数据之前需要通过判断isLoading变量来实现防抖功能，避免在数据加载未完成的情况下重复请求数据。

2.3 实现添加数据到页面的功能

在获取到后端返回的数据之后，需要将数据添加到页面上，可以通过以下代码实现：

function addDataToPage(data) {
  let container = document.querySelector('.data-container');
  for (let i = 0; i < data.length; i++) {
    let item = document.createElement('div');
    item.classList.add('data-item');
    item.innerHTML = data[i];
    container.appendChild(item);
  }
}

其中，data-container表示存放数据的容器元素，data-item表示每一个数据项的样式。

2.4 移除滚动事件

当后端返回的数据为空时，说明已经到达了数据的末尾，需要将滚动事件移除，可以通过以下代码实现：

if (responseData.length > 0) {
  // 如果有数据返回，则先添加到页面上
  addDataToPage(responseData);
  // 加载完成后增加页码
  page++;
} else {
  // 如果没有数据了，则移除滚动事件
  window.removeEventListener('scroll', onScrollHandler);
}

3. 示例说明

以下是两个示例说明，分别是基于jQuery和原生JS实现的页面数据无限加载。

3.1 基于jQuery实现的页面数据无限加载

$(window).scroll(function () {
    if ($(document).scrollTop() + $(window).height() >= $(document).height()) {
        $.ajax({
            type: "GET",
            url: "/api/getList",
            data: {
                page: currentPage
            },
            success: function (data) {
                if (data.length > 0) {
                    addDataToPage(data);
                    currentPage++;
                } else {
                    $(window).unbind('scroll');
                }
            }
        });
    }
});

function addDataToPage(data) {
    for (let i = 0; i < data.length; i++) {
        let item = $("<div class='data-item'></div>");
        item.html(data[i]);
        $(".data-container").append(item);
    }
}

该示例通过$(window).scroll监听滚动事件，$(document).scrollTop()获取滚动条滚动的距离，$(window).height()获取窗口可视区域的高度，$(document).height()获取页面的总高度。当滚动条到达页面底部时，向后端发送请求获取数据，并通过addDataToPage函数将数据添加到页面上。

3.2 基于原生JS实现的页面数据无限加载

window.onscroll = function() {
    if ((document.documentElement.scrollTop + document.documentElement.clientHeight) ==
        document.documentElement.scrollHeight) {
        loadData();
    }
}

function loadData() {
    if (isLoading) {
        return;
    }
    isLoading = true;

    let xhr = new XMLHttpRequest();
    xhr.open("GET", "/api/getList?page=" + currentPage, true);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            let data = JSON.parse(xhr.responseText);
            if (data.length > 0) {
                addDataToPage(data);
                currentPage++;
            } else {
                window.removeEventListener('scroll', onScrollHandler);
            }
            isLoading = false;
        }
    };
    xhr.send();
}

function addDataToPage(data) {
    let container = document.querySelector('.data-container');

    for (let i = 0; i < data.length; i++) {
        let item = document.createElement('div');
        item.classList.add('data-item');
        item.innerHTML = data[i];
        container.appendChild(item);
    }
}

该示例的实现过程和前面提到的“实现步骤”是相似的，其中关键的代码部分已经在前面的讲解中提到。不同之处在于它是基于原生JS实现的，不依赖库和框架，更灵活，适合轻量级的场景。