Παράδειγμα Βάσης Δεδομένων AJAX

Το AJAX μπορεί να χρησιμοποιηθεί για αμοιβαία επικοινωνία με βάση δεδομένων.

Παράδειγμα Βάσης Δεδομένων AJAX

Το παρακάτω παράδειγμα δείχνει πώς μια ιστοσελίδα μπορεί να διαβάσει πληροφορίες από βάση δεδομένων μέσω AJAX:

Οι πληροφορίες πελάτη θα εμφανιστούν εδώ.

Προσπαθήστε τον κώδικα!

Παράδειγμα Επεξήγησης - Σελίδα HTML

Όταν ο χρήστης επιλέξει έναν πελάτη από τη μενού που βρίσκεται παρακάτω, θα εκτελεστεί η συνάρτηση "showCustomer()" που τίθεται σε επαγωγή από το γεγονός "onchange":

<!DOCTYPE html>
<html>
<head>
<script>
function showCustomer(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  // Για IE7+, Firefox, Chrome, Opera, Safari κώδικας
  xmlhttp=new XMLHttpRequest();
  }
else
  // Για IE6, IE5 κώδικας
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","getcustomer.asp?q="+str,true);
xmlhttp.send();
}
</script>
</head
<body>
<form>
<select name="customers" onchange="showCustomer(this.value)">
<option value="">Επιλέξτε έναν πελάτη:</option>
<option value="ALFKI">Alfreds Futterkiste</option>
<option value="NORTS ">North/South</option>
<option value="WOLZA">Wolski Zajazd</option>
</select>
</form>
<br>
<div id="txtHint">Οι πληροφορίες πελάτη θα εμφανιστούν εδώ...</div>
</body>
</html>

Σημείωση κώδικα:

Αν δεν έχει επιλεγεί πελάτης (str.length είναι ίσο με 0), η συνάρτηση θα καθαρίσει το txtHint placeholder και θα εξέλθει από τη συνάρτηση.

Αν έχει επιλεγεί ένας πελάτης, η συνάρτηση showCustomer() θα εκτελέσει τα παρακάτω βήματα:

  • Δημιουργία αντικειμένου XMLHttpRequest
  • Δημιουργία συνάρτησης που θα εκτελεστεί όταν ο διακομιστής είναι έτοιμος να απαντήσει
  • Αποστολή αιτήματος στον φάκελο που βρίσκεται στον διακομιστή
  • Παρακαλώ προσθέστε τον παραμέτρο (q) στο τέλος του URL ( περιλαμβάνει το περιεχόμενο της下拉列表)

Αρχείο ASP

Αυτό το σελίδα διακομιστή που καλείται από το JavaScript είναι το αρχείο ASP με το όνομα "getcustomer.asp".

Η κώδικας στο "getcustomer.asp" εκτελείται μια φορά για να ελέγξει τη βάση δεδομένων και στη συνέχεια επιστρέφει τα αποτελέσματα σε μια 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("/db/northwind.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>")
%>