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

Question

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

还有一个子菜单

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

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

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

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

如果可能的话,谷歌可能会认为这可能是黑帽子吧？

关心亚历克斯

Answer 1

您无法在不更改页面的情况下更改地址栏中的URL,因为为了能够这样做,我可以访问http://www.imhackingyou.com/sucker,但是请将地址栏更改为http:// www .bankofamerica.com /登录

Answer 2

这是一个路由问题,而不是AJAX问题.

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

/home
/products
...

然后把它们送到了,比方说,

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

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

警告:匆匆跟进

并且,为了它的价值,

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