AJAX Datenbank Beispiel

AJAX kann zur interaktiven Kommunikation mit Datenbanken verwendet werden.

AJAX Datenbank Beispiel

Der folgende Beispiel zeigt, wie Webseiten Informationen aus einer Datenbank über AJAX lesen：

Beispiel

Kundendaten werden hier aufgelistet.

Versuchen Sie es selbst

Beispiel - Funktion showCustomer()

Wenn der Benutzer einen Kunden aus der obigen Dropdown-Liste wählt, wird die Funktion "showCustomer()" ausgeführt. Diese Funktion wird onchange Trigger-Ereignis:

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

Die Funktion showCustomer() führt folgendes aus:

  • Überprüfen Sie, ob ein Kunde ausgewählt wurde
  • Ein XMLHttpRequest-Objekt erstellen
  • Eine Funktion erstellen, die ausgeführt wird, wenn der Server antwortet
  • Eine Anfrage an eine Datei auf dem Server senden
  • Bitte beachten Sie, dass der Parameter q an die URL hinzugefügt wird (mit dem Inhalt der Dropdown-Liste)

AJAX-Serverseite

Die von dem oben genannten JavaScript aufgerufene Serverseite ist die ASP-Datei mit dem Namen "getcustomer.asp".

Es kann der Serverdatei mit PHP oder anderen Server-Sprachen leicht umgeschrieben werden.

Siehe den entsprechenden PHP-Beispiel。

Die Quelldatei von "getcustomer.asp" führt eine Datenbankabfrage aus und zeigt die Ergebnisse in einer HTML-Tabelle an:

<%
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>")
bis rs.EOF
 for each x in rs.Fields
   response.write("<tr><td><b>" & x.name & "</b></td>")
   response.write("<td>" & x.value & "</td></tr>")
 nächste
 rs.MoveNext
Schleife
response.write("</table>")
%>