Βάση δεδομένων AJAX

Πίνακας περιεχομένων

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

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

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

Παράδειγμα

Δοκιμάστε το μόνοι σας →

<!DOCTYPE html>
<html>
<style>
th,td {
  padding: 5px;
}
</style>
<body>

<h2>The XMLHttpRequest Object</h2>

<form action=""> 
  <select name="customers" onchange="showCustomer(this.value)">
    <option value="">Select a customer:</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">Customer info will be listed here...</div>

<script>
function showCustomer(str) {
  if (str == "") {
    document.getElementById("txtHint").innerHTML = "";
    return;
  }
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("txtHint").innerHTML = this.responseText;
  }
  xhttp.open("GET", "getcustomer.php?q="+str);
  xhttp.send();
}
</script>
</body>
</html>

Παράδειγμα Επεξήγηση - Η συνάρτηση showCustomer().

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

εμφάνιση Πελάτη

function showCustomer(str) {
  if (str == "") {
    document.getElementById("txtHint").innerHTML = "";
    return;
  }
  const xhttp = new XMLHttpRequest();
  xhttp.onload = function() {
    document.getElementById("txtHint").innerHTML = this.responseText;
  }
  xhttp.open("GET", "getcustomer.php?q="+str);
  xhttp.send();
}

Η συνάρτηση showCustomer() κάνει τα εξής:

Ελέγξτε εάν έχει επιλεγεί πελάτης
Δημιουργήστε ένα αντικείμενο XMLHttpRequest
Δημιουργήστε τη συνάρτηση που θα εκτελεστεί όταν η απόκριση διακομιστή είναι έτοιμη
Στείλτε το αίτημα σε ένα αρχείο στο διακομιστή
Σημειώστε ότι μια παράμετρος (q) προστίθεται στη διεύθυνση URL (με το περιεχόμενο της αναπτυσσόμενης λίστας)

Η σελίδα διακομιστή AJAX

Η σελίδα στον διακομιστή που καλείται από το JavaScript παραπάνω είναι ένα αρχείο PHP που ονομάζεται "getcustomer.php".

Ο πηγαίος κώδικας στο "getcustomer.php" εκτελεί ένα ερώτημα σε μια βάση δεδομένων και επιστρέφει το αποτέλεσμα σε ένα HTML τραπέζι:

 <?php
$mysqli = new mysqli("servername", "username", 
  "password", "dbname");
if($mysqli->connect_error) {
  
  exit('Could not connect');
}
$sql = "SELECT customerid, companyname, 
  contactname, address, city, postalcode, country
FROM customers WHERE 
  customerid = ?";
$stmt = $mysqli->prepare($sql);
  $stmt->bind_param("s", $_GET['q']);
  $stmt->execute();
$stmt->store_result();
$stmt->bind_result($cid, 
  $cname, $name, $adr, $city, $pcode, $country);
$stmt->fetch();
$stmt->close();
  
echo "<table>";
echo "<tr>";
echo "<th>CustomerID</th>";
echo 
  "<td>" . $cid . "</td>";
echo "<th>CompanyName</th>";
echo "<td>" . $cname 
  . "</td>";
echo "<th>ContactName</th>";
echo "<td>" . $name . "</td>";
  echo "<th>Address</th>";
echo "<td>" . 
  $adr . "</td>";
echo "<th>City</th>";
  echo "<td>" . $city . "</td>";
echo "<th>PostalCode</th>";
echo "<td>" . 
  $pcode . "</td>";
echo "<th>Country</th>";
echo "<td>" . $country . 
  "</td>";
echo "</tr>";
echo "</table>";
?>