Change address bar url without refreshing page

Question

I am developing an application where a form with a series of <select> send information to a chart loaded via AJAX.

I would like these filters to reflect in the browser url, to make it easier for the user to prefer the most used filter.

<script type="text/javascript">

    // MyChart("tipo do gráfico", "nome interno grafico", "widht", "heigth", "transparência")   
    var chart = new MyChart("Charts/tipo_do_grafico.swf", "MyChart", "100%", "700", "0");

    var refreshChart = function(){
        var urlParam = $("#filterForm").serialize();
        location.href = "#?" + urlParam;                    
        chart.setDataURL("rota/aplicacao/condicao1/condicao2?" + urlParam);
    };

    refreshChart();
    chart.render("divChart");

    $('#filterForm').change(refreshChart);

</script>

With this code I was able to pass the values that are sent via query string (GET) of the form at the url, passing a # not to refresh the page (removed of that answer).

location.href = "#?" + urlParam; 

But how I use a route system in my application, (rota/condicao1/condicao2) some conditions stay in the URL and change them in the location.href my page is updated.

---

Is there any way to change only the address bar URL via javascript, without updating the page?

If possible something that works in Internet Explorer.

Answer 1

With HTML5 you can use

window.history.pushState("object or string", "Title", "/new-url");

Read this article for more details: HTML5: Changing the browser-URL without Refreshing page