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 เข้าไปในเพจด้วยนะครับ
ผู้เขียน goragod โพสต์เมื่อ 25 ส.ค. 2553 เปิดดู 23,138 ป้ายกำกับ GAJAXAJAXJavascript
^