AJAX - Datenbankoperationen
Um klar zu veranschaulichen, wie einfach es ist, mit AJAX auf Informationen aus einer Datenbank zuzugreifen, werden wir MySQL-Abfragen im laufenden Betrieb erstellen und die Ergebnisse auf "ajax.html" anzeigen. Aber bevor wir fortfahren, lassen Sie uns die Grundlagenarbeit leisten. Erstellen Sie eine Tabelle mit dem folgenden Befehl.
NOTE - Wir gehen davon aus, dass Sie über ausreichende Berechtigungen verfügen, um die folgenden MySQL-Vorgänge auszuführen.
CREATE TABLE 'ajax_example' (
'name' varchar(50) NOT NULL,
'age' int(11) NOT NULL,
'sex' varchar(1) NOT NULL,
'wpm' int(11) NOT NULL,
PRIMARY KEY ('name')
)Speichern Sie nun die folgenden Daten mit den folgenden SQL-Anweisungen in dieser Tabelle:
INSERT INTO 'ajax_example' VALUES ('Jerry', 120, 'm', 20);
INSERT INTO 'ajax_example' VALUES ('Regis', 75, 'm', 44);
INSERT INTO 'ajax_example' VALUES ('Frank', 45, 'm', 87);
INSERT INTO 'ajax_example' VALUES ('Jill', 22, 'f', 72);
INSERT INTO 'ajax_example' VALUES ('Tracy', 27, 'f', 0);
INSERT INTO 'ajax_example' VALUES ('Julie', 35, 'f', 90);Clientseitige HTML-Datei
Lassen Sie uns nun unsere clientseitige HTML-Datei ajax.html haben, die den folgenden Code enthält:
<html>
<body>
<script language = "javascript" type = "text/javascript">
<!--
//Browser Support Code
function ajaxFunction() {
var ajaxRequest; // The variable that makes Ajax possible!
try {
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e) {
// Internet Explorer Browsers
try {
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data
// sent from the server and will update
// div section in the same page.
ajaxRequest.onreadystatechange = function() {
if(ajaxRequest.readyState == 4) {
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = ajaxRequest.responseText;
}
}
// Now get the value from user and pass it to
// server script.
var age = document.getElementById('age').value;
var wpm = document.getElementById('wpm').value;
var sex = document.getElementById('sex').value;
var queryString = "?age = " + age ;
queryString += "&wpm = " + wpm + "&sex = " + sex;
ajaxRequest.open("GET", "ajax-example.php" + queryString, true);
ajaxRequest.send(null);
}
//-->
</script>
<form name = 'myForm'>
Max Age: <input type = 'text' id = 'age' /> <br />
Max WPM: <input type = 'text' id = 'wpm' /> <br />
Sex:
<select id = 'sex'>
<option value = "m">m</option>
<option value = "f">f</option>
</select>
<input type = 'button' onclick = 'ajaxFunction()' value = 'Query MySQL'/>
</form>
<div id = 'ajaxDiv'>Your result will display here</div>
</body>
</html>NOTE - Die Art der Übergabe von Variablen in der Abfrage entspricht dem HTTP-Standard und hat formA.
URL?variable1 = value1;&variable2 = value2;Der obige Code gibt Ihnen einen Bildschirm wie unten angegeben -
Ihr Ergebnis wird hier in diesem Abschnitt angezeigt, nachdem Sie Ihre Eingabe vorgenommen haben.
NOTE - Dies ist ein Dummy-Bildschirm.
Serverseitige PHP-Datei
Ihr clientseitiges Skript ist fertig. Jetzt müssen wir unser serverseitiges Skript schreiben, das Alter, wpm und Geschlecht aus der Datenbank abruft und an den Client zurücksendet. Fügen Sie den folgenden Code in die Datei "ajax-example.php" ein.
<?php
$dbhost = "localhost"; $dbuser = "dbusername";
$dbpass = "dbpassword"; $dbname = "dbname";
//Connect to MySQL Server
mysql_connect($dbhost, $dbuser, $dbpass); //Select Database mysql_select_db($dbname) or die(mysql_error());
// Retrieve data from Query String
$age = $_GET['age'];
$sex = $_GET['sex'];
$wpm = $_GET['wpm'];
// Escape User Input to help prevent SQL Injection
$age = mysql_real_escape_string($age);
$sex = mysql_real_escape_string($sex);
$wpm = mysql_real_escape_string($wpm);
//build query
$query = "SELECT * FROM ajax_example WHERE sex = '$sex'";
if(is_numeric($age)) $query .= " AND age <= $age"; if(is_numeric($wpm))
$query .= " AND wpm <= $wpm";
//Execute query
$qry_result = mysql_query($query) or die(mysql_error());
//Build Result String
$display_string = "<table>"; $display_string .= "<tr>";
$display_string .= "<th>Name</th>"; $display_string .= "<th>Age</th>";
$display_string .= "<th>Sex</th>"; $display_string .= "<th>WPM</th>";
$display_string .= "</tr>"; // Insert a new row in the table for each person returned while($row = mysql_fetch_array($qry_result)) { $display_string .= "<tr>";
$display_string .= "<td>$row[name]</td>";
$display_string .= "<td>$row[age]</td>";
$display_string .= "<td>$row[sex]</td>";
$display_string .= "<td>$row[wpm]</td>";
$display_string .= "</tr>"; } echo "Query: " . $query . "<br />";
$display_string .= "</table>"; echo $display_string;
?>Versuchen Sie nun, einen gültigen Wert (z. B. 120) in Max Age oder ein anderes Feld einzugeben, und klicken Sie dann auf die Schaltfläche MySQL abfragen.
Ihr Ergebnis wird hier in diesem Abschnitt angezeigt, nachdem Sie Ihre Eingabe vorgenommen haben.
Wenn Sie diese Lektion erfolgreich abgeschlossen haben, wissen Sie, wie Sie MySQL, PHP, HTML und Javascript zusammen verwenden, um AJAX-Anwendungen zu schreiben.