GAJAX บทที่ 19 Auto Refresh

ในบทนี้จะเป็นการใช้งาน GAJAX ในความสามารถด้าน Auto Refresh โดยในตัวอย่างแรกจะเป็นการอ่านเวลาจาก Server ด้วย Ajax ซึ่งก็เป็นการอ่านแบบพื้นฐานทั่วไป และ ในแบบที่ 2 จะเป็นการใช้งาน Auto Refresh โดยมีการส่งค่าไปด้วย

<div id="time_demo">&nbsp;</div>

<script type="text/javascript">

new GAjax().autoupdate( 'time.php' , 1, null , function(xhr){

    $E('time_demo').innerHTML = xhr.responseText;

});

</script>

พารามิเตอร์ตัวแรก time.php คือไฟล์ที่เรียกไปเพื่ออ่านเวลา
พารามิเตอร์ตัวที่ 2 คือ เลข 1 หมายถึงอัปเดททุก 1 วินาที (เนื่องจากต้องการให้เห็นการเปลี่ยนแปลงเป็นวินาทีเลยเลือกใช้ค่าต่ำสุดเพื่อให้เห็นการเปลี่ยนแปลงชัดเจน)
พารามิเตอร์ตัวที่ 3 ปกติจะเป็นฟังก์ชั่นเพื่อจัดการค่าที่ส่งไป ในกรณีนี้ ใช้ค่า null เนื่องจากไม่ต้องส่งค่าใดๆไป
พารามิเตอร์ตัวที่ 4 ฟังก์ชั่นรับค่ากลับ ซึ่งจะรับค่าเวลาที่ส่งกลับมาเพื่อแสดงผล

ส่วนโค้ด time.php ด้านล่าง ซึ่งจะอ่านค่าเวลาจาก Server แล้วแปลงเป็นวันที่ภาษาไทยก่อนส่งกลับ

<?php

     $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;

         

     header("content-type: text/html; charset=utf-8");

     echo "$mdate $mtime";

?>

ตัวอย่างที่ 1 นาฬิกาด้วย Ajax :

ถ้าจะทดสอบอย่าลืม include GAJAX เข้าไปในเพจด้วยนะครับ