js实现分页并请求ajax

在前端开发中，分页是一种常见的需求，它可以帮助用户更好地浏览大量数据。结合AJAX（Asynchronous JavaScript and XML），我们可以实现无需刷新页面即可加载不同页码的数据。以下是实现分页并请求AJAX的基础概念、优势、类型、应用场景以及具体的实现方法。

基础概念

分页：将大量数据分成多个页面显示，每页显示固定数量的数据。
AJAX：一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

优势

用户体验：用户无需等待整个页面刷新，交互更加流畅。
性能优化：只加载当前页的数据，减少了不必要的数据传输和处理。
资源节约：减轻服务器负担，特别是在处理大数据集时。

类型

客户端分页：所有数据一次性加载到客户端，然后在前端进行分页处理。
服务器端分页：每次只请求当前页的数据，由服务器进行分页处理。

应用场景

电商网站的商品列表
论坛的帖子列表
新闻网站的文章列表

实现方法

以下是一个简单的JavaScript示例，展示如何使用AJAX实现服务器端分页：

HTML结构

<div id="content"></div>
<button onclick="prevPage()">Previous</button>
<button onclick="nextPage()">Next</button>

JavaScript代码

let currentPage = 1;
const pageSize = 10;

function fetchData(page) {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', `/api/data?page=${page}&size=${pageSize}`, true);
    xhr.onload = function () {
        if (xhr.status === 200) {
            document.getElementById('content').innerHTML = xhr.responseText;
        } else {
            console.error('Error fetching data:', xhr.statusText);
        }
    };
    xhr.onerror = function () {
        console.error('Network error');
    };
    xhr.send();
}

function nextPage() {
    currentPage++;
    fetchData(currentPage);
}

function prevPage() {
    if (currentPage > 1) {
        currentPage--;
        fetchData(currentPage);
    }
}

// 初始加载第一页数据
fetchData(currentPage);

后端API示例（Node.js）

app.get('/api/data', (req, res) => {
    const page = parseInt(req.query.page) || 1;
    const size = parseInt(req.query.size) || 10;
    const startIndex = (page - 1) * size;
    const endIndex = startIndex + size;

    // 假设data是你的数据源
    const paginatedData = data.slice(startIndex, endIndex);
    res.json(paginatedData);
});