AJAX PHP

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

หากคุณพบคำที่สะกดผิด เว้นวรรคไม่ถูกต้อง ฯ โปรดแจ้งให้เราทราบ โดยลากคลุม (highlight) ข้อความนั้น แล้วกด Ctrl + Enter

ไม่สามารถคัดลอกเนื้อหานี้

Spelling error report

The following text will be sent to our editors: