HTML 5 - Ajax popstate и pushstate

Вы делаете что-то странное.

window.popState = ajax;

Я даже удивлен, что ajax() даже позвонили.

Обычный способ сделать это - зарегистрировать обработчик событий.

$(window).bind('popstate', function(event) {
    var state = event.originalEvent.state;
}

См. Как запустить изменить при использовании кнопки возврата с history.pushstate и popstate?

РЕДАКТИРОВАТЬ:

В основном вам нужно знать, какую форму загружать при изменении вашего состояния. .originalEvent.state будет содержать эту информацию, которую вы затем можете передать своему вызову ajax. Он также должен содержать соответствующий string.

Проблема в вашем подходе в том, что string всегда оставалась одной из последних вновь загруженных страниц. Вам нужно прочитать эту строку в event.orginalEvent.state. используйте console.log(), чтобы найти его в этом объекте.

РЕДАКТИРОВАТЬ 2:

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

Каждый раз, когда нажимается кнопка «Назад» (или кнопка «Вперед») в браузере, вам необходимо загрузить страницу из AJAX.

Вы попытались сделать это, сказав:

window.popState = ajax;

Это опасно, поскольку вы заменяете системную функцию.

Вместо этого вам следует зарегистрировать обработчик событий при изменении состояния.

jQuery(window).bind('popstate', ajax);

Теперь каждый раз, когда нажимается кнопка возврата, ваша ajax() функция (должна) вызываться.

Пока это только улучшит ваш подход к этому, но не решит вашу проблему.

Проблема в том, что ваша исходная функция ajax() ссылается на глобальную переменную с именем string. Эта глобальная переменная не запоминает предыдущие состояния. Поэтому каждый раз исходная форма загружается снова и снова.

Но вы уже правильно сохраняете string в состоянии, выполнив:

history.pushState("", "page 1", string);

Поэтому, когда вызывается ajax, браузер передает ему объект события, который содержит всю эту информацию.

Итак, все, что вам нужно сделать сейчас, это изменить свой ajax() следующим образом:

function ajax(){
   jQuery.ajax({               
     type: "get",
     url: "../html_form.php",
     data: document.location.search.substr(1),
     dataType: "html",
     success: function(html){
       jQuery('#Right_Content').hide().html(html).fadeIn('slow');
       validate();
       toolTip();   
     }  
   })
}

Наконец, вам также следует прекратить использование string в качестве глобальной переменной с помощью ключевого слова var и убедиться, что строка содержит "?":

function loadForm(var1,var2){ 
    var string = "?xyz="+var1+"&abc="+var2;
        history.pushState("", "page 1", string);
 }

Это уменьшит любую путаницу в будущем по поводу того, что что-то почти работает, но не работает должным образом.