AJAX Database eksempel

AJAX kan bruges til interaktiv kommunikation med databaser.

AJAX Database eksempel

Følgende eksempel viser, hvordan en webside kan hente information fra en database ved hjælp af AJAX:

Eksempel

Kundeoplysninger vil blive vist her

Prøv det selv

Eksempel - funktionen showCustomer()

Når brugeren vælger en kunde fra rullegardinmenuen ovenfor, udføres funktionen "showCustomer()" navngivet. Denne funktion kaldes onchange triggere begivenhed:

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

Funktionen showCustomer() udfører følgende:

  • Tjek om kunden er valgt
  • Opret XMLHttpRequest-objektet
  • Opret en funktion, der skal køres, når serveren er klar med svaret
  • Send forespørgsel til filen på serveren
  • Bemærk, at parameteren q tilføjes til URL'en (indhold med rullegardinmenu)

AJAX-server-side

Server-siden kaldet af JavaScript er en ASP-fil ved navn "getcustomer.asp".

Det er nemt at omskrive denne serverfil ved hjælp af PHP eller andre server-sprog.

Se tilsvarende PHP-eksempel。

i kilden kode i "getcustomer.asp" udfører en databaseorienteret forespørgsel og returnerer resultaterne i en HTML-tabel:

<%
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>")
%>