需要帮助了解如何ajaxify一个网站
我最近发现了如何使用History.js，jQuery和ScrollTo使用HTML5 History API对网站进行Ajax化的要点： https ： //github.com/browserstate/ajaxify
我很难得到这个工作的简单版本，我不确定我理解一切。 首先，我加载了gist中提供的所有脚本，然后设置了一个非常简单的导航和内容部分：
接下来，我更改了选择器变量以匹配html：
/* Application Specific Variables */ contentSelector = '#content', $content = $(contentSelector), contentNode = $content.get(0), $menu = $('#nav'), activeClass = 'active', activeSelector = '.active', menuChildrenSelector = 'li',
接下来应该做的就是我迷路的地方。 我想要做的就是加载特定于所选导航链接的html内容。 因此，如果我点击“工作”，我想将work.html文件加载到内容部分，并将url更改为“mywebsite.comhttps://stackoverflow.com/work”。 为了让事情变得简单，可以说work.html和所有其他可共享的内容都位于同一目录中。
任何帮助是极大的赞赏！ 干杯!
所以这里有一个真正的简单例子，说明我如何最终激活我正在研究的网站，这启发了这个问题。 对不起，真的很长时间了。 首先是HTML：
Home Content
接下来的Javascript：
基本上我所做的就是用“ajaxify”类拦截锚标签点击，用于表示我想要加载的具体内容。一旦我拦截了点击并确定要加载的内容，我就使用history.js pushSate（）来跟踪用户通过网站的订单，并在不重新加载页面的情况下更改url。 如果他们决定点击后退按钮，状态更改侦听器将加载正确的内容。 如果他们决定点击刷新按钮，您将需要提供一种使用不同url名称复制索引页的方法。 这在php中很容易，或者你可以根据需要复制，粘贴和重命名索引页面。
这是我在Github上发布的一个例子： https ： //github.com/eivers88/ajaxify-simple-demo
提醒一下，在本地使用ajax时，最好在MAMP或WAMP等个人Web服务器上运行项目。 如果没有运行服务器，此演示将在chrome中失败。 但是，它应该在没有服务器的Firefox中工作。
鉴于这些要求，您需要做很多事情。 这是一个你可以使用的function：
function doAjax(htmlpage){ $.ajax({ url:"/"+htmlpage, type: 'GET', success: function(data){ $('#content').html(data) } }); }
解决这个问题的最简单方法是将上面的标记调整为：
![]()
然而，在顶部的脚本标记中使用jquery执行此操作会稍微“正确”（尽管function相同）：
$(function () { $('#buttonid1').click(function(){doAjax('https://stackoverflow.com/questions/12486174/need-help-understanding-how-to-ajaxify-a-web-site/work.html')}); $('#buttonid2').click(function(){doAjax('about.html')}); $('#buttonid3').click(function(){doAjax('contact.html')}); });
请注意，在这两种情况下，这些“https://stackoverflow.com/questions/12486174/need-help-understanding-how-to-ajaxify-a-web-site/work.html”页面不应该是完整的html文档，它们应该只是内容div中的内容。
此ajax将无法更改访问者看到的url。 要实现这一点，您必须使用html5历史记录API 。 它比我上面的ajax请求复杂得多。 因此，如果您没有完全掌握我上面写的内容，那么它可能适合也可能不适合。