Contoh Database AJAX

AJAX dapat digunakan untuk berkomunikasi dengan database.

Contoh Database AJAX

Contoh di bawah ini menunjukkan bagaimana halaman web dapat membaca informasi dari database melalui AJAX:

Informasi pelanggan akan ditampilkan di sini.

Coba kode sumber sendiri

Contoh - Halaman HTML

Ketika pengguna memilih pelanggan di daftar pilihan di atas, fungsi yang bernama "showCustomer()" akan dijalankan. Fungsi ini di triggar oleh peristiwa "onchange":

<!DOCTYPE html>
<html>
<head>
<script>
function showCustomer(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  // Untuk IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  // 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 ">North/South</option>
<option value="WOLZA">Wolski Zajazd</option>
</select>
</form>
<br>
<div id="txtHint">Informasi pelanggan akan ditampilkan di sini...</div>
</body>
</html>

Penjelasan kode sumber:

Jika pelanggan belum dipilih (str.length sama dengan 0), fungsi ini akan mengosongkan penanda tempat txtHint, lalu keluar dari fungsi.

Jika pelanggan sudah dipilih, fungsi showCustomer() akan melaksanakan tahapan berikut:

  • Membuat objek XMLHttpRequest
  • Membuat fungsi yang akan dijalankan saat server siap
  • Mengirim permintaan ke berkas di server
  • Perhatikan parameter yang ditambahkan ke akhir URL (q) (termasuk konten daftar pilihan)

Berkas ASP

Laman server yang dipanggil oleh JavaScript ini adalah berkas ASP dengan nama "getcustomer.asp".

Kode sumber di "getcustomer.asp" akan dijalankan sekali untuk kueri database dan kemudian menampilkan hasilnya 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>")
%>