GORAGOD.com

บทที่แล้วเป็นการ Auto Refresh แบบธรรมดา ในบทนี้เราจะมาดูการอ่านค่าเพื่อส่งไปกับ Auto Refresh ด้วยซึ่งสามารถอ่านค่าได้จากการกำหนดฟังก์ชั่นเพื่อทำการอ่านค่าหรือกำหนดค่าก่อนส่งไป

<input type="text" id="time_2" value="60" /> <input type="button" onclick="doTimer()" value="เริ่มนับ" />
<script type="text/javascript">
function doTimer(){
new GAjax().autoupdate( 'time3.php' , 1, function(){return 'time=' + parseFloat($E('time_2').value)}, function(xhr){
      $E('time_2').value= xhr.responseText;
});
};
</script>

 โค้ดด้านบนจะเริ่มทำงานเมื่อคลิก เริ่มนับ โดยส่งค่าใน text ไปกับ query ที่ส่ง ซึ่งถ้าตรวจ header ของค่าที่ส่งไปก็จะได้ว่า ในครั้งแรกค่าที่ส่งไปจะเป็น time=60

function(){
      return 'time=' + parseFloat( $E( 'time_2' ).value );
 }

ฟังก์ชั่นที่เห็นเป็นฟังก์ชั่นเพื่อจัดการอ่านค่าจาก text เพื่อที่จะส่งให้กับ Ajax ซึ่งจะถูกเรียกมายังฟังก์ชั่นนี้ในทุกๆครั้งที่มีการเริ่มต้นส่ง ซึ่งแตกต่างจากการอ่านเวลาจาก Server เนื่องจากการอ่านเวลาไม่ต้องส่งค่าใดๆไปทำให้เราสามารถกำหนดให้ส่ง null ไปแทนฟังก์ชั่นได้

 สำหรับโค้ดในหน้า time3.php ก็ไม่มีอะไรครับ แค่หักลบออกจากค่า time ที่ส่งไปทีละ 1 เท่านั้น และส่งค่ากลับมาเพื่อแสดงยัง text และใช้เป็นค่าอ้างอิงสำหรับส่งกลับในครั้งต่อไป

<?php
      header("content-type: text/html; charset=utf-8");
      echo (int)$_POST[time] - 1;
?>

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