php 如何在不重新加载页面的情况下更改地址栏中的 url
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4475367/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
how to change url at address bar without reloading the page
提问by Alex Angelico
I have http://mysite.com/index.php.
我有http://mysite.com/index.php。
And a sub menu
和一个子菜单
- home => http://mysite.com/index.php
- about us => http://mysite.com/about.us.php
- products => http://mysite.com/products.php
- 主页 => http://mysite.com/index.php
- 关于我们 => http://mysite.com/about.us.php
- 产品 => http://mysite.com/products.php
But i want http://mysite.com/index.phpto 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.phpand I would like to associate http://mysite.com/about-usto the About Uscontent, http://mysite.com/productto the Productscontent, etc.
这里的问题是 SEO，因为 google 将看到的唯一 URL 是http://mysite.com/index.php，我想将http://mysite.com/about-us与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
问候亚历克斯
采纳答案by FatherStorm
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/suckerbut change the addressbar to read http://www.bankofamerica.com/login
您不能在不更改页面的情况下更改地址栏中的 URL，因为为了能够做到这一点，我可以让您访问我在http://www.imhackingyou.com/sucker但将地址栏更改为http://www .bankofamerica.com/login
回答by 3Dave
This is a routing issue, not an AJAX issue.
这是路由问题，而不是 AJAX 问题。
If you were using another tool (coughASP.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咳），您只需添加一个接受 URL 的路由（我希望有一种方法可以在 PHP 中执行此操作），例如
/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 Rewriteon 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 重写，但如果您正在处理 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.
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.
避免尝试用 JavaScript 编写整个应用程序。服务器在那里是有原因的。作为 Web 开发人员，您的部分工作是将尽可能多的工作吸收到您的服务器上。当您尝试在客户端上执行所有操作时，浏览器性能和兼容性问题会让您发疯。
在很多情况下避免回发是有意义的，但这并不是您应该尝试应用于每个页面的灵丹妙药。通常在单击链接时加载新页面是有意义的。这是用户所期望的，它更稳定（因为所需的大部分基础设施是服务器端的）并且它并不比检索相同内容的 AJAX 请求慢。
Rules:
规则：
- NEVER break the back button. Without careful planning, most AJAX apps break this rule.
- See rule #1.
- 永远不要打破后退按钮。如果没有仔细规划，大多数 AJAX 应用程序都会违反此规则。
- 见规则#1。
回答by Sebastian
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
http://moz.com/blog/create-crawlable-link-friendly-ajax-websites-using-pushstate
回答by Emmett
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，您可以通过修改哈希后的部分或更好的哈希棒来使用 javascript 更改 url：
window.location.hash = "#!about-us";
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
回答by Julian Dormon
How does Shopify do it then? Go to their website, click on the Features link and you'll see the URL says:
那么 Shopify 如何做到这一点？转到他们的网站，单击“功能”链接，您将看到 URL 显示：
http://www.shopify.com/tour/sell-online
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。
