how to change url at address bar without reloading the page_问答_开发者

I have 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

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.

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.

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.

And if this is possible, Google is going to see this as black hat probably, r开发者_Go百科ight?

Regards Alex

HERE THERE IS A SOLUTION:

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

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

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

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

This is a routing issue, not an AJAX issue.

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

/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 )

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.

Rules:

NEVER break the back button. Without careful planning, most AJAX apps break this rule.
See rule #1.

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:

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

http://mysite.com/
http://mysite.com/#!about-us
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

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

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.

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.