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
• 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, right?

Regards Alex

Solution 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

Solution 2

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

Solution 3

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.

Solution 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:

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

View more solutions

Comments

[Matt Ball]

You understand that Ajax doesn't automatically make things faster, right?

[ashleedawg]

Working PHP solution: echo "<script>window.history.pushState('', '', 'http://desired.url.here');</script>"; . . . (from an answer buried below.)

[s3v3n]

Exactly what I wanted to say but I couldn't find the pdf :P

[3Dave]

You can, but it's kind a slimy thing to do.

[mondi]

How can that be the right answer if it's wrong? there is a great answer below that explains how to do what that answer explains you can't!