原生ajax写的上拉加载实例

以下是使用原生AJAX实现上拉加载的攻略。

1. 前置知识

在学习实现上拉加载之前，需要先掌握以下相关知识点：

• AJAX基本原理
• XMLHTTPRequest对象
• DOM操作

如果对以上知识点不熟悉，建议先进行学习。

2. 实现思路

实现上拉加载的基本思路如下：

1. 监听滚动事件，当页面滚动到底部时触发回调函数。
2. 在回调函数中发送请求，获取相应的数据。
3. 将数据渲染至页面。

3. 实现代码

下面给出一个简单的示例代码：

function ajaxLoadData() {
  const xhr = new XMLHttpRequest();
  const page = parseInt(document.getElementById('page').value) + 1;
  const url = `/data?page=${page}`;

  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        const data = JSON.parse(xhr.responseText);

        // 渲染数据
        renderData(data);

        // 更新页码
        document.getElementById('page').value = page;
      } else {
        console.error('请求数据失败！');
      }
    }
  };

  xhr.open('GET', url, true);
  xhr.send(null);
}

function renderData(data) {
  const list = document.getElementById('list');
  data.forEach(function(item) {
    const li = document.createElement('li');
    li.innerHTML = item.text;
    list.appendChild(li);
  });
}

window.addEventListener('scroll', function() {
  const scrollHeight = document.documentElement.scrollHeight;
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  const clientHeight = document.documentElement.clientHeight;

  if (scrollTop + clientHeight >= scrollHeight && !loading) {
    loading = true;
    ajaxLoadData();
  }
});

上述代码中，我们监听到滚动事件后，会调用ajaxLoadData函数，该函数会获取数据并渲染至页面，实现了上拉加载的效果。

4. 示例说明

下面给出两个以上提到过的示例说明，以帮助理解实现思路。

示例1

假设我们有一个简单的页面，其中有一个列表，需要进行上拉加载，获取更多的列表数据。页面元素如下：

<ul id="list"></ul>
<input type="hidden" id="page" value="1" />

我们需要监听页面的滚动事件，在回调函数中进行数据请求和渲染：

function ajaxLoadData() {
  const xhr = new XMLHttpRequest();
  const page = parseInt(document.getElementById('page').value) + 1;
  const url = `/data?page=${page}`;

  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        const data = JSON.parse(xhr.responseText);

        // 渲染数据
        renderData(data);

        // 更新页码
        document.getElementById('page').value = page;
      } else {
        console.error('请求数据失败！');
      }
    }
  };

  xhr.open('GET', url, true);
  xhr.send(null);
}

function renderData(data) {
  const list = document.getElementById('list');
  data.forEach(function(item) {
    const li = document.createElement('li');
    li.innerHTML = item.text;
    list.appendChild(li);
  });
}

window.addEventListener('scroll', function() {
  const scrollHeight = document.documentElement.scrollHeight;
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  const clientHeight = document.documentElement.clientHeight;

  if (scrollTop + clientHeight >= scrollHeight && !loading) {
    loading = true;
    ajaxLoadData();
  }
});

示例2

另外一个示例中，我们需要实现一个带有分类过滤器的上拉加载，具体实现思路如下：

1. 监听分类过滤器的点击事件，点击后将当前分类保存到一个全局变量中。
2. 监听页面滚动事件，当页面滚动到底部时触发回调函数。
3. 在回调函数中发送请求，包括当前分类和页码等参数，并获取相应的数据。
4. 将数据渲染至页面。

总的来说，实现思路和之前的示例类似，但是需要在数据请求时加上分类的限制条件。

let category = '';
let page = 1;

function ajaxLoadData(category, page) {
  const xhr = new XMLHttpRequest();
  const url = `/data?category=${category}&page=${page}`;

  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      if (xhr.status === 200) {
        const data = JSON.parse(xhr.responseText);

        // 渲染数据
        renderData(data);

        // 更新页码
        page += 1;
      } else {
        console.error('请求数据失败！');
      }
    }
  };

  xhr.open('GET', url, true);
  xhr.send(null);
}

function renderData(data) {
  const list = document.getElementById('list');
  data.forEach(function(item) {
    const li = document.createElement('li');
    li.innerHTML = item.text;
    list.appendChild(li);
  });
}

document.querySelectorAll('.category').forEach(function(item) {
  item.addEventListener('click', function() {
    category = this.dataset.category;
  });
});

window.addEventListener('scroll', function() {
  const scrollHeight = document.documentElement.scrollHeight;
  const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
  const clientHeight = document.documentElement.clientHeight;

  if (scrollTop + clientHeight >= scrollHeight && !loading) {
    loading = true;
    ajaxLoadData(category, page);
  }
});

上述代码中，我们通过监听分类过滤器的点击事件，获取当前选中的分类;并在ajaxLoadData函数中加上该分类的限制条件，使数据请求和渲染符合分类筛选的要求。