AJAX Database
AJAX สามารถใช้การสื่อสารแบบปฏิสัมพันธ์กับฐานข้อมูล
ตัวอย่าง AJAX Database
ตัวอย่างนี้จะสาธิต การ fetch สารสนเทศของเว็บเพจจากฐานข้อมูลด้วย AJAX
ตัวอย่าง
อธิบายตัวอย่าง - ฐานข้อมูล MySQL
ตารางข้อมูลของฐานข้อมูลจะมีลักษณะนี้
| id |
FirstName |
LastNam |
Age |
Hometown |
Job |
| 1 |
Wiwat |
Pongprai |
31 |
Kanjanaburi |
Tailor |
| 2 |
Kamon |
Pengsa |
35 |
Chiengmai |
Farmer |
| 3 |
Amphon |
Taideang |
29 |
Ayuthaya |
Teacher |
| 4 |
Wanphen |
Duangmenee |
35 |
Supanburi |
Physician |
| 5 |
Kitti |
Mingmongkon |
42 |
Samutprakan |
Fishermen |
| 6 |
Nalinee |
Wattana |
29 |
Patumthani |
Nurse |
อธิบายตัวอย่าง - showCustomer() Function
เมื่อผู้ใช้เลือกลูกค้าใน dropdown list ฟังก์ชัน showCustomer() ได้รับการประมวลผล ฟังก์ชันนี้ได้รับการสับเปลี่ยนโดย onchange event
<html>
<head>
<script type="text/javascript">
function showUser(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">Wiwat Pongprai </option>
<option value="2">Kamon Pengsa</option>
<option value="3">Amphon Taideang</option>
<option value="4">Wanphen Duangmenee</option>
<option value="5">Kitti Mingmongkon</option>
<option value="6">Nalinee Wattana</option>
</select>
</form>
<br />
<div id="txtHint"><b>Person info will be listed here.</b></div>
</body>
</html>
ฟังก์ชัน showCustomer() ทำงานดังนี้
- ตรวจสอบ ถ้าเลือกลูกค้า
- สร้างอ๊อบเจค XMLHttpRequest
- สร้างการประมวลผลฟังก์ชัน เมื่อการตอบสนองจากแม่ข่ายพร้อมแล้ว
- ส่งออกไฟล์จากแม่ข่าย
- ให้สังเกตว่า พารามิเตอร์ (q) ได้รับการเพิ่มสู่ URL (ด้วยเนื้อหาของ dropdown list)
The AJAX Server Page
เพจบนแม่ข่ายที่เรียกโดย JavaScript เป็นไฟล์ PHP ชื่อ getcustomer.php ไฟล์แม่ข่ายสามารถเขียนใหม่เป็น ASP ได้ง่าย
ชุดคำสั่งใน getcustomer.php เรียกใช้คิวรี่กับฐานข้อมูล แล้วส่งออกผลลัพธ์ในตาราง HTML
<?php
$q=$_GET["q"];
$con = mysql_connect('localhost', 'wide_learn', 'wide911');
if (!$con)
{
die('Could not connect: ' . mysql_error());
}
mysql_select_db("widebase_learn", $con);
$sql="SELECT * FROM ajax_db_user WHERE id = '".$q."'";
$result = mysql_query($sql);
$row = mysql_fetch_array($result);
echo "<table border='1' width='100%'>";
echo "<tr><td width='100'>Firstname</td><td>". $row['FirstName'] . "</td></tr>";
echo "<tr><td>Lastname</td><td>" . $row['LastName'] . "</td></tr>";
echo "<tr><td>Age</td><td>" . $row['Age'] . "</td></tr>";
echo "<tr><td>Hometown</td><td>" . $row['Hometown'] . "</td></tr>";
echo "<tr><td>Job</td><td>" . $row['Job'] . "</td></tr>";
echo "</table>";
mysql_close($con);
?>
|
