ในเนื้อหาส่วนนี้จะเป็นการสร้างตัวอย่างการนำหลักการของ 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 นั่นเอง