如何在不重新加载页面的情况下更改地址栏中的URL

Question

我有http://mysite.com/index.php。

和子菜单

• home =＆gt; http://mysite.com/index.php
• 关于我们=＆gt; http://mysite.com/about.us.php
• products =＆gt; http://mysite.com/products.php

但我希望http://mysite.com/index.php处理每个请求，只需使用Ajax请求更改内容。这样，网站只加载内容部分，并且更快速，更容易导航。

这里的问题是搜索引擎优化，因为谷歌唯一会看到的网址是http://mysite.com/index.php，我想将http://mysite.com/about-us与关于我们内容关联起来，{{3} } 产品内容等

我知道我可以通过PHP读取URL并动态编写Ajax来实现这一点，但这样做每次都会重新加载整个页面。 有没有办法在不重新加载整个页面的情况下执行此操作？ 我认为我需要的是在子菜单中有一个常规锚点，例如指向“http://mysite.com/product”，但是当点击时，不是打开这个页面，而是处理Ajax请求。

如果可能的话，谷歌可能会认为这可能是黑帽子，对吗？

此致 亚历

Answer 1

您无法在不更改页面的情况下更改地址栏中的网址，因为为了能够这样做，我可以通过http://www.imhackingyou.com/sucker访问我，但将地址栏更改为http://www.bankofamerica.com/login

Answer 2

这是一个路由问题，而不是AJAX问题。

如果您正在使用其他工具（ cough ASP.NET MVC cough ），您只需添加一条路线（我希望有办法可以做这在PHP中接受了像

这样的URL

/home
/products
...

并将它们发送到，比方说，

/index.php?area=home
/index.php?area=products

当在良好的MVC或RESTful URL系统之外使用时，通常使用重写引擎来完成。我在IIS上使用ISAPI Rewrite，但如果您正在使用LAMP堆栈，我认为Apache提供了一个提供相同功能的模块。 （Google .htaccess）

警告：RANT跟随

并且，为了它的价值，

1. 避免尝试用JavaScript编写整个应用程序。服务器的存在是有原因的。作为Web开发人员，您的部分工作是尽可能多地将工作吸收到服务器上。当您尝试在客户端上执行所有操作时，浏览器性能和兼容性问题会让您发疯。

2. 在很多情况下避免回发是有道理的，但是你应该尝试将其应用到每个页面都不是灵丹妙药。通常，在单击链接时加载新页面是有意义的。这是用户期望的，它更稳定（因为大多数所需的基础设施是服务器端的）并且它不比AJAX请求检索同样的东西慢。

规则：

1. 永远不要打破后退按钮。如果不仔细规划，大多数AJAX应用程序都会违反此规则。
2. 参见规则＃1。

Answer 3

这里有一个解决方案：

window.history.pushState(data, title, url)

Rob解释它是如何工作的，你有一个有效的例子：

http://moz.com/blog/create-crawlable-link-friendly-ajax-websites-using-pushstate

Answer 4

这听起来应该用rewrite engine完成，但假设您有充分的理由使用AJAX，您可以通过修改哈希后的部分来更改网址，或者更好的是，哈希棒：

window.location.hash = "#!about-us";

• http://mysite.com/
• http://mysite.com/#!about-us
• http://mysite.com/#!products

有关从SEO角度看hashbang的更多信息，请查看http://www.seomoz.org/blog/how-to-allow-google-to-crawl-ajax-content

Answer 5

Shopify如何做到呢？转到他们的网站，点击功能链接，您会看到网址显示：

http://www.shopify.com/tour/sell-online

然后单击任何子链接，您将看到URl中的地址在不使用哈希的情况下发生更改，但没有页面翻转。

我不认为他们正在使用ajax来更改内容，因为它似乎都包含在页面上的隐藏div中，但无论如何，您显然可以使用客户端技巧更改URL。