pangkalan data AJAX


AJAX boleh digunakan untuk berkomunikasi secara interaktif dengan pangkalan data.

Contoh Pangkalan Data AJAX

Contoh berikut akan menunjukkan cara halaman web membaca maklumat daripada pangkalan data melalui AJAX:

Contoh


Maklumat pelanggan akan disenaraikan di sini...

Penjelasan contoh - halaman HTML

Apabila pengguna memilih pelanggan dalam senarai juntai bawah di atas, fungsi bernama "showCustomer()" dilaksanakan. Fungsi ini dicetuskan oleh peristiwa "onchange":

<!DOCTYPE html>
<html>
<head>
<skrip>
function showCustomer (str)
{
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 .asp ?q="+str,true);
xmlhttp.send();
}
</script>
</head
<body>

<form>
<select name="customers" onchange="showCustomer(this.value)">
<option value="">Pilih pelanggan:</option> ;
<option value="ALFKI">Alfreds Futterkiste</option>
<option value="NORTS ">Utara/Selatan</option>
<option value="WOLZA "> ;Wolski Zajazd</option>
</select>
</form>
<br>
<div id="txtHint">Maklumat pelanggan akan disenaraikan di sini..</div>

</body>
</html>

Penjelasan kod sumber:

Jika tiada pelanggan dipilih (str.length==0), maka fungsi ini akan mengosongkan pemegang tempat txtHint dan kemudian keluar dari fungsi.

Jika pelanggan telah dipilih, fungsi showCustomer() melaksanakan langkah berikut:

  • Mencipta objek XMLHttpRequest

  • Buat fungsi yang dilaksanakan apabila respons pelayan sedia

  • Hantar permintaan ke fail pada pelayan

  • Perhatikan parameter (q ) ditambah pada penghujung URL ) (mengandungi kandungan senarai juntai bawah)

Fail ASP

Halaman pelayan yang dipanggil di atas melalui JavaScript ialah dokumen ASP bernama "getcustomer.asp".

Kod sumber dalam "getcustomer.asp" menjalankan pertanyaan terhadap pangkalan data dan mengembalikan keputusan dalam jadual HTML:

<%
response.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>")
buat sehingga rs.EOF
untuk setiap x dalam rs.Fields
response.write("<tr><td><b>" & x.name & "</b></td>")
response.write ( "<td>" & x.value & "</td></tr>")
seterusnya
rs.MoveNext
gelung
response.write("</ table> ;")
%>