AJAX Database Voorbeeld

AJAX kan worden gebruikt voor interactieve communicatie met een database.

AJAX Database Voorbeeld

Hieronder wordt een voorbeeld gegeven van hoe een webpagina informatie uit een database leest via AJAX:

Voorbeeld

Klantinformatie wordt hier weergegeven.

Probeer het zelf

Voorbeeld uitleg - functie showCustomer()

Wanneer de gebruiker een klant selecteert uit de bovenstaande dropdown-lijst, voert de functie "showCustomer()" uit. Deze functie wordt onchange event trigger:

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

De functie showCustomer() doet het volgende:

  • Controleer of de klant is geselecteerd
  • Maak een XMLHttpRequest-object aan
  • Maak een functie aan die wordt uitgevoerd wanneer de server bereid is om te reageren
  • Verzend een verzoek naar een bestand op de server
  • Let op, parameter q wordt toegevoegd aan de URL (met inhoud van een dropdown-lijst)

AJAX-serverpagina

De serverpagina die door het bovenstaande JavaScript wordt aangeroepen, is de ASP-bestand genaamd "getcustomer.asp".

Het is gemakkelijk om dit serverbestand met PHP of andere servertaal opnieuw te schrijven.

Zie het bijbehorende PHP voorbeeld。

"getcustomer.asp" 中 van de broncode een database-georienteerde query uitvoert en de resultaten in een HTML-tabel retourneert:

<%
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("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>")
 next
 rs.MoveNext
loop
response.write("</table>")
%>