如何使用
AJAX“书签”页面或内容？
如果我们只是将细节添加到“锚点”,然后使用路由甚至在PHP代码或Ruby on Rails的route.rb中捕获该部分,然后显示内容或页面,看起来很容易因此？ (显示整页或部分内容)
那么它可以很简单吗？看起来这就是facebook的做法.有什么其他好办法吗？
解决方法
更新：现在有HTML5 History API(pushState,popState),它不赞成HTML4 hashchange功能.
History.js为HTML4浏览器提供跨浏览器兼容性和
optional hashchange回退.
要存储页面的历史记录,最流行和全功能/支持的方式是使用哈希变换.这意味着您可以从yoursite / page.html#page1转到yoursite / page.html#page2,您可以跟踪该更改,并且由于我们使用的是哈希,因此可以通过书签和后退和前进按钮来选择.
您可以使用jQuery History项目找到绑定到哈希更改的好方法
http://www.balupton.com/projects/jquery-history
还有一个功能齐全的AJAX扩展,允许您轻松地将Ajax请求集成到您的状态/哈希,将您的网站转换为功能齐全的Web 2.0应用程序：
http://www.balupton.com/projects/jquery-ajaxy
他们都在他们的演示页面上提供了很好的文档来解释发生了什么以及发生了什么.
以下是使用jQuery History的示例(从演示站点获取)：
// Bind a handler for ALL hash/state changes
$.History.bind(function(state){
// Update the current element to indicate which state we are now on
$current.text('Our current state is: ['+state+']');
// Update the page"s title with our current state on the end
document.title = document_title + ' | ' + state;
});
// Bind a handler for state: apricots
$.History.bind('/apricots',function(state){
// Update Menu
updateMenu(state);
// Show apricots tab,hide the other tabs
$tabs.hide();
$apricots.stop(true,true).fadeIn(200);
});
以及jQuery Ajaxy的一个例子(取自演示网站)：
'page': {
selector: '.ajaxy-page',matches: /^\/pages\/?/,request: function(){
// Log what is happening
window.console.debug('$.Ajaxy.configure.Controllers.page.request',[this,arguments]);
// Adjust Menu
$menu.children('.active').removeClass('active');
// Hide Content
$content.stop(true,true).fadeOut(400);
// Return true
return true;
},response: function(){
// Prepare
var Ajaxy = $.Ajaxy; var data = this.State.Response.data; var state = this.state;
// Log what is happening
window.console.debug('$.Ajaxy.configure.Controllers.page.response',arguments],data,state);
// Adjust Menu
$menu.children(':has(a[href*="'+state+'"])').addClass('active').siblings('.active').removeClass('active');
// Show Content
var Action = this;
$content.html(data.content).fadeIn(400,function(){
Action.documentReady($content);
});
// Return true
return true;
如果您想获得查询字符串参数(所以yoursite / page.html#page1？a.b = 1& a.c = 2),您可以使用：
$.History.bind(function(state){
var params = state.queryStringToJSON(); // would give you back {a:{b:1,c:2}}
}
因此,请查看这些演示链接以查看它们的运行情况,以及所有安装和使用详细信息.
