pangkalan data AJAX
AJAX boleh digunakan untuk berkomunikasi secara dinamik dengan pangkalan data.
Contoh Pangkalan Data AJAX
Contoh berikut akan menunjukkan cara halaman web membaca maklumat daripada pangkalan data melalui AJAX: Sila pilih pelanggan daripada menu lungsur di bawah:
Instance
<html><!DOCTYPE html>
<html>
<head>
<script>
function showCustomer(str)
{
var xmlhttp;
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for 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","/try/ajax/getcustomer.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form action="">
<select name="customers" onchange="showCustomer(this.value)" style="font-family:Verdana, Arial, Helvetica, sans-serif;">
<option value="APPLE">Apple Computer, Inc.</option>
<option value="BAIDU ">BAIDU, Inc</option>
<option value="Canon">Canon USA, Inc.</option>
<option value="Google">Google, Inc.</option>
<option value="Nokia">Nokia Corporation</option>
<option value="SONY">Sony Corporation of America</option>
</select>
</form>
<br>
<div id="txtHint">Customer info will be listed here...</div>
</body>
</html>Run Instance»
Klik "Run Instance" " butang untuk melihat kejadian dalam talian
Penjelasan contoh - fungsi showCustomer()
Apabila pengguna memilih pelanggan dalam senarai juntai bawah di atas, nama itu akan dilaksanakan ialah fungsi "showCustomer()". Fungsi ini dicetuskan oleh peristiwa "onchange":
{
var xmlhttp;
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// kod untuk IE7+, Firefox, Chrome, Opera , Safari
xmlhttp=new XMLHttpRequest();
}
lain
{// kod untuk 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","getcustomer.html?q="+str,true);
xmlhttp.send();
}
showCustomer() melaksanakan tugas berikut:
Menyemak sama ada pelanggan telah dipilih
Mencipta objek XMLHttpRequest
Laksanakan fungsi yang dibuat apabila respons pelayan sedia
Hantar permintaan ke fail pada pelayan
-
Sila Ambil perhatian bahawa kami menambahkan parameter q pada URL (dengan kandungan dari medan input)
Halaman Pelayan AJAX
Halaman pelayan dipanggil oleh JavaScript di atas Ia adalah fail PHP bernama "getcustomer.php".
Ia juga mudah untuk menulis fail pelayan dalam PHP atau bahasa pelayan lain. Lihat contoh sepadan yang ditulis dalam PHP.
Kod sumber dalam "getcustomer.php" bertanggungjawab untuk menanyakan pangkalan data dan kemudian mengembalikan keputusan menggunakan jadual HTML:
respons .expires= -1
sql="SELECT * FROM CUSTOMER WHERE 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,conn
response.write("<table>")
do until rs.EOF
, untuk setiap x dalam rs.Field
' response.write("<tr><td><b>" & x.name & "</b></td>")
' response.write("<td>" & x.value & "</td></tr>")
, seterusnya
, rs.MoveNext
gelung
response.write("</table>")
%>
