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()%>;/"+param,
{method : "get", 
onComplete : function(xhr) { 
document.getElementById("main_of_profile_body").innerHTML = ""+ xhr.responseText;}});}
history.pushState(null, "", ""+param);

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

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

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



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s