Modify Address Bar URL in AJAX App to Match Current State

by

The way to do this is to manipulate location.hash when AJAX updates result in a state change that you’d like to have a discrete URL. For example, if your page’s url is:

http://example.com/

If a client side function executed this code:

// AJAX code to display the "foo" state goes here.

location.hash="foo";

Then, the URL displayed in the browser would be updated to:

http://example.com/#foo

This allows users to bookmark the “foo” state of the page, and use the browser history to navigate between states.

With this mechanism in place, you’ll then need to parse out the hash portion of the URL on the client side using JavaScript to create and display the appropriate initial state, as fragment identifiers (the part after the #) are not sent to the server.

Ben Alman’s hashchange plugin makes the latter a breeze if you’re using jQuery.

More Related Contents:

  1. Using jqGrid’s inline-editing with RESTful urls?
  2. Is the anchor part of a URL being sent to a web server?
  3. How to return AJAX response Text? [duplicate]
  4. When to use valueChangeListener or f:ajax listener?
  5. Capturing URL parameters in request.GET
  6. ASP.NET MVC controller actions that return JSON or partial html
  7. Problems with jQuery getJSON using local files in Chrome
  8. WebSockets protocol vs HTTP
  9. How do you scrape AJAX pages?
  10. GET vs POST in Ajax
  11. Why use AJAX when WebSockets is available?
  12. Google Chrome –allow-file-access-from-files disabled for Chrome Beta 8
  13. Why the cross-domain Ajax is a security concern?
  14. Bootstrap 3 – How to load content in modal body via AJAX?
  15. Set-Cookie on Browser with Ajax Request via CORS
  16. jQuery mobile $(document).ready equivalent
  17. Setting processData to false in jQuery breaks my AJAX request
  18. ViewExpiredException not thrown on ajax request if JSF page is protected by j_security_check
  19. Are different ports on the same server considered cross-domain? (Ajax-wise)
  20. Get HTML code using JavaScript with a URL
  21. Can you update an h:outputLabel from a p:ajax listener?
  22. Ajax Cross Domain Calls
  23. How do I encode URI parameter values?
  24. java.lang.IllegalStateException: CDATA tags may not nest
  25. Ajax response inside a div
  26. How to block external http requests? (securing AJAX calls)
  27. Ajax update and submission using h:commandButton
  28. Multiple Ajax requests for same URL
  29. REST API DESIGN – Getting a resource through REST with different parameters but same url pattern
  30. How could I change window’s location without reloading and # hack?

Leave a Comment