如何向浏览器解释以记住Ajax请求? [英] How to explain to the browser to remember the Ajax request?

问题描述

浏览器和我的应用程序的后退"按钮有问题. 该webapp使用ajax和standart请求.一切都是这样发生的:

There is a problem with the "back" button of the browser and my application. The webapp uses ajax and standart requests. That all happens this way:

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

1. I make GET request to list.jsp page - it's the first page you see in application if you check the temp link I provided below. Now we are on Page 1 (the whole page was reloaded)

我向页面4发出Ajax请求(单击链接-即页面编号).仅页面的parth被重新加载-一切正常.因此，现在我们在第4页上

I make Ajax request (click on link - i.e. page number) to page 4. Only the parth of page was reloaded - everything is OK. Thus now we are on page 4

我向页面5发出Ajax请求(单击链接-即页面编号).仅页面的parth被重新加载-一切正常.因此，现在我们在第5页上

I make Ajax request (click on link - i.e. page number) to page 5. Only the parth of page was reloaded - everything is OK. Thus now we are on page 5

现在，我按下浏览器的后退"按钮(退回到历史记录)-什么都没发生.浏览器控制台未显示任何更改.

Now I press the browser "back" button (one step back to history) - nothing happened. The browser consoles does not show any changes.

这一步，我再次按浏览器的后退"按钮.事实证明，此步骤已正确执行. GET请求发生了.

This step I press the browser "back" button again. It turns out that this step executed correctly. GET request happened.

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

What is going on? Why does the browser not remember changes that hapaned on step 3 ? How can I instruct the browser to make step back to history to the changes that was made by ajax request?

您可以通过临时链接进行在线检查.只需尝试浏览页面即可.粉色正方形是当前页面指示符.

You can check it online by temp link. Just try to go throuh the pages. The pink square is current page indicator.

更新1:

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

This code initialized after loader finished loading recources.

$(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);
                },

            }); */

       }

 });

推荐答案

我建议您在网址中放入一个哈希参数，这样浏览器就可以正确处理历史记录，并监听hashchange事件.在大多数情况下，您可以直接在此处存储页面状态，因此您不必实现自己的历史记录处理.我整理了一些MCVE:

I would suggest you to put a hash parameter in the url, that way the browser would handle the history properly, and listen to hashchange events. In most cases you can store the page state directly there, so you don't have to implement your own history handling. I've put together a little 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本身不会改变.

Note: Chrome's back button will go back in the active iframe, so after you clicked on some of the pages, you can press the back button to test the behaviour, and the outer frame, StackOverflow itself will not change.

也请看以下问题:

Edit1

$(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);
      },
    });
  }
});

这篇关于如何向浏览器解释以记住Ajax请求?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！