how to change url at address bar without reloading the page

Question

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
• pro

Answer 1

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,

1. 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.

2. 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:

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

Answer 2

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

Answer 3

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

Answer 4

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.

Answer 5

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