如何在 URL 中显示 Ajax 请求? [英] How to show Ajax requests in URL?
问题描述
我想要的是更改页面一部分的链接，以及它的动态 URL，我可以在其中指定变量，例如 #calendar=10_2010tabview=tab2
检查这个确切的例子: 单击此处获取详细演示
所以这是我需要的链接格式:
#calendar=10_2010&tabview=tab2
我需要在calendar 和tabview 等链接中添加变量，这样我就可以在一个页面上更改多个内容而无需重新加载.
或其他格式，例如 http://www.wbhomes.com.au ，这是正是我想要的，不过第一种格式也不错，但这个更漂亮.
http://wbhomes.com.au/#/propertiesforsale/houseandland/quinnsbeach-waterland1
要求
需要从任何地方访问例如一封邮件，或者如果我只是写在网址栏中.
链接应该在历史记录中，所以如果我按下后退或前进按钮，页面需要被访问.
页面刷新也需要工作.
一些资源:
示例:
www.facebook.com - 您的个人资料页面上的侧边栏链接
www.wbhomes.com.au/ - 100% 接近我想要的p>
一些教程:
<小时>请帮帮我！我从来没有找到任何解决方案来做到这一点，但我不想使用 jquery 或任何 API 或任何库，我想要一个有效的 Javascript/AJAX 和 PHP 脚本.
对于您问题中链接的演示，实现该功能实际上非常简单 - 因为它根本不使用任何 AJAX(当您开始添加 AJAX 时)混合，它变得更加困难 - 稍后解释).要实现该功能，您会；升级您的链接以使用哈希，然后绑定到 hashchange 事件.不幸的是，hashchange 事件不是跨浏览器兼容的，但幸运的是有许多历史/远程插件"可用 - 我们多年来首选的一个已被证明是jQuery History，它是开源的，得到了很好的支持并且正在积极开发:-).
虽然，当涉及向 Facebook、WBHomes 和 Balupton.com 那么你将开始面临一系列严重的难题！(我知道我是最后两个站点的首席架构师！).其中一些问题是:
- 如何优雅轻松地升级某些内部链接以使用历史记录和 AJAX 功能，并检测哈希值何时发生变化?同时保持其他链接像以前一样工作.
- 如何从www.yoursite.com/myapp/a/b/c"重定向到www.yoursite.com/myapp/#/a/b/c"?并且仍然为用户保持流畅的体验，以便 3 次必要的重定向尽可能顺畅.
- 如何使用 AJAX 提交表单值和数据并更新哈希?如果它们不支持 Javascript，反之亦然.
- 如何检测 AJAX 请求需要页面的哪个特定区域?这样子页面就会显示正确的页面.
- 如何在 AJAX 状态改变时改变页面标题?和其他非页面内容.
- 如何在 AJAX 状态加载和更改时执行出色的前奏/后奏效果?这样用户就不会被蒙在鼓里.
- 当我们通过 AJAX 登录时如何更新侧边栏登录信息?很明显，我们不想再出现左上角的登录按钮了.
- 对于没有启用JS的用户，如何仍然支持网站?这样它就会优雅地降级并且仍然可以被搜索引擎索引.
我所知道的唯一一个开源且可靠的项目，它试图解决提到的所有这些极其困难的问题，结果证明是jQuery Ajaxy.它实际上是对前面提到的 jQuery History 项目的扩展，提供了一个漂亮优雅的高级界面，可以将 AJAX 功能添加到混合中，以解决幕后的那些难题，因此我们不必担心它们.这也是前面提到的最后几个商业网站所选择的解决方案.
祝你好运，如果你有任何进一步的问题，请在这个答案上发表评论，我会尽快回复:-)
更新:现在有 HTML5 History API(pushState、popState)，它弃用了 HTML4 hashchange 功能.History.js 现在是 jQuery History 的继承者，并为 HTML5 History API 提供跨浏览器兼容性和 optional hashchange 回退HTML4 浏览器.jQuery Ajaxy 将针对 History.js 进行升级
What I want is to have links which change a part of the page , and a dynamic URL for it, where I can specify variables such like #calendar=10_2010tabview=tab2
Check this for an exact example: CLICK HERE FOR EXACT DEMO
So here is the link format what I need:
#calendar=10_2010&tabview=tab2
I need to have variables in the links like calendar and tabview so I can change multiple things on a single page without realoading.
Or another format such like on http://www.wbhomes.com.au , this is exactly what I want, however the first format is good too but this is much more beautiful.
http://wbhomes.com.au/#/propertiesforsale/houseandland/quinnsbeach-waterland1
Requirements
Needs to be accessed from anywhere from example a mail, or if I just write in the url bar.
The link should be in the history, so if If I push the back or forward button the page needs to be accessed.
Page refresh needs to work too.
Some recources:
Examples:
www.facebook.com - the sidebar links on your profile page
www.wbhomes.com.au/ - 100% close to what I want
Some Tutorials:
Please help me! I've never found any solution to do this, but I don't want to use jquery or any API, or any library, I want to have a working Javascript/AJAX and PHP script.
For the demo linked in your question, achieving that functionality is actually really simple - as it doesn't use any AJAX at all (when you start to add AJAX to the mix, it get's more difficult - explained later). To achieve that functionality you would; upgrade your links to use hashes, then bind into the hashchange event. Unfortunately the hashchange event is not cross-browser compatible, though luckily there are many "history/remote plugins" available - our preferred one over the years has proven to be jQuery History, it's open-source, got great support and is actively developed :-).
Although, when it comes to adding AJAX functionality to the mix like such sites as Facebook, WBHomes and Balupton.com then you will start to face a whole series of seriously difficult problems! (I know as I was the lead architect for the last two sites!). Some of these problems are:
- How to gracefully and easily upgrade certain internal links to use the History and AJAX functionality, and detect when the hash has changed? while keeping other links working just like before.
- How to redirect from "www.yoursite.com/myapp/a/b/c" to "www.yoursite.com/myapp/#/a/b/c"? and still keep the experience smooth for the user such that the 3 necessary redirects are as smooth as possible.
- How to submit form values and data using AJAX and update the hash? and vice versa if they don't support Javascript.
- How to detect which particular area of the page the AJAX request is wanting? Such that subpages are displayed with the correct page.
- How to change the page title when the AJAX state changes? and other non-page content.
- How to perform nice intro/outro effects while the AJAX state loads and changes? such that the user isn't left in the dark.
- How to update the sidebar login info when we login via AJAX? As obviously we don't want that login button up the top left to be there anymore.
- How to still support the website for users that do not have JS enabled? Such that it gracefully degrades and still is indexable by Search Engines.
The only open-source and reliable project I know of which tries to solve all those extremely difficult problems mentioned has proven to be jQuery Ajaxy. It's effectively an extension to the jQuery History project mentioned before, providing a nice elegant high level interface to add AJAX functionality to the mix to take care of those difficult problems behind the scenes so we don't have to worry about them. It's also the chosen solution used in the last few commercial sites mentioned earlier.
Good luck, and if you have any further questions then just post a comment on this answer and I'll get to it asap :-)
Update: There is now the HTML5 History API (pushState, popState) which deprecates the HTML4 hashchange functionality. History.js is now the sucessor to jQuery History and provides cross-browser compatibility for the HTML5 History API and an optional hashchange fallback for HTML4 browsers. jQuery Ajaxy will be upgraded for History.js
这篇关于如何在 URL 中显示 Ajax 请求?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
