GAJAX บทที่ 19 Auto Refresh
ในบทนี้จะเป็นการใช้งาน GAJAX ในความสามารถด้าน Auto Refresh โดยในตัวอย่างแรกจะเป็นการอ่านเวลาจาก Server ด้วย Ajax ซึ่งก็เป็นการอ่านแบบพื้นฐานทั่วไป และ ในแบบที่ 2 จะเป็นการใช้งาน Auto Refresh โดยมีการส่งค่าไปด้วย
พารามิเตอร์ตัวแรก time.php คือไฟล์ที่เรียกไปเพื่ออ่านเวลา
พารามิเตอร์ตัวที่ 2 คือ เลข 1 หมายถึงอัปเดททุก 1 วินาที (เนื่องจากต้องการให้เห็นการเปลี่ยนแปลงเป็นวินาทีเลยเลือกใช้ค่าต่ำสุดเพื่อให้เห็นการเปลี่ยนแปลงชัดเจน)
พารามิเตอร์ตัวที่ 3 ปกติจะเป็นฟังก์ชั่นเพื่อจัดการค่าที่ส่งไป ในกรณีนี้ ใช้ค่า null เนื่องจากไม่ต้องส่งค่าใดๆไป
พารามิเตอร์ตัวที่ 4 ฟังก์ชั่นรับค่ากลับ ซึ่งจะรับค่าเวลาที่ส่งกลับมาเพื่อแสดงผล
ส่วนโค้ด time.php ด้านล่าง ซึ่งจะอ่านค่าเวลาจาก Server แล้วแปลงเป็นวันที่ภาษาไทยก่อนส่งกลับ
ถ้าจะทดสอบอย่าลืม include GAJAX เข้าไปในเพจด้วยนะครับ
<div id="time_demo"> </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 เข้าไปในเพจด้วยนะครับ