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

Question

我有一个网站http://mysite.com/index.php，还有一个子菜单：

• 主页 => http://mysite.com/index.php
• 关于我们 => http://mysite.com/about.us.php
• 产品 => http://mysite.com/products.php

但是我想让http://mysite.com/index.php处理所有请求，然后使用Ajax请求仅更改内容。这样，网站只加载内容部分，速度更快，易于导航。

问题在于SEO，因为Google只能看到http://mysite.com/index.php这个URL，而我希望将http://mysite.com/about-us与“关于我们”内容相关联，将http://mysite.com/product与“产品”内容相关联，等等。

我知道可以用PHP读取URL并实时编写Ajax，但这样会重新加载整个页面。有没有不重新加载整个页面的方法呢？

我认为需要在子菜单中有一个常规锚点，例如指向“http://mysite.com/contact-us”但是当单击时，代替打开此页面，处理Ajax请求。

如果这是可能的，Google可能会认为这是黑帽子技术，对吗？

问候 Alex

- Alex Angelico

---

你知道 Ajax 并不能自动使事情变快，对吧？ - Matt Ball

zzzzBov: 你感觉还好吗？Ajax 是最新的流行词吗？ - Alex Angelico

可行的PHP解决方案：echo "<script>window.history.pushState('', '', 'http://desired.url.here');</script>";……（来自下面埋藏的答案。） - ashleedawg

Answer 1

这里有一个解决方案：

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

在这里，Rob解释了它的工作原理，并提供了一个工作示例：

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

- Sebastian

Answer 2

如果你想改变地址栏中的URL，必须同时改变页面，否则我可以让你通过http://www.imhackingyou.com/sucker来访问我，但是把地址栏改成 http://www.bankofamerica.com/login 是不可能的。

- FatherStorm

---

你可以这样做，但这种做法有点不光彩。 - 3Dave

如果它是错误的，那怎么可能是正确的答案呢？下面有一个很好的答案解释了如何做你认为不能做的事情！ - mondi

Answer 3

这是一个路由问题，而不是 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)

警告：下面是抱怨内容

并且，值得一提的是：

1. 避免尝试用JavaScript编写整个应用程序。服务器存在是有原因的。作为Web开发人员，你的工作之一就是尽可能地将工作转移到服务器上。当你试图在客户端上完成所有工作时，浏览器性能和兼容性问题会让你发疯。

2. 在许多情况下，避免postbacks是有意义的，但这不是你应该尝试应用到每个页面的万能药。通常情况下，在单击链接时加载新页面是有意义的。这是用户期望的，更稳定（因为大部分所需基础设施都在服务器端），而且不比检索相同内容的AJAX请求慢。

规则：

1. 永远不要破坏返回按钮。如果没有仔细的规划，大多数AJAX应用程序都会违反此规则。
2. 参见规则＃1。

- 3Dave

---

谢谢David，但这不是我要问的。我使用htaccess重写，主要是为了SEO目的。无论如何，我同意第1点，我发现JS+Ajax非常有用，有时候我也使用太多。但主要用于CMS，不用于访问者端。 - Alex Angelico

Answer 4

这听起来应该使用重写引擎来完成，但是假设您有充分的理由使用AJAX，您可以通过修改哈希后面的部分或者更好的方法是哈希bang来使用javascript更改URL：

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

- Emmett

---

正是我想说的，但我找不到那个PDF文件 :P - s3v3n

Answer 5

Shopify是如何做到的呢？前往他们的网站，点击“功能”链接，你会看到URL上写着：

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

然后点击任何子链接，您会发现URL中的地址更改而不使用哈希，但没有页面翻转。

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

- Julian Dormon