หน้าแรก
 การบ้าน
  C/C++ new
  Java new
 Sourcecode.TV
  Android
  Blackberry
  C/C++
  Java
  Linux
  Windows Phone
  แจ้งเรื่องที่ต้องการ
 บทความ
  .NET
  Android
  Blackberry
  C++Builder
  Delphi
  Java
  Mobile
  Open Source
  Pocket PC
  Visual Basic
  Web
  Windows Phone
  Others
 แบบเรียนฟรี
  ASP
  ASP.NET Webmatrix
  C++
  eVB
  J2ME
  Java
  PHP
 ซอร์สโค้ด
  Android
  ASP
  C++
  VC++
  CGI-Perl
  Delphi
  Java
  jQuery
  PHP
  Visual Basic
  .NET
 บริการจากเรา
  เปิดท้าย... ขายโค้ด
  DoodeeHosting
  รับออกแบบ พัฒนาเว็บไซต์
  Freeware
  อัตราค่าโฆษณา
  รายชื่อลูกค้า
  สถิติผู้เข้าเว็บ
 ดาว์นโหลด
 ค้นหาข้อมูล
 กระดานสนทนา
  .NET
  C/C++
  Delphi
  Java
  Palm/PocketPC
  Visual Basic
  Web
  อื่นๆ
 กระดานงาน
 ลิงค์เว็บ
 เกี่ยวกับผม
 อัตราค่าโฆษณา
Social Network

Facebook  Twitter  YouTube
 New Article
 Webboard
 Freelanceboard
Freeware
โปรแกรมเบอร์ดี (BerDee)
โปรแกรมเบอร์ดี (Android)
เกมส์เป่ายิ้งฉุบ
เกมส์เป่ายิ้งฉุบ(Android)
WebcamMonitor
WebcamMonitor(Windows)
scSendMail
scSendMail(Windows)
MSN Caption
MSN Caption(Windows)
  Freelance comment
  ติดต่อสอบถามมาได้ตลอดนะครับ...
2015-07-29 13:35:58
  ถ้าผมต้องการเว็บที่พัฒนาด้วย HTML5 ...
2015-01-18 15:33:54
  ถ้าผมต้องการเว็บที่พัฒนาด้วย HTML5 ...
2015-01-18 15:32:51
  ติดต่อสอบถามเข้ามาได้นะคับ
งานเล...

2014-01-06 12:47:38
  ถ้ายังหาคนสอนไม่ได้ ก็ลองศึกษาเองได...
2013-07-06 01:04:37
  สนใจส่งขอบเขตมาคุยราคาก่อนได้นะคับ...
2013-03-24 18:54:20
  ถ้ายังไม่มีคนรับงานติดต่อได้ครับ 08...
2012-12-16 19:18:14
  สนใจคะ ติดต่อ 0905076277...
2012-11-12 11:07:46
  รับทำโปรเจ็คนักศึกษาหรือบริษัท
ส...

2012-10-29 03:10:46
  sukit_te34@hotmail.com...
2012-10-29 03:09:36
  Webboard comment
  ถ้าเขียน php ก็ใช้ curl ส่...
2017-04-20 01:04:20
  เขียนโค้ดไม่เป็น เอาโค้ดไป ...
2017-03-27 12:50:54
  คือสงสัยว่าทำไม ต้องอัพเดทด...
2017-03-27 12:37:20
  ทดสอบการตอบ...
2017-02-22 13:10:24
  ลองอีกวิธีเขียน recursive f...
2017-02-14 13:11:03
  อยากได้ โค้ดระบบห้องสมุดมาก...
2017-01-30 11:45:28
  ทำ for-loop ซ้อนกัน
โดย...

2017-01-28 16:00:12
  เดาว่าใช้ Stack เข้ามาช่วย...
2017-01-28 15:57:09
  ยืมเสร็จแล้ว ก็เอามาคืนด้วย...
2016-10-27 14:56:42
  ยืมโค้ดหน่อยครับ...
2016-10-27 14:49:44
  Homework comment
  ทำเอง งง เอง กะลังทำใหม่ค่ะ ^^...
2017-04-18 18:40:46
  ทำเอง งง เอง กะลังทำใหม่ค่ะ ^^...
2017-04-18 18:37:54
  ประเด็นแรก flowchart มันไม่มีภ...
2017-04-18 17:43:33
  อยากได้ flowchart ค่ะ เป็นภาษา...
2017-04-18 16:25:29
  kungking คำถามคืออะไรครับ ?...
2017-03-18 23:28:36
  จงเขียนโปรแกรมแสดงผลรวมของตัวเ...
2017-03-06 10:56:25
  ก็โค้ดทำงานคล้ายๆแบบนี้หละ แต่...
2016-09-06 01:00:12
  ผมอยากทราบว่าโค้ดนับถอยหลังเป็...
2016-09-05 09:31:27
  ได้โค้ดแล้ว ลองศึกษาแล้วเขียนผ...
2016-04-22 00:47:49
  ขอแผนผังของโปรแกรมนับตัวอักษรภ...
2016-04-21 19:24:55
  Article comment
  ครับ คุณ "ติด" แล้วลองนึกต่อว่...
2016-06-18 15:21:09
  vs2008 c# ครับ ขอบคุณครับ...
2016-06-17 14:39:30
  ผมใช้ vs c# ทำตามทุขั้นตอนแต่ต...
2016-06-17 14:37:44
  ต้องวิเคราะห์ครับ "ว่าจริงๆ ส่...
2016-03-12 23:36:05
  ผมส่งข้อความในวง LAN ได้เฉพาะค...
2016-03-12 18:25:42
  โปรแกรม Terminal บน Mac ก็เป็น...
2016-02-16 11:02:01
  โปรแกรม Terminal คืออะไรหรอคะ...
2016-02-16 05:58:21
  ไปตั้ง โครงการไว้เลยครับ ที่
2016-01-25 13:29:55
  ด่วน!!! ต้องการคนเขียน App โดย...
2016-01-25 10:56:34
  ผมได้ทำตามคำแนะนำจนสิ้นสุดแล้ว...
2016-01-20 23:30:25
  9Mcode comment
  อยากได้...
2014-02-21 08:52:19

Link Exchange

อัตราค่าโฆษณา
Statistics of Sourcecode in Thailand
 
เริ่มต้น Ajax ด้วยการสร้างนาฬิกา (อ่าน 12,587)
ศุภกิจ ทองดี (9'M) บทความโดย: นาย ศุภกิจ ทองดี (9'M)
e-mail: webmaster@sourcecode.in.th
mobile: 09-5009-5351
Line: suppakit.thongdee
Youtube: 9Mcode
Fanpage: Sourcecode.in.th
   
: ดาว์นโหลดตัวอย่างโปรแกรม (ดาว์นโหลด 833 ครั้ง)

- - - - - - - - - - - - - - ผู้ให้การสนับสนุน- - - - - - - - - - - - - -

 
 
Freelanceรับพัฒนาโปรแกรม และเว็บ โดย 9'M 

บทความนี้เป็นการแสดงถึงวิธีการใช้งาน 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 จะได้ผลดังรูป

Watch Ajax

 

ทิ้งทาย

สำหรับท่านที่ต้องการให้กำลังใจผู้เขียนบทความ ก็สามารถคลิกปุ่มโฆษณาต่าง ๆ ภายในเว็บนี้ เพื่อให้ผู้เขียนมีกำลังใจในการ สรรหาข้อมูล บทความดีๆมานำเสนอกันได้อีกนานๆ ก็หวังว่าคงเป็นประโยชน์ไม่มากก็น้อย สำหรับเพื่อนๆนักพัฒนาทุกท่าน แล้วพบกันใหม่กับ 9'M

: ดาว์นโหลดตัวอย่างโปรแกรม (ดาว์นโหลด 833 ครั้ง)
 

- - - - - - - - - - - - - - ผู้ให้การสนับสนุน- - - - - - - - - - - - - -

สอบถาม
  • ห้ามการโฆษณา หากต้องการติดต่อหาลูกค้า ติดต่อโฆษณาโดยตรงได้ที่ webmaster@sourcecode.in.th
  • ห้ามใช้คำหยาบและคำพูดที่ไม่เหมาะสม
  • ขอสงวนสิทธิหากตรวจพบ ข้อความที่ไม่เหมาะสม ข้อความนั้นจะถูกลบทันที
ชื่อ
อีเมล์
รายละเอียด

 
 
สายต่อจอ สำหรับเครื่อง macbook pro 2016 (usb-c to HDMI)
สายต่อจอ สำหรับเครื่อง macbook pro 2016 (usb-c to HDMI) ความละเอียดระดับ 4K
หัวแปลง Mini DisplayPort to HDMI Adapter หัวแปลง Mini DisplayPort to HDMI Adapter สำหรับเครื่อง macbook air/pro, mac mini
หัวแปลง Mini DisplayPort to HDMI Adapter สำหรับเครื่อง macbook air/pro, mac mini
สายต่อหูฟัง และชาร์จไฟ สำหรับ iPhone 7 และ 7 Plus
สายต่อหูฟัง และชาร์จไฟ สำหรับ iPhone 7 และ 7 Plus
หัวแปลงจาก USB-C Type ไปเป็น USB 3.1 สำหรับ MacBook
หัวแปลงจาก USB-C Type ไปเป็น USB 3.1 สำหรับ MacBook
ไขควงสำหรับเครื่อง Macbook Air/Pro
ไขควง สำหรับแกะเครื่อง Macbook Air/Pro (300บาท)
HDMI เข้า 3 ออก  1 มีรีโมท
HDMI เข้า 3 ออก 1 มีรีโมท (350บาท)
คลิปสอนเขียนโปรแกรม
เรียนเขียนโปรแกรมดอทเน็ต
เรียนเขียนโปรแกรมแอนดรอยด์
เรียนเขียนโปรแกรมเบล็คเบอร์รี่
เรียนเขียนโปรแกรมซี ซีพลัสพลัส
เรียนเขียนโปรแกรมจาวา
เรียนการใช้งานลินุกส์
เรียนการเขียนโปรแกรมวินโดว์โฟน
เรียนการเขียนโปรแกรมพีเฮชพี มายเอสคิวเอล
9M Blog บอกเล่าเรื่องราว การเขียนโปรแกรมของ นายเอ็ม
บริการ ถ่ายภาพรับปริญญา
OrmSin.com: ขายหนังสืองานฝีมือไทย-ญี่ปุ่น-จีน (country crafts)
อัตราค่าโฆษณา
 
บทความที่เกี่ยวข้อง

เริ่มต้นพัฒนาเว็บ PHP ด้วย XAMPP

แสดง Drive ของฝั่ง Client ด้วย JavaScript

เลือก Download รูปภาพด้วย ADODB Stream

Downlod หน้าเว็บ ของเว็บอื่น ด้วย ASP

Upload File ด้วย PHP

สร้างภาพ Jpeg แบบ Dynamic ด้วย PHP

แสดงรายชื่อ Folder และ File ฝั่ง Server ด้วย ASP

ติดตั้ง PHP 4 บน WINDOWS 9X, Me และ NT(IIS2 และ IIS3)

เทคนิคการเปลี่ยนใช้ภาษาไทยกับ Dreamweaver

ติดตั้ง PHP 4 บน WINDOWS 2000
Tutorial
eVB Tutorial
ASP.NET Webmatrix Tutorial
J2ME Tutorial
C++  Tutorial
Java  Tutorial
PHP Tutorial
ASP Tutorial
 
แบบสำรวจ
Freelance รับพัฒนาโปรแกรม

Home - Article - Tutorial - Sourcecode - Dev Handbook - Search - WebBoard - Links - About Us

สงวนลิขสิทธิ์ ห้ามคัดลอก ทำซ้ำ แก้ไข ดัดแปลง ไม่ว่าในรูปแบบใด โดยไม่ได้รับอนุญาตเป็นลายลักษณ์อักษร
เลขทะเบียนพาณิชย์อิเล็กทรอนิกส์จากกระทรวงพาณิชย์: 7100503002000
Copyright 2001 SourceCode.in.th