如何在地址栏中更改网址而不重新加载页面

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，因为只有网址谷歌将看到的是http://mysite.com/index.php，我想http://mysite.com/about-us关联到关于我们内容，http://mysite.com/product到产品内容等

我知道我可以用PHP来完成这项工作，只需读取URL并即时编写Ajax，但是这样做整个页面将每次都重新加载。 有没有办法做到这一点，而无需重新加载整个页面？ 我想我需要的是在子菜单中有一个常规锚点，检查指向“http://mysite.com/contact-us”，但点击时不是打开此页面，而是处理Ajax请求。

如果这是可能的，Google可能会将此视为黑帽大概，对吧？

问候 亚历

Answer 1

你不能更改地址栏中的URL不会更改网页，因为要能做到这一点我couldlet你看我在http://www.imhackingyou.com/sucker但改变地址栏阅读http://www.bankofamerica.com/login

Answer 2

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

如果您正在使用另一种工具（咳嗽 ASP.NET MVC 咳嗽），你只需要添加一个路由（和我希望有办法在PHP中做到这一点），其接受的网址像

/home 
/products 
... 

和路由他们，说，

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

这是一个良好的MVC或REST风格的URL系统之外使用时通常与重写引擎来实现的。我在IIS上使用ISAPI Rewrite，但是如果你在LAMP堆栈上工作，我认为Apache提供了一个提供相同功能的模块。 （谷歌.htaccess）

警告：RANT FOLLOWS

而且，对于它的价值，

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

2. 在很多情况下避免回传是有道理的，但这不是你应该尝试应用到每个页面的银弹。通常，点击链接时加载新页面是有意义的。这是用户期望的，它更稳定（因为大部分基础设施都是服务器端的），并且不会比AJAX请求检索相同的东西慢。

规则：

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

Answer 3

这听起来像它应该有一个rewrite engine来完成，但假设你有一个很好的理由使用AJAX，可以通过哈希后修改部分改变与JavaScript网址，或者更好的是，该hashbang：

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 4

如何Shopify做到这一点呢？去他们的网站，点击功能链接，你会看到URL说：

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

然后在任意的子链接的点击，你会看到，在不使用的URL的地址发生变化一个哈希，但没有页面翻转。

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

Answer 5

这里有一个解决方案：

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

这里罗布解释它是如何工作的，你有一个工作的例子：

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