AJAX Database 实例

AJAX boleh digunakan untuk berkomunikasi interaktif dengan database.

AJAX Database 实例

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

Contoh

Informasi pelanggan akan disiarkan di sini.

Coba sendiri

Contoh penjelasan - fungsi showCustomer()

Ketika pengguna memilih pelanggan di daftar turun di atas, lakukan fungsi "showCustomer()" yang bernama. Fungsi ini dipanggil onchange Tindakan yang diaktifkan:

showCustomer

function showCustomer(str) {
  var xhttp; 
  if (str == "") {
    document.getElementById("txtHint").innerHTML = "";
    return;
  }
  xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
    document.getElementById("txtHint").innerHTML = this.responseText;
    }
  };
  xhttp.open("GET", "getcustomer.asp?q=" + str, true);
  xhttp.send();
}

Fungsi showCustomer() melaksanakan hal berikut:

  • Memeriksa apakah pelanggan dipilih
  • Membuat objek XMLHttpRequest
  • Membuat fungsi yang akan dijalankan saat server siap merespon
  • Mengirim permintaan ke berkas di server
  • Perhatikan bahwa parameter q ditambahkan ke URL (dengan konten daftar turun)

Laman halaman server AJAX

Laman halaman server yang dipanggil oleh JavaScript di atas adalah berikut: "getcustomer.asp"

Dapat ditulis dengan mudah menggunakan PHP atau bahasa server lainnya

Lihat contoh PHP yang sesuai。

Penggunaan kod asal di "getcustomer.asp" untuk menjalankan query berorientasi database dan mengembalikan hasil di tabel HTML:

<%
response.expires=-1
sql="SELECT * FROM CUSTOMERS WHERE CUSTOMERID="
sql=sql & '
set conn=Server.CreateObject("ADODB.Connection")
conn.Provider="Microsoft.Jet.OLEDB.4.0"
conn.Open(Server.Mappath("customers.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>")
%>