我想要的是拥有更改页面一部分的链接及其动态网址，我可以在其中指定#calendar=10_2010tabview=tab2 等变量
Check this for an exact example: CLICK HERE FOR EXACT DEMO
所以这是我需要的链接格式：
#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％接近我想要的
一些教程：
请帮帮我！我从来没有找到任何解决方案来做到这一点，但我不想使用jquery或任何API，或任何库，我希望有一个有用的Javascript/AJAX和PHP脚本。
答案 0 :(得分：25)
对于在您的问题中链接的演示，实现该功能实际上非常简单 - 因为它根本不使用任何AJAX（当您开始添加AJAX时，它会变得更加困难 - 稍后会解释）。要实现这种功能，你会;升级链接以使用哈希值，然后绑定到hashchange事件。不幸的是，hashchange事件不是跨浏览器兼容的，虽然幸运的是有许多“历史/远程插件”可用 - 多年来我们首选的已证明是 jQuery History ，它是开放的 - 来源，得到了很大的支持并积极发展： - ）。
虽然，当谈到像Facebook，WBHomes和Balupton.com这样的网站添加AJAX功能时，你将开始面对一系列严重困难的问题！ （我知道，因为我是最后两个网站的首席架构师！）。其中一些问题是：
我所知道的唯一一个开源且可靠的项目试图解决所提到的所有这些非常困难的问题，已被证明是 jQuery Ajaxy 。它实际上是前面提到的jQuery History项目的扩展，提供了一个漂亮优雅的高级接口，可以在混合中添加AJAX功能来处理幕后的难题，因此我们不必担心它们。它也是前面提到的最后几个商业网站中使用的选择解决方案。
祝你好运，如果您有任何进一步的问题，那么只需发表对此答案的评论，我会尽快得到答案： - ）
更新：现在有HTML5历史记录API（pushState，popState），它弃用了HTML4 hashchange功能。 History.js现在是jQuery历史记录的继承者，并为HTML5历史记录API提供跨浏览器兼容性，并为HTML4浏览器提供optional hashchange备用。 jQuery Ajaxy将升级为History.js
答案 1 :(得分：1)
Szevasz ..：）
<强> HTML
<a href="/bye.php?user=abc&page=messages"
onclick="return goToWithAjax(this);">bye</a>
<强>的Javascript
function goToWithAjax(hash) {
hash = hash.href ? hash.getAttribute("href", 2) : hash;
ajax( hash, function( response ) {
document.getElementById("content").innerHTML = response;
});
hash = ("#!/" + hash).replace("//","/");
window.location.hash = hash;
return false;
}
//////////////////////////////////////////////////////////////////////////////
function getXmlHttpObject() {
var xmlHttp;
try {
xmlHttp = new XMLHttpRequest();
} catch (e) {
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
function ajax(url, onSuccess, onError) {
var xmlHttp = getXmlHttpObject();
xmlHttp.onreadystatechange = function () {
if (this.readyState == 4) {
// onError
if (this.status != 200) {
if (typeof onError == 'function') {
onError(this.responseText);
}
}
// onSuccess
else if (typeof onSuccess == 'function') {
onSuccess(this.responseText);
}
}
};
xmlHttp.open("GET", url, true);
xmlHttp.send(null);
return xmlHttp;
}
答案 2 :(得分：1)
我认为您可以使用HTML5中存在的 onHashChange 事件或使用在未完全支持HTML 5的浏览器中模拟“哈希”行为的JavaScript库来轻松完成此操作。 其中一个库可能是MooTools onhashchange，但也有很多其他库。
如果你有一个支持HTML 5的浏览器，或者这样模拟行为的库，只需使用：
window.sethash("#newsection");从javascript改为新的东西，和/或回调到onHashChange事件到拦截它，具体取决于您的用例场景。
答案 3 :(得分：1)
CorMVC Jquery Framework以这种方式完成，它是开源的，你可以挖掘源并从中获取逻辑。
实际上它非常直接。创作者在下面的视频中很好地讲述了它。
http://www.bennadel.com/resources/jing/2009-12-21_0933.swf
PS抱歉无法发布第二个链接bc我是新用户。
答案 4 :(得分：0)
这是大多数新AJAXian开发人员所不能解决的问题。这是一个相当简单的问题需要解决。
你需要的第一件事是在jquery.com上免费的jQuery核心
接下来你将需要Ben Alman的jQuery哈希更改甚至插件，您可以在这里找到：http://benalman.com/projects/jquery-hashchange-plugin/对于支持html5 hashchange事件的较新版本的浏览器，您将不需要这个，但是您将使用旧版本浏览器。除了在页面中包含此脚本之外，您不必执行任何操作，而是处理其余部分。
现在，对于您的链接，您需要以查询字符串方式构建它们，如下所示：
<a href="user.php?q=/topic/article" class="dynlnk">Link Text/Image</a>
现在你有链接转到页面，可以在php中处理，以防javascript被关闭。您所要做的就是使用超级全局$ _GET并解析查询字符串以处理页面内容。
现在在页面上的javascript中你需要让你的链接触发hashchange。你可以通过用这样的＃替换？q =来做到这一点。
$(".dynlnk").each(function(){
$(this).attr("href", $(this).attr("href").replace("?q=", "#"));
});
现在你的链接将触发hashchange，剩下要做的唯一事情是将hashchange绑定到执行某些操作的函数。这可以通过这样的jQuery非常简单地完成：
$(window).bind( 'hashchange', function(e){
//this splits the part after the hash so you can handle the parts individually.
//to handle them as one just use location.hash
pageparts = location.hash.split("/");
});
现在只需添加您用来处理ajax和内容的代码。
现在你只需要最后一点javascript来触发hashchange，以防页面加载了一个哈希开始，所以你只需在页面加载时调用windows trigger函数
$(window).trigger( 'hashchange' );
希望这很清楚，如果没有，请不要犹豫与我联系以提出更多问题。
答案 5 :(得分：0)
使用哈希链接允许可收藏/可共享的链接触发JavaScript代码，而不是重新加载页面。 Ben Almans jQuery hashchange event允许您将事件处理程序绑定到hashchange事件，此插件适用于通常不支持此功能的旧浏览器。绑定到hashchange的事件处理程序可以读取url的哈希部分，并调用任何函数。
// register event handler
function bindHashchange() {
$(window).bind('hashchange', function(event) {
event.preventDefault();
var label = location.hash.substring(1);
handleLabel(label);
});
// trigger event so handler will be run when page is opened first time
// otherwise handler will only run when clicking on hash links
$(window).trigger('hashchange');
}
// read and handle hash part of url
function handleLabel(label) {
if ( label.length > 0 ) {
// using label from url
switchPage(label);
} else {
// use the default label, if no hash link was present
switchPage('start');
}
}
// in this case, load hidden <div>'s into a <div id="content">
function switchPage(label) {
if ( label == 'start ) {
$('div#content').html($('div#start'));
} else if ( label == 'some_other_page' ) {
// do something else
}
}
这个其他事件处理程序可以在同一个url中处理由点（'。'）分隔的2个参数。
function processHash() {
var str = location.hash.substring(1);
var pos = $.inArray('.', str);
var label = '';
var arg = '';
if ( pos > -1 ) {
label = str.substring(0, pos);
} else {
label = str.substring(0);
}
if ( pos > 1 ) {
arg = str.substring(pos+1);
}
if ( label.length == 0 ) {
// the default page to open of label is empty
loadContent('start');
} else {
// load page, and pass an argument
loadContent(label, arg);
}
}
如果使用正则表达式，则可以解析任何字符组合。
var registry = {};
// split on character '.'
var args = label.split(/\./g);
for ( i in args ) {
var arg = args[i];
// split on character '='
var temp = arg.split('=');
var name = temp[0];
var value = temp[1];
// store argument in registry
registry[name] = value;
}
// registry is loaded, ready to run application that depends on arguments
这将改变网址：
mysite的/＃company.page = items.color =红色
进入以下JavaScript对象：
对象{company = undefined，page =“items”，color =“red”}
然后，只需在所选元素上运行jQuery的show（）或hide（）函数。
这可以转换为非jQuery JavaScript，但是你会失去Ben Alman提供的功能，这对便携式解决方案至关重要。
答案 6 :(得分：0)