วิธีเปลี่ยน URL โดยที่ไม่ต้องรีเฟรสเบราว์เซอร์เป็นอีกลูกเล่นหนึ่งที่กำลังเป็นที่นิยมของเว็บไซต์จำนวนมากในปัจจุบัน ซึ่งใช้ร่วมกับ Ajax ที่สามารถอัพเดทเนื้อหาของหน้าเว็บโดยที่ไม่ต้องรีเฟรสเบราร์เซอร์ ทำให้เว็บของเราแสดงเนื้อหาให้กับผู้ใช้ได้เร็วขึ้น เพราะโหลดเฉพาะเนื้อหาที่มีการอัพเดทเท่านั้น (ส่วน header, sidebar และ footer ไม่จำเป็นต้องโหลดใหม่) แถมยังทำให้ URL ที่แสดงเปลี่ยนไปเป็นลิงค์ที่ผู้ใช้คลิกได้อีกด้วย แหล่มมั๊ยล่ะ ^^
[imooh_google_ads]
ในบทความนี้จะใช้ประโยชน์จาก History API ของ HTML5 ซึ่งมีฟังก์ชัน replaceState() เป็นพระเอก เดี๋ยวผมจะทำเป็นตัวอย่างง่ายให้ดูไปด้วยครับ เพื่อให้เพื่อนๆ สามารถนำไปประยุกต์ใช้ได้ด้วย ก่อนอื่นก็สร้างไฟล์ index.html ขึ้นมาก่อนครับ
1. ไฟล์ index.html มี 2 ส่วน คือ sidebar และ content ครับ
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Home</title>
<style type="text/css" media="all">
#wrapper{
width: 960px;
margin: 0px auto;
}
#sidebar{
width: 200px;
display:inline-block;
}
#content{
width:700px;
display:inline-block;
}
</style>
<!-- โหลด jQuery จาก CDN ของ Google -->
<script charset="utf-8" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="wrapper">
<div id="sidebar">
<ol>
<li><a href="page1.html">Page 1</a></li>
<li><a href="page2.html">Page 2</a></li>
<li><a href="page3.html">Page 3</a></li>
</ol>
</div>
<!-- div ที่ต้องการอัพเดทเนื้อหาด้วย Ajax -->
<div id="content">
<h1>Home</h1>
<p>Home Content</p>
</div>
</div>
<script>
$(function(){
/* เพิ่มฟังก์ชันที่จะเรียก Ajax เมื่อมีการคลิกลิงค์ที่อยู่ภายใต้ div ที่มี id="sidebar" */
$('#sidebar').delegate('a', 'click', function(e){
e.preventDefault();
var link = this.href;
/* ดึงเนื้อหาจากลิงค์ด้วย Ajax เมื่อผู้ใช้กดลิงค์ */
$.get(link, function(res){
/* อัพเดทเนื้อหาที่ได้จาก Ajax ไปที่ div ที่มี id="content" */
$('#content').html(res);
/* หลังจากอัพเดทเนื้อหาเสร็จ เปลี่ยน URL ของเบราว์เซอร์ */
window.history.replaceState(null, null, link);
});
});
});
</script>
</body>
</html>
2. สร้างไฟล์ page1.html, page2.html, page3.html ที่เราจะลิงค์ไปหาครับ
//page1.html
<h1>Page 1</h1>
<p>Page content 1</p>
//page2.html
<h1>Page 2</h1>
<p>Page content 2</p>
//page3.html
<h1>Page 3</h1>
<p>Page content 3</p>
เท่านี้เราก็สามารถอัพเดทเนื้อหาและเปล่ียน URL ของเบราว์เซอร์ โดยที่ไม่ต้องรีเฟรสเบราว์เซอร์ได้แล้วครับ ส่วนข้อจำกัดของการใช้ฟังก์ชัน replaceState() คือ เราจะไม่สามารถกดปุ่มย้อนกลับ (Back) ของเบราว์เซอร์ได้นะครับ ^^