如何向浏览器解释要记住 Ajax 请求？

Question

浏览器和我的应用程序的“返回”按钮有问题。 webapp 使用 ajax 和标准请求。这一切都是这样发生的：

1. 我向list.jsp 页面发出 GET 请求 - 如果您检查我在下面提供的临时链接，这是您在应用程序中看到的第一页。现在我们在第 1 页（整个页面已重新加载）

2. 我向页面 4 发出 Ajax 请求（单击链接 - 即页码）。只有页面的一部分被重新加载 - 一切正常。因此，现在我们在第 4 页

3. 我向页面 5 发出 Ajax 请求（单击链接 - 即页码）。只有页面的一部分被重新加载 - 一切正常。因此，现在我们在第 5 页

4. 现在我按下浏览器的“返回”按钮（回到历史记录一步） - 什么都没有发生。浏览器控制台未显示任何更改。

5. 这一步我再次按下浏览器的“返回”按钮。事实证明，这一步执行正确。 GET 请求发生了。

发生了什么事？为什么浏览器不记得第 3 步发生的更改？如何指示浏览器对 ajax 请求所做的更改进行step back to history？

您可以通过temp link在线查看。试着浏览这些页面。粉色方块是当前页面指示符。

---

更新 1：

此代码在加载程序完成加载资源后初始化。

$(function() {

    $(window).on('hashchange', refreshByHash);

    refreshByHash();

    function refreshByHash() {              
        var hash = window.location.hash; 
        console.log("hash = " + hash.substring(1));

        /* $.ajax({

               url : 'paginator.action?page=' + hash, // action
               type : 'GET', //type of posting the data
                dataType : 'html',
                async: true,
                success : function(htmlData) {
                    $('#paginator').html(htmlData);
                },
                error : function(xhr, ajaxOptions, thrownError) {
                    alert('An error occurred! ' + thrownError);
                },

            }); */

       }

 });

Answer 1

当用户点击#idPage（顺便说一句，使用类，现在你有多个具有相同ID和that's not good的元素）时，因为href属性为空，浏览器将加载#（并且会去到页面顶部）。

您应该防止用户点击链接时的默认行为，例如

$('body').on('click', '#idPage', function(e) {
   // some code goes here
   e.preventDefault();
});

标签 (#) 对后退/前进按钮有影响。如果您附加主题标签并单击“返回”，浏览器会将您返回到应用主题标签之前的状态。

Answer 2

我建议您在 url 中放置一个 hash 参数，这样浏览器将正确处理历史记录并监听 hashchange 事件。在大多数情况下，您可以将页面状态直接存储在那里，因此您不必实现自己的历史处理。我整理了一些 MCVE：

$(function() {

  // setup some pagination bar
  for (var i = 1; i < 11; i++) {
    $('#pages').append(
        $('<a/>').text(i).attr('href','#'+i)
    );
    $('#pages').append($('<span/>').text('.'));
  }

  // load contents of page i
  function _uiPage(i) {
      // imitate some XHR
      setTimeout(function() {
          $('#page-content').text('This is page ' + i);
      }, 200);
  }
  
  // load contents of current page based on hash
  function refreshByHash() {
      var hash = window.location.hash;
      _uiPage(hash ? +hash.substring(1) : 1);
  }
  
  // refresh on hash change
  $(window).on('hashchange', refreshByHash);
  // initial state on page load
  refreshByHash();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="pages"></div>
<div id="page-content"></div>

注意：Chrome 的后退按钮会在活动的 iframe 中返回，所以点击部分页面后，可以按后退按钮来测试行为，外框、StackOverflow 本身不会改变。

也看看问题：How to manage browser “back” and “forward” buttons when creating a javascript widget

---

编辑1

$(function() {
  $(window).on('hashchange', refreshByHash);
  refreshByHash();

  function refreshByHash() {              
    var hash = window.location.hash; 
    // ----- strip the hashmark here -----
    hash = hash ? hash.substring(1) : '';
    console.log("hash = " + hash);

    $.ajax({
      url : 'paginator.action?page=' + hash, // action
      type : 'GET', //type of posting the data
      dataType : 'html',
      async: true,
      success : function(htmlData) {
        $('#paginator').html(htmlData);
      },
      error : function(xhr, ajaxOptions, thrownError) {
        alert('An error occurred! ' + thrownError);
      },
    });
  }
});