AJAXify 网站答案

【问题标题】：AJAXify siteAJAXify 网站
【发布时间】：2010-11-08 12:10:42
【问题描述】：

我有正当理由去做我试图解释的事情。我有一个现有的网站说 abc.com，它有常规页面等。一切都是用 php 编写的。现在我想对站点进行 AJAX 化，即当用户单击链接时，它应该使用 AJAX 获取链接并替换页面内容。这是简单的部分，我可以使用 jQuery get 函数来实现它。

现在问题来了，当用户为页面添加书签时。我可以使用哈希标签来指定用户是否在另一个页面上，但不是使用 javascript 再次获取新页面，是否可以在调用页面时直接使用 PHP 获取它。

你能否给我一个关于如何实现上述目标的大纲。此功能类似于 Facebook 的功能。

感谢您的宝贵时间。

【问题讨论】：

不知道为什么这被否决了，这是一个完全合理的问题。
ajax 位真的跑题了，你想知道的是 php 是否可以读取锚标签和重定向。即，您能否测试 mainpage.php#about_us（书签链接）并重定向到 aboutus.php（直接链接到用户在书签时正在查看的内容）。我不知道答案，但我建议澄清这个问题。
@musicfreak：同意，我给了它一个赞成票，让它恢复为正数

标签： php javascript jquery ajax graceful-degradation

【解决方案1】：

这是一个相当简单的过程：(1) 解析哈希标签，(2) 像往常一样通过 Ajax 加载内容。

如果您在用户点击页面时加载更多内容，请务必始终正确修改哈希标记以反映页面上的内容。

这里有a quick example 可以玩。单击一个名称并记下井号标签。相关的 Javascript 如下所示：

// Go straight to content if it's in the hash.
$(document).ready(function(){
   load_story_from_hash();
});

// Call this function whenever user clicks on a hash link
function set_hash(hash){
   window.location.hash = hash;
   load_story_from_hash()
}

// Actually load content based on the hash in the URL
function load_story_from_hash(){

   var hash = window.location.hash;
   hash = hash.replace(/^#/, '');

   if (hash) {

      $('#post_container').load(hash+'.html', {}, function(){
         $.scrollTo('#post_container', 1000);
      });

   }

}

【讨论】：

在您的示例中，当我使用后退和前进按钮时，它不记得以前的状态。

【解决方案2】：

答案是否定的，你无法获取 URL 哈希服务器端的值。见How to get Url Hash (#) from server side。

您必须在客户端获取哈希值并提出额外请求。

【讨论】：

这是问题的症结所在，需要onDocumentReady获取那个值，然后用来激活相关的ajax funkness。

【解决方案3】：

jQuery History 是我的首选。可以在这里找到：http://www.balupton.com/projects/jquery-history/ 提供跨浏览器支持、绑定到哈希、重载哈希等等。

还有一个名为 jQuery Ajaxy 的 Ajax 扩展，允许它轻松地将您的网页升级为适当的 Ajax 应用程序，而无需更改服务器端并保持对 SEO 和 JS-Disabled 友好：http://www.balupton.com/projects/jquery-ajaxy/

这是http://wbhomes.com.au/和http://www.balupton.com等网站选择的解决方案

总体而言，它们都有很好的文档记录、受支持且功能丰富。他们还在这里赢得了一个赏金问题How to show Ajax requests in URL?

【讨论】：

【解决方案4】：

您可以使用其中一种工具，也可以自己动手制作。使用 window.location.hash 和其他技巧。

【讨论】：

【解决方案5】：

我最近写了一篇关于这个确切问题的文章。文章为教程风格。使用哈希更改事件，我展示了如何向 url 添加参数，这可以触发具有无限数量参数的 ajax 请求，因此以相当可扩展的方式运行。

您可以在http://andresgallo.com/2012/06/08/ajaxifying-the-web-the-easy-way/找到更多相关信息

第一部分介绍如何响应哈希链接，而第二部分介绍如何将哈希 url 中的数据发送到 ajax 请求，因此您可以从 url 中的哈希标签中执行几乎任何您想做的事情。

【讨论】：

【解决方案6】：

最好的方法是使用一个 index.php 来加载基于它之后的 URL 部分的所有其他页面。例如：

http://www.example.com/index.php/reports/employees/hoursWorked

在这种情况下 index.php 将运行，它可以看到所请求的是工作时间报告，并加载该内容。问题是，如果 index.php 然后使用 AJAX 加载所有其他内容，浏览器中的 URL 将永远不会改变。

解决该问题的一种方法是在每个包含该 URL 形式的页面上放置一个“链接到此页面”链接，供用户添加书签。

【讨论】：