GORAGOD.com

บทที่ 14 นาฬิกา ด้วย AJAX

การใช้งาน Auto Refresh ของ AJAX โดยการแสดงเวลาจาก Server ครับ เป็นตัวอย่างเพื่อให้เห็นภาพการร้องขอข้อมูลจาก Server ตลอดเวลา

นาฬิกานี้จะเดินแบบ Real Time โดยใช้เวลาจากฝั่ง Server ครับ ในขณะที่ นาฬิกาโดยทั่วไป จะใช้เวลาบนเครื่องของเรา โค้ดแบ่งออกเป็น 2 ไฟล์นะครับ คือ time.php และ index.php เวลาเรียกก็เรียกที่ index.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 xmlhttp

function Inint_AJAX () {
  var xmlhttp = false;
  try {
    xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  } catch(e) {
    try {
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    } catch(e) {
      xmlhttp = false;
    }
  }

  if(!xmlhttp && document.createElement){
    xmlhttp = new XMLHttpRequest();
  }
  return xmlhttp;
}

function startCallback() {
  if (xmlhttp.readyState == 4) {
    if (xmlhttp.status == 200) {
      document.getElementById("time").innerHTML=xmlhttp.responseText; //รับค่ากลับมา
      
      delete xmlhttp;
      setTimeout("doStart()", 1000);
    }
  }
}

function doStart() {
  xmlhttp = Inint_AJAX();
  var url = "time.php";
  xmlhttp.open("GET", url, true);
  xmlhttp.onreadystatechange = startCallback;
  xmlhttp.send(null);
}
</script>
</head>
<body>
<div id="time"> </div>
<script language=JavaScript>doStart();</script>

</body>
</html>

หน้า index.php หน้าหลัก และ Javascript สำหรับเรียกใช้ AJAX ไม่มีอะไรมากครับ แค่มีพื้นที่ ที่จะแสดงผลข้อมูลที่ร้องจอมาเท่านั้น

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

  //วันที่
  $mtoday=date("d ",mktime( date("H")+$hour, date("i")+$min ));
  //12:36
  $mtime=date("H:i",mktime( date("H")+$hour, date("i")+$min ));
  //03 ส.ค. 2544
  $mdate=$mtoday. $thaimonth[date("m")-1]." ".$Year;
  
  //Bust cache in the head
  header ("Expires: Mon, 26 Jul 1997 05:00:00 GMT"); // Date in the past
  header ("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
  //always modified
  header ("Cache-Control: no-cache, must-revalidate"); // HTTP/1.1
  header ("Pragma: no-cache"); // HTTP/1.0
  header("content-type: application/x-javascript; charset=tis-620");
  echo "$mdate $mtime";
?>

หน้า time.php ที่ถูก AJAX เรียก จะอ่านเวลามาแสดงครับ ในทางปฏิบัติ เราสามารถร้องขอข้อมูลอะไรจาก Server ก็ได้ครับ โดยการเปลี่ยนหน้านี้เป็นสิ่งที่ต้องการส่งมาแทน เช่นการ query ข้อมูลออกมาจากฐานข้อมูล