HTML5: changing URL without refreshing page

ใช้ object  history ของ javascript

โดยใช้ function history.pushState( data,”title”,”url”);
โดย data  ใส่อยู่ใน format ของ JSON
title ใส่เป็น String อะไรก็ได้ (ไม่สำคัญ)
url ใส่เป็น url ที่ต้องการจะต่อท้ายจาก page เดิม โดยเป็นแบบ relative

ตัวอย่าง

function toFollow(param){ 
new Ajax.Request("<%=request.getContextPath()%>;/viewFollowList.do?show="+param,
{method : "get", 
onComplete : function(xhr) { 
document.getElementById("main_of_profile_body").innerHTML = ""+ xhr.responseText;}});}
history.pushState(null, "", "viewWall.do?page="+param);

นอกจาก history.pushState แล้ว เรายังสามารถใช้ history.replaceState ได้ โดยข้อแตกต่างคือ replaceState จะทำการเปลี่ยน state ปัจจุบันทำให้ไม่สามารถกด back กลับมาได้ ส่วน pushState จะเป็นการใส่เพิ่มลงไปแทน

<script type="text/javascript">
var stateObj = { foo: "bar"};
history.replaceState(stateObj, "index", "\\");>
</script>

สำหรับ function อื่นได้แก่ history.forward() , history.back() , history.go(1), history.go(-1)

อ่านเพิ่ม https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history