ในเนื้อหาส่วนนี้จะเป็นการสร้างตัวอย่างการนำหลักการของ ajax ใช้งามร่วมกับ PHP ซึ่งเริ่มต้นจากตัวอย่างที่ 1
ตัวอย่างที่ 1 PHP ค้นหาข้อมูลโดยนำเทคนิค AJAX มาใช้งาน
1.ไฟล์ load_data.php
<html>
<head>
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
}
xmlhttp.open("GET", "getdata.php?q="+str, true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<p><b>กรอกข้อมูลในฟอร์มเพื่อค้นหาข้อมูล : </b></p>
<form action="">
<label for="fname">ชื่อจริง :</label>
<input type="text" id="fname" name="fname" onkeyup="showHint(this.value)">
</form>
<p>แสดงข้อมูล : <span id="txtHint"></span></p>
</body>
</html>
ไฟล์ที่ 1 load_data.php
ไฟล์ที่ 1 สร้างฟอร์มค้นหาข้อมูล โดยภายในอินพุตประเภท text ใช้คียเวิร์ด onkeyup และเข้าถึงฟังก์ชัน showHint(this.value) โดยมีการส่งพารามิเตอร์ค่าปัจจุบันไปกับฟังก์ชัน ซึ่งฟังก์ชัน showHint() หน้าที่ในการตรวจสอบอินพุตที่รับมาของอาร์กิวเมนต์โดยกำหนดเงื่อนไขว่า ถ้าค่าที่อาร์กิวเมนต์รับมานั้นมีความยาวของสตริงเท่า 0 ให้ส่งคืนค่าว่างแสดงผลที่หน้าเว็บ แต่ถ้าหากความยาวของสตริงมีมากกว่า 1 จะทำการส่ง XMLHttprequest ไปยังเซิร์ฟเวอร์ โดยให้เซิร์ฟเวอร์นำไฟล์ชื่อ getdata.php มาทำการประมวล จากนั้นส่งผลลัพธ์กลับมายังไฟล์ load_data.php แล้วทำการอัพเดทหน้าโดยที่ไม่ต้องโหลดหน้าใหม่
- onkeyup ทำงานเมื่อเกิดเหตุการณ์พิมพ์ข้อมูล หรือกรอกข้อมูล
2.ไฟล์ getdata.php
<?php
// อาเรย์ที่ใช้เก็บข้อมูลชื่อของสัตว์
$a[] = "มด";
$a[] = "นก";
$a[] = "แมว";
$a[] = "สุนัข";
$a[] = "อินทรีย์";
$a[] = "ปลา";
$a[] = "ห่าน";
$a[] = "แม่ไก่";
$a[] = "อีกัวนา";
$a[] = "ยีราฟ";
$a[] = "จิงโจ้";
$a[] = "สิงโต";
$a[] = "หอยมุข";
$a[] = "ลิงอุรังอุตัง";
$a[] = "นกยูง";
// สร้างตัวแปรที่รับพารามิเตอร์จาก URL
$q = $_REQUEST["q"];
$hint = "";
// หาข้อมูลจากอาเรย์ที่มีค่าตรงกับคำค้นหา ""
if ($q !== "") {
$q = strtolower($q);
$len=strlen($q);
foreach($a as $name) {
if (stristr($q, substr($name, 0, $len))) {
if ($hint === "") {
$hint = $name;
} else {
$hint .= ", $name";
}
}
}
}
// เมื่อไม่พบผลลัพธ์
echo $hint === "" ? "ไม่พบผลลัพธ์" : $hint;
?>
ไฟล์ที่ 2 getdata.php
ไฟล์ที่ 2 ทำการรับ request ที่ส่งมาแล้วทำการประมวลผล จากนั้นส่่งผลลัพธ์กลับไปยังไฟล์ load_data.php
สรุปหลักการทำงานแบบเข้าใจง่ายของตัวอย่างที่ 1
เริ่มต้นจากไฟล์ที่ 1 load_data.php สร้างฟอร์มเพื่อส่ง request ไปยังไฟล์ที่ 2 getdata.php จากนั้นไฟล์ที่ 2 ก็รับ request จากนั้นก็ทำการประมวล และส่งผลลัพธ์กลับไปยังไฟล์ที่ 1 นั่นเอง