บทที่ 5 Auto Refresh เหตุผลสำคัญในการเลือกใช้ AJAX

เหตุผลแรกๆ ในการเลือก AJAX ไปใช้งานก็คือ Auto Refresh นี่แหละ วิธีการของ Auto refresh ก็คือการอัปเดทข้อมูลบนเพจโดยอัตโนมัติตามระยะเวลาที่กำหนด โดยการกำหนดให้เว็บเพจกลับไปร้องขอข้อมูลจาก Server ใหม่ เป็นระยะๆ เพื่อให้ข้อมูลบนเพจมีความทันสมัยอยู่ตลอดเวลา

AJAX ทำงานนี้ได้ดี เนื่องจากเราสามารถร้องขอเฉพาะข้อมูลดิบ จาก Server ได้โดยที่ไม่จำเป็นต้องส่งข้อมูลมาทั้งหน้า แล้วเราก็ใช้ Javascript ในการแยกข้อมูล รวมถึงการจัดรูปแบบไปจนถึงการแสดงผล (เราอาจใช้ข้อมูลชนิด XML หรือ JSON หรือข้อมูลอื่นใดในส่วนนี้ก็ได้) จากการที่ข้อมูลมีขนาดที่เล็กลง ทำให้เวลาในการส่งข้อมูลน้อยลงตามไปด้วย ส่งผลดีต่อ Server โดยเป็นการลดภาระของ Server ลงและทำให้ระบบเร็วขึ้น นอกจากนี้ หากเราจัดการส่งข้อมูลให้ดี โดยการ ส่งเฉพาะข้อมูลที่มีการเปลี่ยนแปลง หรือ ออกแบบให้ข้อมูลมีขนาดเล็กที่สุดหรือเลือกใช้แคชในการพักข้อมูล ก็จะทำให้ระบบโดยรวมเร็วขึ้นได้อีกด้วย (ต้องเขียนระบบควบคุม เอาเอง หรือ เลือกวิธีในการจัดการข้อมูลให้เหมาะสม)

อย่างไรก็ตาม Auto Refresh ก็ยังคงเป็น ภาระกับ Server ค่อนข้างมากอยู่ดี เนื่องจากหากมีการเข้าใช้ของ User พร้อมกันหลายๆ คนก็อาจเป็นการเพิ่มภาระให้กับ Server ได้ ดังนั้นในการใช้งานเราจึงควรเลือกใช้งานกับเฉพาะส่วนที่มีความจำเป็น รวมถึงการออกแบบควรออกแบบให้ข้อมูลที่จะรับ-ส่งมีขนาดเล็กที่สุดด้วย และเลือกเวลาที่จะให้มีการอัปเดทที่เหมาะสมกับแต่ละเนื้อหาและความจำเป็นด้วย

วิธีการในการออกแบบ Auto Refresh ก็ไม่มีอะไรยุ่งยาก เพียงแต่เขียนโค้ด เรียกใช้งาน AJAX ตามปกติ แต่ให้เพิ่มในส่วนของ Timer เข้าไป เพื่อให้ เมื่อครบกำหนดเวลา ให้ Timer ไปเรียก AJAX มาทำงานโดยอัตโนมัติสำหรับครั้งต่อไปทันที

// ฟังก์ชั่นเรียกใช้งาน Ajax

function Inint_AJAX() {

  try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) {}

  try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {}

  try { return new XMLHttpRequest(); } catch(e) {}

  alert("XMLHttpRequest not supported")

  return null

}

ฟังก์ชั่นด้านบนคงได้เห็นกันบ่อยๆแล้ว เป็นฟังก์ชั่นสำหรับการเรียกใช้งาน Ajax ที่รองรับการใช้งานทุกบราวเซอร์ (Cross Browser)

// ฟังก์ชั่น อ่านเวลาจาก Server แบบ Realtime เป็นวินาที

function doAutoRefresh() {

  var req = Inint_AJAX();

  // Ajax ส่งค่าไปสอบถามเวลาจาก Server ที่ไฟล์ time.php

  req.open("POST", 'time.php?' + new Date().getTime(), true);

  // กำหนด ฟังก์ชั่นเพื่อส่งค่ากลับ

  req.onreadystatechange = function(){

    if (req.readyState == 4) {

      if (req.status == 200) {

        // รับค่ากลับมา และ แสดงผล

        document.getElementById("time").innerHTML = "วันนี้ : " + req.responseText;

        // Auto Refresh กลับมาอ่าน เวลาทุก 1 วินาที สำหรับรอบต่อไป

        setTimeout("doAutoRefresh()", 1000);

      }

    }

  };

  req.send(null);

};

ฟังก์ชั่น doAutoRefresh เป็นฟังก์ชั่นใช้งานของโปรเจ็คนี้ ซึ่งเมื่อเรียกใช้งานก็จะเป็นการใช้ Ajax ส่งไปร้องขอข้อมูลจาก Server ที่ time.php ซึ่งเมื่อได้รับข้อมูลกลับมาแล้ว ก็จะมีการเรียกฟังก์ชั่น setTimeout จับเวลาสำหรับการเรียก doAutoRefresh ในครั้งถัดไป (1000 คือ หนึ่งพันมิลลิวินาที หรือ 1 วินาที)

<body onload="doAutoRefresh()">

  <div id="time"></div>

</body>

โค้ดส่วน HTML ก็มีแค่นี้แหละครับ โดยเมื่อมีการโหลดเว็บเสร็จ ก็จะไปเรียกการทำงาน ฟังก์ชั่น doAutoRefresh ในรอบแรก และรับผลลัพท์กลับมาแสดงผลที่ #time หลังจากนั้นก็จะเป็นการทำงานภายในของฟังก์ชั่น doAutoRefresh เองในการทำงานรอบถัดไปดังที่ได้อธิบายไปแล้ว

สำหรับโค้ด time.php ตัวอย่างนี้มีแค่การอ่านเวลาจาก Server ด้วยฟังก์ชั่นของ PHP เพื่อส่งกลับไปยัง Ajax เท่านั้น

// คืนค่าเวลาจาก Server กลับไป

echo date('d M Y H:i:s');

ในการใช้งานจริงเราอาจเปลี่ยนหน้า time.php ให้เป็นหน้าอื่นที่ต้องการอ่านหน้าใดๆก็ได้ เช่นการอ่านรายชื่อเพลงที่กำลังเล่น หรือ อ่านข้อมูลที่อัปเดทล่าสุดของฐานข้อมูลมาแสดงก็ได้ แล้วแ่ต่ความต้องการเลยครับ

ตัวอย่าง

สามารถคลิกขวาที่กรอบด้านบน แล้วเลือก ดูรหัสต้นฉบับของเฟรม เพื่อดูซอร์สโค้ดแบบเต็มๆของตัวอย่างได้