Latest web development tutorials

AJAX database

AJAX dapat digunakan untuk komunikasi interaktif dengan database.


AJAX contoh database

Contoh berikut akan menunjukkan bagaimana sebuah halaman web melalui AJAX membaca informasi dari database:

contoh


Customer info will be listed here...


Contoh menjelaskan - Halaman HTML

Bila pengguna dalam daftar drop-down di atas, pilih pelanggan, dieksekusi bernama "showCustomer ()" fungsi. Fungsi ini dengan acara "onchange" dipicu:

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

<form>
<select name="customers" onchange="showCustomer(this.value)">
<option value="">Select a customer:</option>
<option value="ALFKI">Alfreds Futterkiste</option>
<option value="NORTS ">North/South</option>
<option value="WOLZA">Wolski Zajazd</option>
</select>
</form>
<br>
<div id="txtHint">Customer info will be listed here...</div>

</body>
</html>

Sumber menjelaskan:

Jika Anda tidak memilih pelanggan (str.length == 0), maka fungsi akan menghapus txtHint placeholder, dan kemudian keluar fungsi.

Jika Anda telah memilih pelanggan, maka showCustomer () fungsi melakukan langkah-langkah berikut:

  • Buat XMLHttpRequest objek
  • Membuat fungsi ketika server siap untuk melakukan respon
  • Berkas pada server untuk mengirim permintaan
  • Harap perhatikan ditambahkan ke akhir dari parameter URL (q) (berisi isi dari daftar drop-down)

File ASP

Server di atas melalui JavaScript memanggil halaman ini disebut "getcustomer.asp" file ASP.

"Getcustomer.asp" kode sumber menjalankan query terhadap database, dan kemudian mengembalikan hasil dalam tabel 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("/db/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>")
%>