บทที่ 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 ข้อมูลออกมาจากฐานข้อมูล