Ajax - How to change URL by content

Question

I'll explain: I have a picture gallery, the first page is display.php. Users can flip through pictures using arrows, when you click an arrow it sends an Ajax request to retrieve the next picture from the db. Now I want the URL to change according to the picture displayed.

So if the first picture is:
www.mydomain.com/display.php?picture=Paris at night

I'll flip to the next one and the URL would be

www.mydomain.com/display.php?picture=The Big Ben

How do I do this?

Answer 1

You can use the jQuery history plugin for example.

Answer 2

Do you really want to use AJAX here?

A traditional web request would work like this...

• User navigates to display.php
• User clicks "next" and location is updated to "display.php?picture=Big-Ben"
• Big Ben is shown to user, along with a link to "display.php?picture=Parliment"
• User clicks "next" and location is updated to "display.php?picture=Parliment"

And so on.

With AJAX, you essentially replace the GET with a "behind the scenes" GET, that just replaces a portion of your page. You would do this to make things faster... for example...

• User navigates to display.php
• User clicks "next" and the next image location is obtained using an AJAX request
• The image (and image description) is changed to the next image

What you are suggesting is that you retrieve the "next url" using AJAX and then also perform a GET on the whole page. You would be much better off sending the "next" image when you send each page and not using AJAX at all.

Answer 3

The trick here are uri's with an anchor fragment.

The part before '#' points to a resource on the internet, and after normally designates to a anchor on the page.

The browser does not refresh if the resource is the same but moves to the anchors position when present.

This way you can keep the convenience of browser history from a usability point of view while replacing certain parts on the page with ajax for a fast and responsive user interface.

Using a plugin like jQuery history (as suggested by others) is really easy: you decorate certain elements with a rel attribute by which the plugin takes care of the rest.

Also kinda related to this topic is something called 'hijax', and it's something I really like.

This means generating html just like you would in the old days before ajax. Then you hijack certain behavior like links and request the content with ajax, only replacing the necessary parts. This in combination with the above technique allows really SEO friendly and accessible webpages.

Answer 4

changing the search of the url will load the changed url.

See also: stackoverflow, javascript changing the get parameter without redirecting