บทความนี้เป็นการแสดงถึงวิธีการใช้งาน Ajax ไปเรียกเอาค่าเวลาบนเครื่อง เซิร์ฟเวอร์ กลับมาแสดงผลบนหน้าเว็บ ซึ่งการทำงานจะประกอบด้วย ไฟล์ 2 ไฟล์คือ display.php และ getcurtime.php โดยไฟล์แรก จะทำหน้าที่สร้างการติดต่อไปยังไฟล์ getcurtime.php เพื่อจะนำค่าเวลาที่ได้ มาแสดงผล ส่วนไฟล์ getcurtime.php จะทำหน้าที่ดึงค่าของเวลาปัจจุบันขึ้นมาจากเครื่อง เซิร์ฟเวอร์
display.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Watch 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 = "getcurtime.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> |
คุณจะสังเกตุได้ว่า การทำงานของโค้ดในส่วนของ Javascript จะเป็นการสร้าง คอมโพเน้น เพื่อใช้งานขึ้นมา โดยจะสร้างตัวใดได้นั้น ขึ้นอยู่กับว่า webbrowser ที่เรียกใช้หน้าเว็บนี้รองรับ คอมโพเน้นตัวไหน ระหว่าง Msxml2.XMLHTTP และ Microsoft.XMLHTTP
จากนั้นก็จะนำ ออปเจ็ค ที่ได้สร้างขึ้นมาจากคอมโพเน้น ข้างต้น มาเรียกใช้งาน ซึ่งในตัวอย่าง จะอยู่ใน function doStart() โดยฟังก์ชั่นนี้ ก็จะทำหน้าที่ ไปดึงเอาข้อมูลที่เป็นผลของการทำงานของไฟล์ getcurtime.php มาใช้งาน และเมื่อการดึงข้อมูลสำเร็จ จะมีการเรียกใช้ function startCallback() เพื่อตรวจสอบผลการดึงข้อมูล และทำการแสดงผลลงใน แท็ก div ที่ชื่อ time สุดท้ายจะเป็นการสั่งตั้งเวลาเรียกใช้งาน function doStart() อีกครั้งในทุกๆ 1 วินาที (1000 ms) ทำให้เกิดการทำงานวนไปเรื่อยๆ
getcurtime.php
<?php
//Get Time
$mtime=date("H:i:s");
//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 "$mtime";
?> |
ในส่วนของไฟล์ getcurtime.php จะเป็นแค่การดึงค่าเวลาจากเครื่องเซิร์ฟเวอร์ และมีการกำหนดค่า เฮดเดอร์ให้กับ html เพื่อให้ webbrowser ได้รู้ว่าข้อมูลที่ได้รับ เป็นข้อมูลที่มีการเปลี่ยนแปลง ไม่ควรทำการ cache ข้อมูลไว้
การใช้งานก็เพียงนำไฟล์ทั้งไปวางไว้ใน web root และเรียกใช้งานผ่านไฟล์ display.php จะได้ผลดังรูป
ทิ้งทาย
สำหรับท่านที่ต้องการให้กำลังใจผู้เขียนบทความ ก็สามารถคลิกปุ่มโฆษณาต่าง ๆ ภายในเว็บนี้ เพื่อให้ผู้เขียนมีกำลังใจในการ สรรหาข้อมูล บทความดีๆมานำเสนอกันได้อีกนานๆ ก็หวังว่าคงเป็นประโยชน์ไม่มากก็น้อย สำหรับเพื่อนๆนักพัฒนาทุกท่าน แล้วพบกันใหม่กับ 9'M |
New Article
อัตราค่าโฆษณา
เริ่มต้น Ajax ด้วยการสร้างนาฬิกา
(อ่าน 14,979)
: ดาว์นโหลดตัวอย่างโปรแกรม
รับพัฒนาโปรแกรม และเว็บ โดย 9'M
