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

Answer 1

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 2

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.