history保存列表页ajax请求的状态使用示例详解

简介

本文介绍如何使用HTML5中的history API，在列表页的AJAX请求中保存历史记录和页面状态，以及如何在回退时正确恢复页面状态。

前置条件

已经掌握AJAX调用后端接口，可成功加载并展示列表数据。
已经掌握HTML5的history API基础用法。

保存历史记录和页面状态

在列表页中，我们通常会实现一些复杂的筛选或搜索功能。这些操作往往会触发AJAX请求，并且会改变列表页面的内容和状态。而且这些操作并不是每个用户都需要完成的。所以为了提供更好的用户体验，我们需要做到以下两点：

当用户执行筛选或搜索操作后，可以通过浏览器的“后退”按钮回到上一个页面状态。
当用户直接通过链接进入列表页时，可以根据URL的参数自动恢复页面状态。

我们使用history来实现上面两点。

function loadListAjax() {
  // 调用后端接口，加载列表数据
  // ...

  // 记录当前页面状态的相关数据
  const state = {
    page: 1,   // 当前页码
    keyword: '',   // 搜索关键词
    sort: 'asc',   // 排序方式，升序/降序
  };

  // 使用history.pushState将当前页面状态压入历史记录
  const url = '/list?' + $.param(state);   // 使用jQuery.param将object转为query string
  history.pushState(state, null, url);
}

当用户执行了列表筛选或搜索操作时，我们可以先获取当前的页面状态，然后使用history.pushState保存到历史记录中。这里需要注意，history API只会保存state对象中的数据，而不会保存页面状态的HTML内容。所以我们需要将页面状态的相关数据转换为一个JavaScript对象，然后通过history.pushState将其保存到历史记录中。

恢复页面状态

我们已经将页面状态保存到了history的state对象中，接下来就是如何在页面回退时正确地恢复页面状态了。

$(window).on('popstate', function(e) {
  if (e.state) {
    // 根据state对象中的数据，来重新加载列表数据
    const state = e.state;
    loadListAjax(state.page, state.keyword, state.sort);
  } else {
    // 恢复默认状态
    loadListAjax(1, '', 'asc');
  }
});

当用户回退到上一个页面状态时，会触发window对象的popstate事件。我们可以通过监听该事件，在事件回调中获取到当前的state对象。

如果state不为null，则说明当前浏览器历史记录中有我们保存的页面状态。此时，我们需要根据state对象中保存的数据，来重新调用列表数据加载函数，然后重新展示列表数据。

如果state为null，则说明当前回到了页面的最开始状态。我们需要调用默认的列表数据加载函数，来重新加载并展示第一页数据。

示例说明

我们已经实现了保存历史记录和页面状态，以及在回退时恢复页面状态这两个核心功能。接下来我们通过两个示例，来具体说明如何在实际项目中使用。

示例一：多条件筛选列表

在使用场景中，我们可能有多个选项，如分类选项、日期选择、状态筛选等，用户可根据这些选项来进行检索。同时，每个选项又可以进行多选或输入，非常灵活。

在这种情况下，使用history API可以非常优雅地解决这个问题。每次检索都是一个新的页面状态，我们可以将之压入浏览器历史栈中，而且回退时完美恢复搜索条件，让用户无感知体验以往搜索历程。

function loadListAjax(opts) {
  // 调用后端接口，加载列表数据
  // ...

  // 记录当前页面状态的相关数据
  const state = {
    page: opts.page || 1,   // 当前页码
    categoryIds: opts.categoryIds,   // 分类Ids
    status: opts.status,   // 状态
    startDate: opts.startDate,   // 开始时间
    endDate: opts.endDate,   // 结束时间
  };

  // 使用history.pushState将当前页面状态压入历史记录
  const url = '/list?' + $.param(state);   // 使用jQuery.param将object转为query string
  history.pushState(state, null, url);
}

示例二：表格分页

在常规的表格分页中，我们实现上下页，以及跳转到指定页的功能时，使用history API可以非常优雅地进行历史记录保存和回退恢复。

// 改变页面url及页面状态
function changeTablePage(pageNum) {
  // 调用后端接口，加载列表数据
  // ...

  // 记录当前页面状态的相关数据
  const state = {
    page: pageNum || 1,   // 当前页码
    pageSize: 20,   // 分页大小
  };

  // 使用history.pushState将当前页面状态压入历史记录
  const url = '/table-list?' + $.param(state);   // 使用jQuery.param将object转为query string
  history.pushState(state, null, url);
}

// 此处初始化时，从URL中解析出数据并改变页面
$(document).ready(function() {
  const urlParams = new URLSearchParams(window.location.search);
  const page = urlParams.get('page');

  changeTablePage(page);
});

// 监听浏览器前进后退事件
$(window).on('popstate', function(e) {
  if (e.state) {
    // 根据state对象中的数据，来重新加载列表数据
    const state = e.state;
    changeTablePage(state.page);
  } else {
    // 恢复默认状态
    changeTablePage(1);
  }
});