การใช้งาน AJAX ในการบันทึกข้อมูลลงฐานข้อมูล โดยไม่ต้อง Refresh

AJAX สามารถ ทำการบันทึกข้อมูลได้ทันที โดยที่ไม่ต้องทำการ submit หน้าก่อน จากตัวอย่าง จะเป็นการบันทึกข้อมูลทันทีที่มีการคลิกเลือก checkbox (สร้างฐานข้อมูลก่อนการทดสอบด้วยครับ)

<?

  //ค่ากำหนดของ ฐานข้อมูล

  $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 ต้องสร้างฐานข้อมูลนี้ก่อนการทดสอบตัวอย่างนะครับ