A-AA+then

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

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

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

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

<?
  $hour = +0;//ปรับให้ตรงตามต้องการ ชม. เช่น เป็นค่าบวก หรือค่าลบ เพื่อให้เวลาของ server ตรงกับเวลาจริง
  $min = 0;//ปรับให้ตรงตามต้องการ นาที
  $Year = date("Y")+543;
  $thaimonth=array("มค.","กพ.","มีค.","เมย.","พค.","มิย.","กค.","สค.","กย.","ตค.", "พย.","ธค.");

  //วันที่ วันนี้
  $mtoday=date("d ",mktime( date("H")+$hour, date("i")+$min ));
  $mtime=date("H:i:s",mktime( date("H")+$hour, date("i")+$min ));
  $mdate=$mtoday. $thaimonth[date("m")-1]." ".$Year;
  
  //กำหนดให้ IE อ่าน page นี้ทุกครั้ง ไม่ไปเอาจาก cache
  header ("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
  header ("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
  header ("Cache-Control: no-cache, must-revalidate");
  header ("Pragma: no-cache");
  
  header("content-type: application/x-javascript; charset=utf-8");
  echo "$mdate $mtime";
?>

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

<!DOCTYPE HTML PUBLIC "//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>นาฬิกา ด้วย AJAX</title>
<meta http-equiv='content-type' content='text/html' charset='windows-874'>
<script language=JavaScript>

var req;

function startCallback() {
  if (req.readyState == 4) {
    if (req.status == 200) {
      document.getElementById("time").innerHTML="วันนี้ : "+req.responseText;//รับค่ากลับมา และ แสดงผล
      setTimeout("doStart()", 1000);//Auto Refresh กลับมาอ่าน เวลาทุก 1 วินาที
    }
  }
}

function doStart() {
  req = Inint_AJAX();
  var url = "time.php";
  req.open("GET", url, true);
  req.onreadystatechange = startCallback;//กำหนด ฟังก์ชั่นเพื่อส่งค่ากลับ
  req.send(null);
};

</script>

</head>
<body onload="doStart();">
<div id="time"> </div>
</body>
</html>

ตัวอย่าง

AJAX

Relate

^