การใช้งาน AJAX ในการอัปเดทฐานข้อมูลในอีกรูปแบบหนึ่ง

เป็นการประยุกต์ใช้ Auto Update โดยเป็นตัวอย่างการอัปเดทการเลือก ที่นั่ง ในโรงภาพยนตร์ โดยที่เพียงแต่คลิก ที่หมายเลขที่นั่ง ก็เป็นการเลือกที่นั่งแล้ว

<?

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

  $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>

<div id=status> </div>

<table border="0" cellspacing="0" cellpadding="0">

<?

  for ($i=0; $i<$num_rows; $i++) {

    $result=mysql_fetch_array($query);

    if ($result[sel]==1) echo "<tr><td id=$result[id]><font color=red>$result[id]</font></td></tr>
";

    else echo "<tr><td id=$result[id]><a href=\"javascript:doClick('$result[id]');\">$result[id]</a></td></tr>
";

  }

?>

</table>

<?

  //ยกเลิกการติดต่อกับฐานข้อมูล

  mysql_close($connect); 

?> 

<form name=frm_send>

<input type=text name=user> <input type=text name=seat> <input type=button value=ตกลง onClick="send();">

</form>

</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(id) {

  if (frm_send.seat.value=="") frm_send.seat.value=id

  else frm_send.seat.value=frm_send.seat.value+','+id

}



function send(chk) {

  var req = Inint_AJAX();

  var user=frm_send.user.value;

  var seat= frm_send.seat.value;

  

  req.open('GET', 'save.php?user='+user+'&seat='+seat, true);

  req.onreadystatechange = function() {

    if (req.readyState==4) {

      if (req.status==200) {

        var data=req.responseText;

        //แสดง error ถ้ามี

        document.getElementById("status").innerHTML=data;

        frm_send.seat.value="";

        frm_send.user.value="";

      }

    }

  };

  req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=utf-8"); // set Header

  req.send(null);

}

</script>

หน้า seat.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";



  //ค่าที่รับมา

  $seat=$_GET["seat];

  $user=$_GET["user];

  

  //แยกออกเป็น ID ของ แต่ละที่นั่ง

  $seats=explode(",", $seat);



  //เชื่อมต่อกับ MySQL

  $connect= mysql_connect($host, $username, $password) or die("ไม่สามารถเชื่อมต่อฐานข้อมูลได้");

  $db=mysql_select_db($dbname) or die("ฐานข้อมูลไม่ถูกต้อง");

  

  //วนลูปอัปเดทข้อมูลทีละ ID

  for ($i=0; $i<count($seats); $i++) {

    //คำสั่ง SQL ให้แก้ไขข้อมูล

    $sql="UPDATE $table SET sel='1',user='$user' WHERE id='$seats[$i]'";

    //แก้ไขข้อมูล

    $query=mysql_query($sql) or die("ไม่สามารถแก้ไขฐานข้อมูลได้");

  }

  

  //ยกเลิกการติดต่อกับ MySQL

  mysql_close($connect);

?>

หน้า save.php สำหรับบันทึกข้อมูลลง db

# 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` (

  `sel` smallint(11) default '0',

  `user` text character set utf8 NOT NULL,

  `id` text character set utf8 NOT NULL

) ENGINE=MyISAM DEFAULT CHARSET=tis620;



#

# dump ตาราง `sample`

#



INSERT INTO `sample` VALUES (0, '', 'A6');

INSERT INTO `sample` VALUES (0, '', 'A5');

INSERT INTO `sample` VALUES (0, '', 'A4');

INSERT INTO `sample` VALUES (0, '', 'A3');

INSERT INTO `sample` VALUES (0, '', 'A2');

INSERT INTO `sample` VALUES (0, '', 'A1');

INSERT INTO `sample` VALUES (1, 'poo', 'A0');

INSERT INTO `sample` VALUES (0, '', 'A7');

INSERT INTO `sample` VALUES (0, '', 'A8');

INSERT INTO `sample` VALUES (0, '', 'A9');

ฐานข้อมูล mydb - ตาราง sample ทำงานอยู่บน localhost