การใช้งาน AJAX ในการบันทึกข้อมูลลงฐานข้อมูล โดยไม่ต้อง Refresh
AJAX สามารถ ทำการบันทึกข้อมูลได้ทันที โดยที่ไม่ต้องทำการ submit หน้าก่อน จากตัวอย่าง จะเป็นการบันทึกข้อมูลทันทีที่มีการคลิกเลือก checkbox (สร้างฐานข้อมูลก่อนการทดสอบด้วยครับ)
หน้า test.php หน้าหลักสำหรับทดสอบ
หน้า save.php สำหรับบันทึกข้อมูลลง db ซึ่งเป็นหน้าที่ถูก AJAX เรียกมาเมื่อคลิกที่ checkbox
ฐานข้อมูล mydb - ตาราง sample ทำงานอยู่บน localhost ต้องสร้างฐานข้อมูลนี้ก่อนการทดสอบตัวอย่างนะครับ
<?
//ค่ากำหนดของ ฐานข้อมูล
$host="localhost";
$username="root";
$password="";
$dbname="mydb";
$table="sample";
//เชื่อมต่อกับ MySQL
$connect= mysql_connect( $host, $username, $password) or die("ไม่สามารถเชื่อมต่อฐานข้อมูลได้");
$db=mysql_select_db($dbname) or die("ฐานข้อมูลไม่ถูกต้อง");
//คำสั่ง SQL ให้อ่านฐานข้อมูล
$sql="SELECT * FROM $table ORDER BY ID";
//Query ฐานข้อมูล
$query=mysql_query($sql) or die("ไม่สามารถอ่านฐานข้อมูลได้");
//จำนวนข้อมูลทั้งหมดที่อ่านได้
$num_rows=mysql_num_rows($query);
?>
<head>
<title>AJAX กับ Check box</title>
</head>
<body>
คลิกเลือก checkbox แต่ละตัว แล้วลอง Refresh ดู จะเห็นว่าค่า Checkbox ยังคงอยู่<br />
แสดงว่าข้อมูลการคลิก จัดเก็บลงฐานข้อมูลเรียบร้อยแล้ว
<div id=status> </div>
<table border="0" cellspacing="0" cellpadding="0">
<?
for ($i=0; $i<$num_rows; $i++) {
$result=mysql_fetch_array($query);
$check=($result[sel]==1) ? "checked":"";
echo "<tr><td id=topic$i>$result[topic]</td><td><input type=checkbox id=$result[id] onclick='doClick(this);' $check></td></tr> ";
}
?>
</table>
<?
//ยกเลิกการติดต่อกับฐานข้อมูล
mysql_close($connect);
?>
</body>
</html>
<script>
//AJAX สำหรับจัดการบันทึกลงฐานข้อมูล
function Inint_AJAX() {
try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) {}
try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch(e) {}
try { return new XMLHttpRequest(); } catch(e) {}
alert("XMLHttpRequest not supported");
return null;
}
//คำสั่งที่ทำเมื่อคลิก checkbox
function doClick(chk) {
var req = Inint_AJAX();
var val=(chk.checked) ? 1:0;
var id= String(chk.id);
req.open('GET', 'save.php?id='+id+'&val='+val, true);
req.onreadystatechange = function() {
if (req.readyState==4) {
if (req.status==200) {
var data=req.responseText;
//แสดง error ถ้ามี
document.getElementById("status").innerHTML=data;
}
}
};
req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8"); // set Header
req.send(null);
}
</script>
หน้า test.php หน้าหลักสำหรับทดสอบ
<?
//header ยกเลิกการใช้ cache ของ IE
header("Expires: Sat, 1 Jan 2005 00:00:00 GMT");
header("Last-Modified: ".gmdate( "D, d M Y H:i:s")."GMT");
header("Cache-Control: no-cache, must-revalidate");
header("Pragma: no-cache");
//ค่ากำหนดของฐานข้อมูล
$host="localhost";
$username="root";
$password="";
$dbname="mydb";
$table="sample";
//ค่าที่รับมา
$id=$_GET["id];
$val=$_GET["val];
//คำสั่ง SQL ให้แก้ไขข้อมูล
$sql="UPDATE $table SET sel='$val' WHERE id='$id'";
//เชื่อมต่อกับ MySQL
$connect= mysql_connect( $host, $username, $password) or die("ไม่สามารถเชื่อมต่อฐานข้อมูลได้");
$db=mysql_select_db($dbname) or die("ฐานข้อมูลไม่ถูกต้อง");
//แก้ไขข้อมูล
$query=mysql_query($sql) or die("ไม่สามารถแก้ไขฐานข้อมูลได้");
//ยกเลิกการติดต่อกับ MySQL
mysql_close($connect);
?>
หน้า save.php สำหรับบันทึกข้อมูลลง db ซึ่งเป็นหน้าที่ถูก AJAX เรียกมาเมื่อคลิกที่ checkbox
# phpMyAdmin SQL Dump
# version 2.5.7-pl1
# http://www.phpmyadmin.net
#
# โฮสต์: localhost
# เวลาในการสร้าง: 19 ก.ย. 2006 น.
# รุ่นของเซิร์ฟเวอร์: 5.0.16
# รุ่นของ PHP: 4.4.1
#
# ฐานข้อมูล : `mydb`
#
# --------------------------------------------------------
#
# โครงสร้างตาราง `sample`
#
CREATE TABLE `sample` (
`topic` text character set utf8,
`sel` smallint(11) default '0',
`id` int(11) NOT NULL auto_increment,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=tis620 AUTO_INCREMENT=25 ;
#
# dump ตาราง `sample`
#
INSERT INTO `sample` VALUES ('รายการที่ 6', 0, 0);
INSERT INTO `sample` VALUES ('รายการที่ 5', 0, 1);
INSERT INTO `sample` VALUES ('รายการที่ 4', 0, 2);
INSERT INTO `sample` VALUES ('รายการที่ 3', 0, 3);
INSERT INTO `sample` VALUES ('รายการที่ 2', 1, 4);
INSERT INTO `sample` VALUES ('รายการที่ 1', 0, 5);
INSERT INTO `sample` VALUES ('รายการที่ 0', 0, 6);
INSERT INTO `sample` VALUES ('รายการที่ 7', 0, 7);
INSERT INTO `sample` VALUES ('รายการที่ 8', 0, 8);
INSERT INTO `sample` VALUES ('รายการที่ 9', 0, 9);
ฐานข้อมูล mydb - ตาราง sample ทำงานอยู่บน localhost ต้องสร้างฐานข้อมูลนี้ก่อนการทดสอบตัวอย่างนะครับ