如何显示的URL的Ajax请求? [英] How to show Ajax requests in URL?

查看:133
本文介绍了如何显示的URL的Ajax请求?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我要的是有一个动态的URL吧,在那里我可以指定一个像#日历= 10_2010tabview = TAB2

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

检查这一个确切的例子: <一个href="http://developer.yahoo.com/yui/examples/history/history-multiple_clean.html#calendar=7_2010&tabview=tab1">CLICK这里对于准确演示

Check this for an exact example: CLICK HERE FOR EXACT DEMO

因此​​,这里是链接的格式是什么,我需要:

So here is the link format what I need:

#日历= 10_2010和放大器; TabView的= TAB2

#calendar=10_2010&tabview=tab2

我必须像日历和链接变量 TabView的这样我就可以在一个单一的改变多件事情页面没有realoading。

I need to have variables in the links like calendar and tabview so I can change multiple things on a single page without realoading.

或者另一种格式,例如像 http://www.wbhomes.com.au ,这是完全我想要的,但第一个格式也不错,但是这是更漂亮。

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.

  • <$c$c>http://wbhomes.com.au/#/propertiesforsale/houseandland/quinnsbeach-waterland1

要求

  • 需要从任何地方访问 从例如一个邮件,或者如果我只是 写在地址栏。

  • 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.

刷新页面需要工作了。

部分的recources:

例如:

  • <一个href="http://developer.yahoo.com/yui/examples/history/history-multiple.html#calendar=6_2010&tabview=tab2">www.developer.yahoo.com/

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

www.facebook.com - the sidebar links on your profile page

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

www.wbhomes.com.au/ - 100% close to what I want

www.flickr.com/

www.youtube.com

一些教程:

<一个href="http://www.contentwithstyle.co.uk/content/fixing-the-back-button-and-enabling-bookmarking-for-ajax-apps">www.contentwithstyle.co.uk/

请帮帮我!我从来没有找到任何解决办法做到这一点,但我不希望使用jQuery或任何API或任何库,我想有一个工作的JavaScript / AJAX PHP 脚本。

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.

推荐答案

有关演示你的问题联系在一起,实现这一功能其实很简单 - 因为它不使用任何AJAX可言(当你开始添加AJAX的组合,它获得的更加困难 - 后面解释)。要实现这一功能,你会;升级你的链接使用哈希值,然后绑定到hashchange事件。不幸的是,hashchange事件不是跨浏览器兼容,但幸运的是,有许多历史/远程插件可用 - 我们的preferred一个比几年已被证明是 jQuery的历史 ,它是开源的,得到了​​大力支持,并积极发展: - )

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 :-).

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

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:

  • 如何优雅,轻松升级某些内部链接使用历史和AJAX功能,并检测散有什么改变?同时保持工作,就像之前的其他链接。
  • 如何从www.yoursite.com/myapp/a/b/c到www.yoursite.com/myapp/#/a/b/c重定向?并且仍然保持为用户体验使得3必要的重定向是尽可能的平滑顺畅。
  • 使用
  • 如何提交表单值和数据AJAX和更新哈希?反之,如果他们不支持Javascript。
  • 如何检测其AJAX请求是想要在页面特定区域?这样子页面显示正确的页面。
  • 如何更改页面标题的AJAX状态变化时?和其他非页面内容。
  • 如何执行,而AJAX状态载荷和变化很好的前奏/尾奏的效果?使得用户不残留在黑暗中。
  • 如何,当我们通过AJAX登录更新侧边栏登录信息?正如我们显然不希望登录按钮起来左上角到那里了。
  • 如何仍然支持该网站的用户不启用JS?使得它优雅地降低,仍然是可转位的搜索引擎。
  • 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.

唯一的开源和可靠的项目,我知道它试图解决所提到的所有这些非常困难的问题已被证明是 jQuery的Ajaxy 。这是有效的延伸到前面提到的jQuery的历史项目,提供了一个很好的优雅的高级接口AJAX功能加进来照顾幕后那些困难的问题,所以我们不必担心。这也是前面提到的最后几个商业用地使用选择的解决方案。

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 :-)

更新:现在HTML5的历史API(pushState,popState),其中德precates的HTML4 hashchange 功能。 History.js 现在是后继的jQuery的历史,并提供了对HTML5的历史API和的可选 hashchange 回退HTML4浏览器。 jQuery的Ajaxy将升级为History.js

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屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆