移动端 ajax 滚动加载(ajax前端动态加载：示例代码)

移动端的滚动加载是一种通过Ajax技术实现的前端动态加载数据的方式。当用户滚动到页面底部时，会自动触发请求新的数据并展示在页面上，从而实现无限滚动的效果。这种方式可以提升用户体验，避免一次性加载大量数据导致页面卡顿。

下面是一个示例代码，用于演示移动端的滚动加载：

// 定义一个变量，用于记录当前页数
var page = 1;
// 监听滚动事件
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/data?page=' + page);
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        // 解析返回的数据
        var data = JSON.parse(xhr.responseText);
        // 渲染数据到页面上
        renderData(data);
        // 更新当前页数
        page++;
      }
    };
    xhr.send();
  }
});
// 渲染数据到页面上的函数
function renderData(data) {
  var list = document.getElementById('list');
  // 遍历数据，生成对应的DOM元素
  for (var i = 0; i < data.length; i++) {
    var item = document.createElement('div');
    item.innerText = data[i].title;
    list.appendChild(item);
  }
}

以上代码中，首先我们定义了一个变量`page`，用于记录当前页数。然后，我们监听了`scroll`事件，当用户滚动页面时，会触发该事件。在事件处理函数中，我们通过获取页面滚动的高度、可视区域的高度和页面的总高度来判断是否滚动到底部。如果滚动到底部，则发送Ajax请求，获取新的数据。在Ajax请求的回调函数中，我们解析返回的数据，并调用`renderData`函数将数据渲染到页面上。更新当前页数，以便下一次滚动加载时请求下一页的数据。

以上就是移动端Ajax滚动加载的示例代码和解释。通过这种方式，我们可以实现在移动端动态加载数据，提升用户体验。