AJAX สามารถใช้สำหรับการสื่อสารโต้ตอบกับฐานข้อมูล
AJAX ตัวอย่างฐานข้อมูล
ตัวอย่างต่อไปนี้จะแสดงให้เห็นว่าหน้าเว็บสามารถดึงข้อมูลจากฐานข้อมูลที่มี AJAX:
ตัวอย่างอธิบาย - เดอะ showCustomer() ฟังก์ชั่น
เมื่อผู้ใช้เลือกลูกค้าในรายการแบบเลื่อนข้างต้นฟังก์ชั่นที่เรียกว่า "showCustomer()" จะถูกดำเนินการ ฟังก์ชั่นจะถูกเรียกโดย "onchange" เหตุการณ์:
showCustomer
function showCustomer(str) {
var xhttp;
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
}
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState
== 4 && xhttp.status == 200) {
document.getElementById("txtHint").innerHTML
= xhttp.responseText;
}
};
xhttp.open("GET",
"getcustomer.asp?q="+str, true);
xhttp.send();
}
showCustomer() ฟังก์ชั่นใดต่อไปนี้:
- ตรวจสอบว่ามีการเลือกลูกค้า
- สร้าง XMLHttpRequest วัตถุ
- สร้างฟังก์ชั่นที่จะดำเนินการเมื่อตอบกลับของเซิร์ฟเวอร์ที่มีความพร้อม
- ส่งคำขอร้องออกไปยังแฟ้มบนเซิร์ฟเวอร์
- ขอให้สังเกตว่าพารามิเตอร์ (q) จะถูกเพิ่ม URL (ที่มีเนื้อหาของรายการแบบเลื่อนลง)
AJAX เซิร์ฟเวอร์หน้า
หน้าบนเซิร์ฟเวอร์เรียกโดย JavaScript ด้านบนเป็นไฟล์ ASP เรียกว่า "getcustomer.asp"
ไฟล์เซิร์ฟเวอร์ได้อย่างง่ายดายเขียนใหม่ใน PHP หรือบางภาษาเซิร์ฟเวอร์อื่น
ดูตัวอย่างที่สอดคล้องกันใน PHP
รหัสแหล่งที่มาใน "getcustomer.asp" วิ่งแบบสอบถามกับฐานข้อมูลและผลตอบแทนในตาราง HTML:
<%
response.expires=-1
sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID="
sql=sql & "'" & request.querystring("q") & "'"
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.Mappath("/ datafolder /northwind.mdb"))
set rs=Server.CreateObject("ADODB.recordset")
rs.Open sql,conn
response.write("<table>")
do until rs.EOF
for each x in rs.Fields
response.write("<tr><td><b>" & x.name & "</b></td>")
response.write("<td>" & x.value & "</td></tr>")
next
rs.MoveNext
loop
response.write("</table>")
%>