AJAX สามารถใช้เพื่อสื่อสารกับฐานข้อมูลแบบไดนามิก
ตัวอย่างต่อไปนี้จะสาธิตวิธีที่หน้าเว็บอ่านข้อมูลจากฐานข้อมูลผ่าน AJAX: โปรดเลือกลูกค้าในรายการแบบเลื่อนลงด้านล่าง:
เมื่อผู้ใช้เลือกลูกค้าในรายการดรอปดาวน์ด้านบน ฟังก์ชันชื่อ "showCustomer()" จะถูกดำเนินการ ฟังก์ชั่นนี้ถูกทริกเกอร์โดยเหตุการณ์ "onchange":
การทำงาน แสดงลูกค้า ( str ) - var xmlhttp ; ( str == " " ) - เอกสาร . 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/getcustomer.php?q= " + str , จริง ) ;ฟังก์ชัน showCustomer() ทำหน้าที่ต่อไปนี้:
ตรวจสอบว่าลูกค้าได้รับเลือกแล้ว
สร้างวัตถุ XMLHttpRequest
ดำเนินการฟังก์ชันที่สร้างขึ้นเมื่อการตอบกลับของเซิร์ฟเวอร์พร้อม
ส่งคำขอไปยังไฟล์บนเซิร์ฟเวอร์
โปรดทราบว่าเราได้เพิ่มพารามิเตอร์ q ให้กับ URL (พร้อมกับเนื้อหาของช่องป้อนข้อมูล)
หน้าเซิร์ฟเวอร์ที่เรียกใช้โดย JavaScript ด้านบนเป็นไฟล์ PHP ชื่อ "getcustomer.php"
นอกจากนี้ยังง่ายต่อการเขียนไฟล์เซิร์ฟเวอร์ใน PHP หรือภาษาเซิร์ฟเวอร์อื่นๆ ดูตัวอย่างที่เกี่ยวข้องที่เขียนด้วย PHP
ซอร์สโค้ดใน "getcustomer.php" มีหน้าที่ในการสืบค้นฐานข้อมูลและส่งกลับผลลัพธ์ในตาราง HTML:
<%response.expires=-1sql="SELECT * จากลูกค้าโดยที่ customerID="sql=sql & "'" & request.querystring("q") & "'"set conn=Server.CreateObject("ADODB.Connection")conn.Provider="Microsoft.Jet.OLEDB.4.0"conn.Open(Server.Mappath("/db/northwind.mdb"))set rs=Server.CreateObject( "ADODB.recordset")rs.Open sql,connresponse.write("<table>")ทำจนถึง rs.EOF สำหรับแต่ละ x ใน rs.Fields response.write("<tr><td><b>" & x.name & "</b></td>") response.write("<td>" & x. ค่า & "</td></tr>") ถัดไป rs.MoveNextloopresponse.write("</table>")%>