如何在URL中显示Ajax请求？

Question

我想要的是拥有更改页面一部分的链接,以及它的动态URL,我可以在其中指定变量等 #calendar=10_2010tabview=tab2

Check this for an exact example: 点击这里进行精确的演示

所以这是我需要的链接格式:

#calendar=10_2010&tabview=tab2

我必须像链接变量calendar和tabview这样我就可以改变一个页面上的多个万物而不realoading.

---

或者像http://www.wbhomes.com.au这样的其他格式,这正是我想要的,但是第一种格式也很好,但这更美观.

• http://wbhomes.com.au/#/propertiesforsale/houseandland/quinnsbeach-waterland1

---

要求

• 需要从例如邮件的任何地方访问,或者如果我只是在URL栏中写入.

• 链接应该在历史记录中,因此如果我按下后退或前进按钮,则需要访问该页面.

• 页面刷新也需要工作.

---

一些资源:

例子:

• www.developer.yahoo.com/

• www.facebook.com - 您的个人资料页面上的侧边栏链接

• www.wbhomes.com.au/ - 100%接近我想要的

• www.flickr.com/

• www.youtube.com

一些教程:

• www.ajaxpatterns.org/

• www.contentwithstyle.co.uk/

---

请帮我!我从来没有找到任何解决方案来做到这一点,但我不想使用jquery或任何API,或任何库,我想有一个工作Javascript/AJAX和PHP脚本.

Answer 1

对于在您的问题中链接的演示,实现该功能实际上非常简单 - 因为它根本不使用任何AJAX(当您开始添加AJAX时,它变得更加困难 - 稍后解释).要实现这种功能,你会; 升级链接以使用哈希值,然后绑定到hashchange事件.不幸的是,hashchange事件不是跨浏览器兼容的,虽然幸运的是有许多"历史/远程插件"可用 - 多年来我们首选的已证明是jQuery历史,它是开源的,得到了​​很大的支持并积极开发: - ).

虽然,当谈到像Facebook,WBHomes和Balupton.com这样的网站添加AJAX功能时,你将开始面对一系列严重困难的问题!(我知道,因为我是最后两个网站的首席架构师!).其中一些问题是:

• 如何优雅轻松地升级某些内部链接以使用历史记录和AJAX功能,并检测哈希何时发生变化？同时保持其他链接像以前一样工作.
• 如何从"www.yoursite.com/myapp/a/b/c"重定向到"www.yoursite.com/myapp/#/a/b/c"？并且仍然为用户保持平滑的体验,使得3个必要的重定向尽可能平滑.
• 如何使用AJAX提交表单值和数据并更新哈希？反之亦然,如果他们不支持Javascript.
• 如何检测AJAX请求所需的页面的哪个特定区域？这样的子页面显示正确的页面.
• 如何在AJAX状态更改时更改页面标题？和其他非页面内容.
• 如何在AJAX状态加载和更改时执行漂亮的介绍/ outro效果？使得用户不会被置于黑暗中.
• 我们通过AJAX登录时如何更新侧边栏登录信息？显然,我们不希望左上角的登录按钮再次出现.
• 如何仍然为没有启用JS的用户支持网站？它优雅地降级并且仍然可以被搜索引擎索引.

我所知道的唯一一个开源且可靠的项目试图解决所提到的所有这些极其困难的问题,这些项目已被证明是jQuery Ajaxy.它实际上是前面提到的jQuery History项目的扩展,提供了一个漂亮优雅的高级接口,可以在混合中添加AJAX功能来处理幕后的难题,因此我们不必担心它们.它也是前面提到的最后几个商业网站中使用的所选解决方案.

祝你好运,如果你有任何进一步的问题,那么就发表对这个答案的评论,我会尽快得到它:-)

更新:现在有HTML5历史API(pushState,popState),它不赞成HTML4 hashchange功能.History.js现在是jQuery History的继承者,它为HTML5 History API提供跨浏览器兼容性,并为HTML4浏览器提供可选的 hashchange后备.jQuery Ajaxy将升级为History.js