Ajax + 后退和前进按钮

Question

我正在编写一个新应用程序，想要使其完全采用ajax风格：）

我使用Jquery来进行ajax请求。 主JS文件从按下的链接获取一些变量，并根据该链接转到一些php文件，抓取一些数据并返回并将所有内容放入预先准备好的html标签中。

这就是我看待这个应用程序的方式。

现在，我找到了一些解决方案使得后退和前进按钮开始工作，但是在这些解决方案中，它们的脚本会转到预定义的页面并根据某个常数ID读取一些数据，所以我不喜欢它。

我想要的是......

1. 我需要一些代码，可以防止浏览器在用户按下后退或前进按钮时重新加载页面
2. 记住浏览器位置，因此如果我们处于状态“C”，并且按下了后退按钮，它将为JS带来一些具有值“B”的变量，然后JS转到php并说出'B'，因此php将了解哪个内容要准备。 将内容返回给JS，JS更新页面，每个人都很高兴。

是否有这样的解决方案可以实现这种方式？

- David

Answer 1

我过去曾经使用jQuery BBQ: Back Button & Query Library来实现这个目的。

具体而言，基本的AJAX示例似乎是你所需要的。其余的示例也非常出色。

- Dan F

Answer 2

我认为你应该看一下backbone.jshttp://documentcloud.github.com/backbone/。它采用基于路由的应用程序结构，每个路由实际上是不同的 /#'ed url。

例如当你有一个项目列表时，你可以在路由 /#itemsList 中显示它，每个项目详细信息页面可以放在 /#items/id 中。整个导航过程已经为你处理好了，你只需要调用一些函数或粘贴代码，当你到达该URL时就会运行它们。(示例改编自http://documentcloud.github.com/backbone/#Router)

var Workspace = Backbone.Router.extend({

  routes: {
    "help":                 "help",    // #help
    "item/:id":        "item",  // #item/myItemId
    "itemList": "list"   // #itemList
  },

  help: function() {
    ... show help
   },

  item: function(id) {
    ... show single item with jQuery, Ajax, jQuery UI etc
  },

  itemList: function(){
    ... show item list with jQuery, jQuery UI etc.
  }

});

www.myapp.com/#help -> 帮助代码

www.myapp.com/#item/32 -> ID为32的项目，通过item(id)函数捕获并通过Ajax请求获取数据。

www.myapp.com/#itemList -> 所有项目的列表，您可以生成每个项目的#item/id链接。

- Vlad Nicula

---

哇，看起来很不错。我听说过这个backbone.js的东西，但不知道路由功能。现在我希望明天就到了，这样我就可以在工作中尝试一下它了 :-) - Dan F

我发现了一些错误，或者可能是Model-View View-Model基于事件的通信文档不够清晰，但除此之外，一切都很好;) - Vlad Nicula