tutorial pengembangan web terbaru
 

AJAX database Contoh


AJAX dapat digunakan untuk komunikasi interaktif dengan database.


AJAX database Contoh

Contoh berikut akan menunjukkan bagaimana sebuah halaman web dapat mengambil informasi dari database dengan AJAX:

Contoh


Customer info will be listed here...

Cobalah sendiri "


Contoh Dijelaskan - The showCustomer() Fungsi

Ketika pengguna memilih seorang pelanggan dalam daftar dropdown di atas, fungsi yang disebut "showCustomer()" dijalankan. Fungsi ini dipicu oleh "onchange" acara:

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();
}

The showCustomer() fungsi melakukan hal berikut:

  • Periksa apakah pelanggan yang dipilih
  • Buat XMLHttpRequest objek
  • Membuat fungsi yang akan dijalankan ketika respon server siap
  • Kirim permintaan off ke file di server
  • Perhatikan bahwa parameter (q) ditambahkan ke URL (dengan isi dari daftar dropdown)

The AJAX Server Page

Halaman pada server disebut dengan JavaScript diatas adalah file ASP disebut "getcustomer.asp" .

File server dengan mudah bisa ditulis ulang di PHP, atau bahasa server lain.

Lihatlah contoh yang sesuai di PHP .

Kode sumber di "getcustomer.asp" menjalankan query terhadap database, dan mengembalikan 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("/ 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>")
%>