AJAX ใช้เพื่อสร้างแอปพลิเคชันแบบไดนามิกมากขึ้น
ตัวอย่างต่อไปนี้จะแสดงให้คุณเห็นว่าหน้าเว็บสื่อสารกับเว็บเซิร์ฟเวอร์อย่างไรเมื่อผู้ใช้พิมพ์อักขระในช่องป้อนข้อมูล: โปรดพิมพ์ตัวอักษร (A - Z) ในช่องป้อนข้อมูลด้านล่าง:
ลองป้อนตัวอักษร a ในช่องป้อนข้อมูล:
ข้อมูลแจ้ง:
เมื่อผู้ใช้พิมพ์อักขระในช่องป้อนข้อมูลด้านบน ฟังก์ชัน "showHint()" จะถูกดำเนินการ ฟังก์ชั่นนี้ถูกทริกเกอร์โดยเหตุการณ์ "onkeyup":
การทำงาน แสดงคำแนะนำ ( str ) - var xmlhttp ; ( STR . ความยาว == 0 ) - เอกสาร . getElementById ( " txtHint " ) innerHTML = " " ; ถ้า ( หน้าต่าง . XMLHttpRequest ) - // IE7+, Firefox, Chrome, Opera, รหัสดำเนินการเบราว์เซอร์ Safari xmlhttp = ใหม่ XMLHttpRequest ( ) ; อื่น - // IE6, รหัสดำเนินการเบราว์เซอร์ IE5 xmlhttp = ใหม่ ActiveXObject ( " Microsoft.XMLHTTP " ) ; xmlhttp.onreadystatechange = ฟังก์ชัน ( ) - ถ้า ( xmlhttp . readyState == 4 && xmlhttp . สถานะ == 200 ) - เอกสาร . getElementById ( " txtHint " ) innerHTML = xmlhttp ; - xmlhttp . เปิด ( " GET " , " /try/ajax/getint.php?q= " + str , จริง ) ;การวิเคราะห์ซอร์สโค้ด:
หากกล่องอินพุตว่างเปล่า str.length==0 ฟังก์ชันจะล้างเนื้อหาของตัวยึดตำแหน่ง txtHint และออกจากฟังก์ชัน
ถ้าช่องป้อนข้อมูลไม่ว่างเปล่า ฟังก์ชัน showHint() จะดำเนินการต่อไปนี้:
สร้างวัตถุ XMLHttpRequest
ดำเนินการฟังก์ชันเมื่อการตอบกลับของเซิร์ฟเวอร์พร้อม
ส่งคำขอไปยังไฟล์บนเซิร์ฟเวอร์
โปรดทราบว่าเราได้เพิ่มพารามิเตอร์ q (พร้อมเนื้อหาของช่องป้อนข้อมูล) ให้กับ URL
หน้าเซิร์ฟเวอร์ที่เรียกโดย JavaScript ข้างต้นเป็นไฟล์ ASP ชื่อ "gethint.asp"
ด้านล่างนี้ เราสร้างไฟล์เซิร์ฟเวอร์สองเวอร์ชัน เวอร์ชันหนึ่งเขียนด้วย ASP และอีกเวอร์ชันเขียนด้วย PHP
ซอร์สโค้ดใน "getint.asp" จะตรวจสอบอาร์เรย์ของชื่อและส่งกลับชื่อที่เกี่ยวข้องไปยังเบราว์เซอร์:
<%response.expires=-1dim a(30)'เติมอาร์เรย์ด้วย Namesa(1)="แอนนา"a(2)="บริตตานี"a(3)="ซินเดอเรลล่า"a(4)="ไดอาน่า"a(5)="อีวา"a(6)="ฟิโอน่า"a( 7)="กันดา"a(8)=" Hege"a(9)="Inga"a(10)="Johanna"a(11)="Kitty"a(12)="Linda"a(13)="Nina"a(14)="Ophelia" a(15)="พิทูเนีย"a( 16)="อแมนดา"a(17)="ราเควล"a(18)="ซินดี้"a(19)="ดอริส"a(20)="อีฟ"a(21)="เอวิต้า"a(22) ="ซุนนิวา"a(23)="ตฟ e"a(24)="Unni"a(25)="Violet"a(26)="Liza"a(27)="Elizabeth"a(28)="Ellen"a(29)="เวนช์" a(30)="วิกกี้"'get พารามิเตอร์ q จาก URLq=ucase(request.querystring("q"))' ค้นหาคำแนะนำทั้งหมดจากอาร์เรย์หากความยาวของ q>0if len(q)>0 จากนั้นเป็นคำใบ้ = "" สำหรับ i=1 ถึง 30 ถ้า q=ucase (กลาง(a(i),1,len(q))) แล้วถ้าเป็นคำใบ้ = "" แล้วก็เป็นคำใบ้=a(i) อย่างอื่นคำใบ้=คำใบ้ & " , " & a(i) สิ้นสุดถ้าสิ้นสุดถ้าถัดไปสิ้นสุด if'Output "ไม่มีข้อเสนอแนะ" หากไม่พบคำใบ้ หรือส่งออกค่าที่ถูกต้องหากเป็นคำใบ้ = "" จากนั้น response.write("no Suggestion")else response.write(hint)end if%>โค้ดด้านล่างเขียนด้วย PHP และมีผลเหมือนกับโค้ด ASP ด้านบน
<?php// เติมอาร์เรย์ด้วย ชื่อ$a[]="แอนนา";$a[]="บริตตานี";$a[]="ซินเดอเรลล่า";$a[]="ไดอาน่า";$a[]="อีวา";$a[] ="ฟิโอน่า";$a[]="กันดา";$a []="เฮจ";$a[]="อินกา";$a[]="โจฮันนา";$a[]="Kitty";$a[]="ลินดา";$a[]="นีน่า ";$a[]="โอฟีเลีย";$a[]="พิทูเนีย ";$a[]="อแมนดา";$a[]="ราเควล";$a[]="ซินดี้";$a[]="ดอริส";$a[]="อีฟ";$a[ ]="Evita";$a[]="ซุนนิวา";$a[]="ถึง ve";$a[]="Unni";$a[]="Violet";$a[]="Liza";$a[]="Elizabeth";$a[]="Ellen";$a []="เวนช์";$a[]="วิกกี้";//get พารามิเตอร์ q จาก URL$q=$_GET["q"];//ค้นหาคำแนะนำทั้งหมดจากอาร์เรย์หากความยาวของ q>0if (strlen($q) > 0){ $hint=""; 0; $i<count($a); $i++) { if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q)))) { ถ้า ($hint=="") { $hint=$a[$i]; } else { $hint=$hint." , ".$a[$i]; } } }}// ตั้งค่าเอาต์พุตเป็น "no ข้อเสนอแนะ" ถ้าไม่พบคำใบ้// หรือค่าที่ถูกต้องif ($hint == ""){ $response="no Suggestion";}else{ $response=$hint;}//ส่งออกการตอบกลับ $ตอบกลับ;?>