我试图找出如何使用这个pushstate和popstate我的Ajax应用程序。我知道有一些插件，但我想学习如何使用它在它的原始形式的时刻。我也知道，在原始形式，它不支持IE浏览器。所有这一切不谈，我需要一些帮助了解如何使用它。

I am trying to figure out how to use this pushstate and popstate for my ajax applications. I know there are some plug ins but i am trying to learn how to use it in it's raw form at the moment. I am also aware that in the raw form it is not supported by IE. All that aside, I need some help understanding how to use it.

它的pushstate部分是pretty的简单。现在我有：

the pushstate portion of it is pretty simple. Right now i have:

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

这改变了我的网址就好了，并把它添加到我的网址堆栈。我有另一个函数，如下所示：

This changes my url just fine and adds it to my url stack. I have another function that looks like the following:

function loadForm2(var1,var2, var3){ 
    string = "xyz="+var1+"&abc="+var2+"&123="+var3;
        history.pushState("", "page 2", string);
}

调用时，第二个功能也会发生变化的URL。现在，我有一部分，我试图找出如何使用popstate。现在我有它如下：

The second function also changes the url when called. Now that i have that part i am trying to figure out how to use the popstate. Right now i have it as follows

window.popState = ajax;

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

所以，如果你能像我的网页上有两个环节，一个叫了loadForm功能和其他链接调用loadForm2功能。当我点击每一个链接通过ajax的形式加载就好了和URL的变化，因为它应该的。当我打的后退按钮，URL将回滚到previous页面的网址，但该页面内容加载当前的形式，而不是再次previous形式。当我打的后退按钮它调用Ajax（萤火虫），就好像它试图加载previous形式，而是运行在previous AJAX调用运行当前的Ajax调用。所以，我的网址可以追溯到previous网址，但加载的形式或Ajax调用被称为是一样的最新的页面加载（不是previous页面加载）。

So if you can image my page with two links, one calls the loadForm function and the other link calls loadForm2 function. When i click each of the links the forms loads via ajax just fine and the url changes as it should. When I hit the back button, the url will roll back to the previous page's url BUT the page content loads the current form again instead of the previous form. When i hit the back button it is making an ajax call (firebug) as if it is trying to load the previous form but instead of running the previous ajax call it runs the current ajax call. So my url goes back to the previous url but the form that is loaded or the ajax call that is called is the same as the most recent page load (not the previous page load).

我不知道我在做什么错了，任何帮助将非常AP preciated。

I am not sure what i am doing wrong and any help would be much appreciated.

推荐答案

您正在做的事情很奇怪。

You are doing something weird.

window.popState = ajax;

我甚至惊讶的是，阿贾克斯（）被甚至被称为。

做的正常方式是注册一个事件处理程序。

The normal way of doing it is to register an event handler.

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

请参阅How使用后退按钮history.pushstate何时触发变化和popstate？

编辑：

基本上你需要知道加载，当你的状态改变它的形式。 .originalEvent.state 将包含这些信息，这样你就可以传递给你的Ajax调用。它也应该包含相应的字符串。

Basically you need to know which form to load when your state is changed. .originalEvent.state will contain this information which you can then pass on to your ajax call. It should also contain the respective string.

在你的方法的问题是，字符串，始终是最后的新加载的页面之一。你需要读取字符串 event.orginalEvent.state 。使用的console.log（）找到它的那个对象。

The problem in your approach is that string, always remained the one of the last newly loaded page. You need to read that string in event.orginalEvent.state. use console.log() to find it in that object.

编辑2：

有没有一种方法，你可以给我什么我的code应该是这样的一个例子。我想你明白我要完成的。

Is there a way you can give me an example of what my code should look like. I think you understand what i am trying to accomplish.

每当浏览器的后退按钮（或前进按钮）被点击时，你需要从AJAX加载页面。

Everytime the back button (or forward button) of the browser is clicked, you need to load the page from AJAX.

您已经试图通过说要做到这一点：

You have attempted to do this by saying:

window.popState = ajax;

这是危险的，因为要更换系统的功能。

This is dangerous as you are replacing a system function.

相反，你应该在状态发生改变时注册事件处理程序。

Instead you should register an event handler for when the state changes.

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

现在每次回退按钮是pressed，你的阿贾克斯（）函数（应该）被调用。

Now everytime the back button is pressed, your ajax() function (should) get called.

到目前为止，这只会提高你的方法，但不是解决您的问题。

So far this will only improve your approach to it, but not fix your problem.

问题是，你原来的阿贾克斯（）功能指的是被称为全局变量字符串。这个全局变量有previous状态没有记忆。因此每次原来的形式被一次又一次地加载。

The problem is that your original ajax() function refers to a global variable called string. This global variable has no memory of the previous states. Therefore everytime the original form gets loaded again and again.

但你已经在正确的存储字符串做的状态：

But you already are correctly storing string in the state by doing:

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

所以当AJAX调用，浏览器就会给它一个事件对象，它包含了所有这些信息。

So when ajax is called, the browser will give it an event object, which contains all this information.

所以，你现在需要做的是改变你的阿贾克斯（）如下：

So all you need to do now is change your ajax() as follows:

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

最后，你也应该停止使用字符串通过使用 VAR 关键字，并确保该字符串的全局变量包含一个？：

Finally you should also stop using string as a global variable by using the var keyword and make sure the string contains a "?":

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

这将降低未来的任何有关的东西几乎是混乱的工作，但工作不正常。

This will reduce any future confusion about something almost working, but not working properly.