ตัวอย่าง AJAX PHP
- หน้าก่อน ไฟล์ XML ของ AJAX
- หน้าต่อไป AJAX ASP
AJAX ใช้สร้างโปรแกรมที่มีการเปิดใช้งานมากขึ้น
ตัวอย่าง AJAX PHP
ตัวอย่างด้านล่างแสดงให้เห็นว่าเมื่อผู้ใช้พิมพ์ตัวอักษรในช่องแบบกระดาษ หน้าเว็บจะสื่อสารกับเซิร์ฟเวอร์ทาง web ด้วยวิธีต่อไปนี้:
ตัวอย่าง
โปรดพิมพ์ตัวอักษร A-Z ในช่องแบบกระดาษด้านล่าง:
ชื่อ:
คำแนะนำการค้นหา:
อธิบายตัวอย่าง
ในตัวอย่างด้านบน เมื่อผู้ใช้พิมพ์ตัวอักษรในช่องแบบกระดาษ จะมีการรับมือระหว่างเว็บไซต์กับเซิร์ฟเวอร์ที่มีชื่อว่า "showHint()"
ฟังก์ชันนี้ถูกกระตุ้นโดยเหตุการณ์ onkeyup
ต่อไปนี้คือรหัส HTML:
ตัวอย่าง
<html>
<head>
<script>
function showHint(str) {
if (str.length == 0) {
document.getElementById("txtHint").innerHTML = "";
return;
}
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("txtHint").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "gethint.php?q=" + str, true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<p><b>โปรดใส่ชื่อในช่องข้อมูลด้านล่าง：</b></p>
<form>
นามสกุล หรือ ชื่อ：<input type="text" onkeyup="showHint(this.value)">
</form>
<p>คำแนะนำ：<span id="txtHint"></span></p>
</body>
</html>
ชื่อย่อยและการอธิบาย
หลังจากนั้น ตรวจสอบว่าช่องข้อมูลที่ใส่ค่าเป็นค่าว่าง (str.length == 0），ถ้าเป็น ล้างช่อง txtHint และออกจากฟังก์ชัน
แต่ ถ้าช่องข้อมูลที่ใส่ค่าเป็นค่าว่าง ก็จะทำตามนี้:
- สร้าง XMLHttpRequest วัตถุ
- สร้างฟังก์ชันที่จะทำงานเมื่อเซิร์ฟเวอร์เตรียมพร้อมตอบ
- ส่งคำขอถึงไฟล์ PHP บนเซิร์ฟเวอร์ (gethint.php)
- โปรดเสริมตัวแปร q ใน gethint.php
- ตัวแปร str บันทึกสิ่งที่บันทึกในช่องข้อมูล
ไฟล์ PHP - "gethint.php"
ไฟล์ PHP นี้ตรวจสอบชื่อในแถว แล้วส่งค่าชื่อที่เหมาะสมกับเบราเซอร์:
<?php
// ชื่อในแถว
$a[] = "Ava";
$a[] = "Brielle";
$a[] = "Caroline";
$a[] = "Diana";
$a[] = "Elise";
$a[] = "Fiona";
$a[] = "Grace";
$a[] = "Hannah";
$a[] = "Ileana";
$a[] = "Jane";
$a[] = "Kathryn";
$a[] = "Laura";
$a[] = "Millie";
$a[] = "Nancy";
$a[] = "Opal";
$a[] = "Petty";
$a[] = "Queenie";
$a[] = "Rose";
$a[] = "Shirley";
$a[] = "Tiffany";
$a[] = "Ursula";
$a[] = "Victoria";
$a[] = "Wendy";
$a[] = "Xenia";
$a[] = "Yvette";
$a[] = "Zoe";
$a[] = "Angell";
$a[] = "Adele";
$a[] = "Beatty";
$a[] = "Carlton";
$a[] = "Elisabeth";
$a[] = "Violet";
// ดึงค่าตัวแปร q จาก URL
$q = $_REQUEST["q"];
$hint = "";
// ดูค่า hint ทั้งหมดในแถวละครั้ง ค่า $q หากเป็น ""
if ($q !== "") {
$q = strtolower($q);
$len=strlen($q);
foreach($a as $name) {
if (stristr($q, substr($name, 0, $len))) {
if ($hint === "") {
$hint = $name;
}
$hint .= ", $name";
}
}
}
}
// ออก "no suggestion" หากไม่พบ hint หรือออกค่าที่ถูกต้อง
echo $hint === "" ? "no suggestion" : $hint;
?>
- หน้าก่อน ไฟล์ XML ของ AJAX
- หน้าต่อไป AJAX ASP
