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 ให้เป็นหน้าอื่นที่ต้องการอ่านหน้าใดๆก็ได้ เช่นการอ่านรายชื่อเพลงที่กำลังเล่น หรือ อ่านข้อมูลที่อัปเดทล่าสุดของฐานข้อมูลมาแสดงก็ได้ แล้วแ่ต่ความต้องการเลยครับ
[ex=ex/time1,100%,30]
สามารถคลิกขวาที่กรอบด้านบน แล้วเลือก ดูรหัสต้นฉบับของเฟรม เพื่อดูซอร์สโค้ดแบบเต็มๆของตัวอย่างได้