Change The Url In The Browser Without Refreshing The Page

Lets now see hoow to change the browser URL without refreshing the page with JQuery.

I Assume That You Would Know How To Link The JQuery To You Project Or Use This,

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

I Will Call A Jquery Function To Change The URL, It Simply Changes The Browsers History So 

That The URL Will Get Changed. This Is The Simplest Method Which I Have Come Across

<script>

  // you will send the url address to this function

  function changeUrl(url){

       var title = "Your Title For The Page If You Need To";

window.history.pushState("", "title ", url);

  }

</script>

  

Some Helpfull Codes To Traveling Through History

1. To move backward through history, just do:  window.history.back();

2. To move forward through history, just do: window.history.forward();

3. To move back one page (the equivalent of calling back()): window.history.go(-1);

4. To move forward a page, just like calling forward(): window.history.go(1);

5. Similarly, you can move forward 2 pages by passing 2, and so forth.

   You can determine the number of pages in the history stack by looking at the value of the length property: var numberOfEntries = window.history.length;

6. You can read the state of the current history entry without waiting for a popstate event using the history.state property like this: var currentState = history.state;

For a complete example of AJAX web site, please see: Examples