Как объяснить браузеру запомнить запрос Ajax?

Question

Существует проблема с кнопкой «Назад» браузера и моего приложения. Webapp использует ajax и стандартные запросы. Это все происходит таким образом:

1. Я сделать запрос GET на list.jsp страницы - это первая страница, которую вы видите в приложении, если вы проверить ссылку временного я приведенную ниже. Теперь мы на странице 1 (вся страница была перезагружена)

2. Я делаю запрос Ajax (нажмите на ссылку - например, номер страницы) на страницу 4. Только часть страницы была перезагружена - все в порядке. Таким образом, теперь мы находимся на странице 4

3. Я делаю запрос Ajax (щелкните по ссылке - то есть номер страницы) на страницу 5. Только часть страницы была перезагружена - все в порядке. Таким образом, теперь мы находимся на странице 5

4. Теперь я нажимаю кнопку «назад» браузера (один шаг назад к истории) - ничего не произошло. Консоли браузера не показывают никаких изменений.

5. Этот шаг я снова нажимаю на кнопку «назад» браузера. Оказывается, этот шаг выполняется правильно. Произошел запрос GET.

Что происходит? Почему браузер не помнит изменения, которые были атакованы на шаге 3? Как я могу указать браузеру сделать step back to history на изменения, внесенные с помощью запроса ajax?

Вы можете проверить его онлайн temp link. Просто попробуйте пойти по страницам. Розовый квадрат - это текущий индикатор страницы.

---

обновление 1:

Этот код инициализации после того, как загрузчик закончил загрузку 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); 
       }, 

      }); */ 

     } 

}); 

Answer 1

Когда пользователь нажимает на #idPage (кстати, классы используют вместо этого, теперь у вас есть несколько элементов с одинаковыми ID и that's not good), так как href атрибут пуст, то браузер будет загружать # (и будет идти к вершине страница).

Следует избегать поведения по умолчанию, когда пользователь нажимает на ссылки, например.

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

HASHTAG (#) имеет влияние на кнопки назад/вперед. Если вы добавите хэштег и нажмите «назад», браузер вернет вас в состояние до применения хэштега.

Answer 2

Я предлагаю вам поместить параметр хэша в URL-адрес, таким образом, браузер будет правильно обрабатывать историю и прослушать события хэш-обмена. В большинстве случаев вы можете напрямую хранить состояние страницы, поэтому вам не нужно выполнять собственную обработку истории.Я собрал немного 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>

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.

Также посмотрите на thoe вопрос: How to manage browser “back” and “forward” buttons when creating a javascript widget

---

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