Przykład bazy danych AJAX

AJAX może być używany do interaktywnej komunikacji z bazą danych.

Przykład bazy danych AJAX

Poniższy przykład pokazuje, jak strona internetowa może odczytać informacje z bazy danych za pomocą AJAX:

Przykład

Informacje o kliencie zostaną wyświetlone tutaj.

Spróbuj sam

Przykład - funkcja showCustomer()

Gdy użytkownik wybierze klienta z powyższej listy rozwijanej, zostanie wykonana funkcja o nazwie "showCustomer()". Ta funkcja jest wywoływana onchange Wyzwolenie zdarzenia:

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

Funkcja showCustomer() działa następująco:

  • Sprawdzenie, czy został wybrany klient
  • Tworzenie obiektu XMLHttpRequest
  • Tworzenie funkcji, która zostanie wykonana, gdy serwer zareaguje
  • Wysyłanie żądania do pliku na serwerze
  • Proszę zauważyć, że parametr q jest dodawany do URL (z treścią listy rozwijanej)

Strona serwerowa AJAX

Strona serwerowa wywoływana przez JavaScript to plik ASP o nazwie "getcustomer.asp".

Można łatwo przepisać ten plik serwerowy za pomocą PHP lub innego języka serwerowego.

Zobacz odpowiedni przykład w PHP。

Źródłowy kod w "getcustomer.asp" wykonuje zapytanie do bazy danych i zwraca wyniki w tabeli 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("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>")
%>