AJAX ใช้เพื่อสร้างแอปพลิเคชันแบบโต้ตอบมากขึ้น
ตัวอย่างต่อไปนี้สาธิตวิธีที่เว็บเพจสื่อสารกับเว็บเซิร์ฟเวอร์เมื่อผู้ใช้พิมพ์อักขระในกล่องป้อนข้อมูล:
เมื่อผู้ใช้พิมพ์อักขระในช่องป้อนข้อมูลด้านบน ฟังก์ชัน "showHint()" จะถูกดำเนินการ ฟังก์ชั่นนี้ถูกทริกเกอร์โดยเหตุการณ์ "onkeyup":
<html><head><script>function showHint(str){ if (str.length==0) { document.getElementById("txtHint").innerHTML=""; return; } ถ้า (window.XMLHttpRequest) { / / รหัสที่ดำเนินการโดย IE7+, Firefox, Chrome, Opera, เบราว์เซอร์ Safari xmlhttp=new XMLHttpRequest(); } else { //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", "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 และออกจากฟังก์ชัน
หากช่องป้อนข้อมูลไม่ว่างเปล่า showHint() จะดำเนินการตามขั้นตอนต่อไปนี้:
สร้างวัตถุ XMLHttpRequest
สร้างฟังก์ชันที่ดำเนินการเมื่อการตอบสนองของเซิร์ฟเวอร์พร้อม
ส่งคำขอไปยังไฟล์บนเซิร์ฟเวอร์
โปรดทราบว่าพารามิเตอร์ (q) เพิ่มต่อท้าย URL (ประกอบด้วยเนื้อหาของช่องป้อนข้อมูล)
หน้าเซิร์ฟเวอร์ที่เรียกข้างต้นผ่าน JavaScript เป็นไฟล์ PHP ชื่อ "getint.php"
ซอร์สโค้ดใน "getint.php" จะตรวจสอบอาร์เรย์ชื่อและส่งกลับชื่อที่เกี่ยวข้องไปยังเบราว์เซอร์:
<?php// กรอกชื่ออาร์เรย์ $a[]="Anna";$a[]="Brittany";$a[]="Cinderella";$a[]="Diana";$a[]="Eva" ; $a[]="ฟิโอน่า";$a[]="กันดา";$ a[]="Hege";$a[]="Inga";$a[]="โจฮันนา";$a[]="Kitty";$a[]="ลินดา";$a[]=" นีน่า";$a[]="โอฟีเลีย";$a[]="พิทูเนีย";$ a[]="Amanda";$a[]="Raquel";$a[]="Cindy";$a[]="ดอริส";$a[]="อีฟ";$a[]=" เอวิต้า";$a[]="ซันนิวา";$a[]="โทฟ";$a []="Unni";$a[]="Violet";$a[]="Liza";$a[]="Elizabeth";$a[]="Ellen";$a[]="เวนช์ ";$a[]="Vicky";//รับ q จากที่อยู่ URL คำขอ พารามิเตอร์ $q=$_GET["q"];//ตรวจสอบว่ามีค่าที่ตรงกันหรือไม่ หาก q>0if (strlen($q) > 0){ $hint=""; for($i=0; $ i< count($a); $i++) { if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q)))) { ถ้า ($คำใบ้==" ") { $hint=$a[$i]; } else { $hint=$hint." , ".$a[$i]; } } }}// หากไม่มีค่าที่ตรงกัน ให้ตั้งค่าเอาต์พุตเป็น "no Suggestion " if ($ Hint == ""){ $response="no Suggestion";}else{ $response=$hint;}//ส่งออกค่าที่ส่งคืน echo $response;?>คำอธิบาย: หาก JavaScript ส่งข้อความใดๆ (เช่น strlen($q) > 0) สิ่งนี้จะเกิดขึ้น:
ค้นหาชื่อที่ตรงกับอักขระที่ส่งโดย JavaScript
หากไม่พบรายการที่ตรงกัน ให้ตั้งค่าสตริงการตอบกลับเป็น "ไม่มีข้อเสนอแนะ"
หากพบชื่อที่ตรงกันตั้งแต่หนึ่งชื่อขึ้นไป ให้ตั้งค่าสตริงการตอบกลับด้วยชื่อทั้งหมด
ส่งการตอบกลับไปยังตัวยึดตำแหน่ง "txtHint"
หากคำขอแบบอะซิงโครนัสของคุณจำเป็นต้องข้ามโดเมน คุณสามารถตรวจสอบ: วิธีแก้ปัญหาข้ามโดเมน PHP Ajax