เปลี่ยน URL ไม่ต้องรีเฟรส (refresh) เบราว์เซอร์ (browser) พร้อมโหลดหน้าเว็บด้วย Ajax

วิธีเปลี่ยน URL โดยที่ไม่ต้องรีเฟรสเบราว์เซอร์เป็นอีกลูกเล่นหนึ่งที่กำลังเป็นที่นิยมของเว็บไซต์จำนวนมากในปัจจุบัน ซึ่งใช้ร่วมกับ Ajax ที่สามารถอัพเดทเนื้อหาของหน้าเว็บโดยที่ไม่ต้องรีเฟรสเบราร์เซอร์ ทำให้เว็บของเราแสดงเนื้อหาให้กับผู้ใช้ได้เร็วขึ้น เพราะโหลดเฉพาะเนื้อหาที่มีการอัพเดทเท่านั้น (ส่วน header, sidebar และ footer ไม่จำเป็นต้องโหลดใหม่) แถมยังทำให้ URL ที่แสดงเปลี่ยนไปเป็นลิงค์ที่ผู้ใช้คลิกได้อีกด้วย แหล่มมั๊ยล่ะ ^^

ในบทความนี้จะใช้ประโยชน์จาก History API ของ HTML5 ซึ่งมีฟังก์ชัน replaceState() เป็นพระเอก เดี๋ยวผมจะทำเป็นตัวอย่างง่ายให้ดูไปด้วยครับ เพื่อให้เพื่อนๆ สามารถนำไปประยุกต์ใช้ได้ด้วย ก่อนอื่นก็สร้างไฟล์ index.html ขึ้นมาก่อนครับ

1. ไฟล์ index.html มี 2 ส่วน คือ sidebar และ content ครับ

โครงสร้างตัวอย่างเปลี่ยน URL แบบไม่ต้องรีเฟรสเบราว์เซอร์

<!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) ของเบราว์เซอร์ได้นะครับ ^^