AJAX后退按钮实现:它们如何工作?

时间:2010-07-28 01:42:37

标签: ajax browser

我的页面到目前为止加载了一次,然后它就是那里的所有AJAX,宝贝:D。显然,后退/前进/重新加载/历史/书签会严重破坏它。我正在研究一些解决方案(我正在关注jQuery插件,也就是烧烤或地址),我很好奇它们是如何实现的。

我真正感兴趣的是后退/前进功能,因为这是一个真正的“应用程序”,可供5-6人使用,以帮助协调他们的工作,不会形成或形成“网络文档”。我试图阻止一般用户习惯的窗口操作习惯破坏我的应用程序。

到目前为止,我没有遇到多个州可以进入另一个州的情况,因此我的返回功能实施起来相当简单。没有使用“返回”功能实现返回功能,只需通过取消,返回和其他按钮。

但我离题了...到目前为止,我真的很喜欢一个简单的URL片段标识符系统的概念,以允许向后/向前功能,我真的想避免在问题上抛出其他人的代码(这是我的第一个webapp并且我试图尽可能地痛苦地做所有事情以便学习。)

好的,没有更多的离题......我在Content with Style中获得了this article的印象,我可以使用计时器来轮询我的窗口URL并触发相应的AJAX操作。

我有兴趣知道的是:

  1. 如果用于修复AJAX后退/前进破坏的常用插件使用类似的方法,如果没有,他们使用了哪些方法?
  2. 有什么优点。和利弊。轮询方法,以及任何替代方法。
  3. 我可以实现这些方法的简单版本来实现我的目标吗? (比如150行以下)。
  4. 自己这样做是否值得?如果我实施这个,我会学到什么有价值的东西吗?我的(理论上)更简单的版本真的会比一个全面的插件少得多吗?

1 个答案:

答案 0 :(得分:2)

  

如果用于修复AJAX后退/前进破坏的常用插件使用类似的方法,如果没有,他们使用了哪些方法?

他们同时使用轮询和hashchange事件。

  

有什么优点。和利弊。轮询方法,以及任何替代方法。

  • 投票优点:并非所有浏览器都支持hashchange,因此它是跨浏览器
  • 投票的缺点:在性能方面更昂贵
  

我可以实现这些方法的简单版本来实现我的目标吗? (比如150行以下)。

如果您只为5个人编写应用程序,也可以强迫他们使用支持hashchange事件的现代浏览器。然后你可以用2-3行编写哈希变化检测:)

window.onhashchange = function(event) {
    var url = event.newURL;
    // do something with new url
};
  

自己这样做是否值得?如果我实施这个,我会学到什么有价值的东西吗?我的(理论上)更简单的版本真的会比一个全面的插件少得多吗?

是的,见上文。你可以用很少的代码编写一个更好的实现。例如,Rails使用router将请求分派给控制器。路线定义如下:

"/signup"           -> (UsersController, new)
"/user/(id)/photos" -> (PhotosController, index)

您可以定义自己的路由API,以便在JavaScript中注册路由及其处理函数/对象,并且比现有插件可以做更多更酷的事情,仅限于您的想象:)