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

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

And a sub menu

还有一个子菜单

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

But i want http://mysite.com/index.php to process every request, and just change the content using Ajax request. This way, the site only loads the content part, and is much faster and easy to navigate.

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

The problem here is SEO, because the only URL google will see is http://mysite.com/index.php and I would like to associate http://mysite.com/about-us to the About Us content, http://mysite.com/product to the Products content, etc.

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

I know I can do this with PHP just reading the URL and writing the Ajax on the fly, but doing so the whole page is going to be reloaded every time. Is there a way to do this without reloading the whole page? What I think I need is to have a regular anchor in the submenu, for exampel pointing to "http://mysite.com/contact-us" but when clicked, instead of opening this page, process the Ajax request.

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

And if this is possible, Google is going to see this as black hat probably, right?

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

Regards Alex

关心亚历克斯

5 个解决方案

#1

you can't change the URL in the address bar without changing the page because to be able to do that I couldlet you visit me at http://www.imhackingyou.com/sucker but change the addressbar to read http://www.bankofamerica.com/login

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

#2

This is a routing issue, not an AJAX issue.

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

If you were using another tool (cough ASP.NET MVC cough), you'd just add a route (and I'm hopeful there's a way to do this in PHP) that accepted URLS like

如果您正在使用其他工具（咳嗽ASP.NET MVC咳嗽），您只需添加一条路径（我希望有一种方法可以在PHP中执行此操作）接受URLS

/home
/products
...

and routed them to, say,

然后把它们送到，比方说，

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

This is typically accomplished with a rewrite engine when used outside of a good MVC or RESTful URL system. I use ISAPI Rewrite on IIS, but if you're working on the LAMP stack, I think Apache provides a module that provides the same capabilities. (Google .htaccess )

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

WARNING: RANT FOLLOWS

警告：匆匆跟进

And, for what it's worth,

并且，为了它的价值，

Avoid trying to write your entire application in JavaScript. The server's there for a reason. Part of your job as a web developer is to absorb as much of the work onto your server as possible. Browser performance and compatibility issues will drive you mad when you try to do everything on the client.

避免尝试用JavaScript编写整个应用程序。服务器的存在是有原因的。作为Web开发人员，您的部分工作是尽可能多地将工作吸收到服务器上。当您尝试在客户端上执行所有操作时，浏览器性能和兼容性问题会让您发疯。
Avoiding postbacks makes sense in a lot of circumstances, but it's not a silver bullet that you should try to apply to every page. Usually it makes sense to load a new page when a link is clicked. It's what the user expects, it's more stable (since most of the infrastructure required is server-side) and it's not slower than an AJAX request to retrieve the same thing.

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

Rules:

规则：

NEVER break the back button. Without careful planning, most AJAX apps break this rule.
永远不要打破后退按钮。如果不仔细规划，大多数AJAX应用都会破坏这一规则。
See rule #1.
参见规则＃1。

#3

HERE THERE IS A SOLUTION:

这里有一个解决方案：

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

Here Rob explains how it works, and you have a working example:

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

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

#4

This sounds like it should be accomplished with a rewrite engine, but assuming that you have a good reason to use AJAX, you can change urls with javascript by modifying the portion after the hash, or better yet, the hashbang:

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

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

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

For more info on the hashbang from an SEO perspective, check out http://www.seomoz.org/blog/how-to-allow-google-to-crawl-ajax-content

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

#5

How does Shopify do it then? Go to their website, click on the Features link and you'll see the URL says:

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

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

Then click on any of the sub links and you'll see that the address in the URl changes without using a hash but there is no page flip.

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

I don't think they are using ajax to change the content because it all appears to be included in hidden divs on the page, but regardless, you can apparently change the URL using client side tricks.

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

#1

#2