Mengganti Address Bar Setelah Ajax Request

Setelah melakukan ajax request, tentu saja Anda akan melihat address bar tidak berubah. Karena memang tidak ada reload halaman yang akan mengubah address bar.

Untuk dapat mengubah address bar setelah ajax request, Anda bisa menambahkan fungsi javascript ini setelah melakukan ajax request :

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

Berikut ini contoh implementasi nya pada jQuery ajax request :

$.ajax({
 "type":"get",
 "url":"http://same-site/a/b/c/",
 "success":function(html) {
  $("body").html(html);
  if("http://same-site/a/b/c" != window.location) {
    window.history.pushState({path: "http://same-site/a/b/c"}, "", "http://same-site/a/b/c/");
 });

Selanjutnya, ketika user klik back pada browser mereka, untuk sementara tidak ada aksi yang terjadi. Untuk ini kita perlu menambahkan event popstate pada window.

$(window).bind("popstate", function() {
  $.ajax({
    "type": "get",
    "url": location.pathname,
    "success": function(html) {
        $("body").html(html);
    }
  });
});