AJAX kann zur interaktiven Kommunikation mit einer Datenbank verwendet werden.
AJAX-Datenbankinstanz
Das folgende Beispiel zeigt, wie eine Webseite über AJAX Informationen aus der Datenbank liest:
Die in diesem Tutorial verwendete SQL-Datei der Websites-Tabelle: Websites.sql.
Beispielerklärung – MySQL-Datenbank
Im obigen Beispiel sieht die von uns verwendete Datenbanktabelle so aus:
mysql> * aus Websites auswählen;+----+----------------------------+---------------------- -----+--------+|. id |+----+--------- -----+------------+-------+-------- -+|. 1 |. 13 | http://www.codercto.com/ |. 4689 | |. USA |+----+-------------+------------------------ - -+-------+---------+5 Reihen im Satz (0,01 Sek.)
Beispielerklärung – HTML-Seite
Wenn der Benutzer einen Benutzer in der Dropdown-Liste oben auswählt, wird eine Funktion namens „showSite()“ ausgeführt. Diese Funktion wird durch das Ereignis „onchange“ ausgelöst:
test.html-Dateicode:
< ! DOCTYPE html > <html> <Kopf> < Meta charset = " utf-8 " > <title> Programmierer- Tutorial ( codercto.com ) </title> <script> -Funktion showSite ( str ) { Wenn ( str == " " ) { document.getElementById ( " txtHint " ) . Wenn ( Fenster . XMLHttpRequest ) { // Ausführungscode für den Browser IE7+, Firefox, Chrome, Opera, Safari xmlhttp = neu XMLHttpRequest ( ) ; anders { // IE6-, IE5-Browser-Ausführungscode xmlhttp = neu ActiveXObject ( " Microsoft.XMLHTTP " ) ; xmlhttp.onreadystatechange = function ( ) { Wenn ( xmlhttp . readyState == 4 && xmlhttp . status == 200 ) { document.getElementById ( " txtHint " ) . } xmlhttp . open ( " GET " , " getsite_mysql.php ? q = " + str , true ) ;</ Kopf > <Körper> <Formular> < auswählen name = „ Benutzer “ onchange = " showSite(this.value) " > < Option value = " " > Wählen Sie eine Website aus: </ option > < Option value = " 1 " > Google </ option > < Option value = " 2 " > Taobao </ option > < Option value = " 3 " > Coder-Tutorial </ option > < Option value = " 4 " > Weibo </ option > < Option value = " 5 " > Facebook </ option > </select> </form> < br > < div id = " txtHint " > < b > Website-Informationen werden hier angezeigt... </ b > </ div > </body> </html> Die Funktion showSite() führt die folgenden Schritte aus:
Überprüfen Sie, ob eine Website ausgewählt ist
Erstellen Sie ein XMLHttpRequest-Objekt
Erstellen Sie eine Funktion, die ausgeführt wird, wenn die Serverantwort bereit ist
Senden Sie eine Anfrage an eine Datei auf dem Server
Beachten Sie den am Ende der URL hinzugefügten Parameter (q) (der den Inhalt der Dropdown-Liste enthält).
PHP-Dateien
Die oben über JavaScript aufgerufene Serverseite ist eine PHP-Datei mit dem Namen „getsite_mysql.php“.
Der Quellcode in „getsite_mysql.php“ führt eine Abfrage der MySQL-Datenbank aus und gibt die Ergebnisse in einer HTML-Tabelle zurück:
getsite_mysql.php-Dateicode:
<?php $q = isset ( $_GET [ " q " ] ) ? intval ( $_GET [ " q " ] ) : ' ' ; if ( leer ( $q ) ) { Echo ' Bitte wählen
Sie eine Website aus ' ; $con = mysqli_connect ( ' localhost ' , ' root ' , ' 123456 ' ) ; if ( ! $con ) { die ( ' Verbindung
konnte nicht hergestellt werden: ' . mysqli_error ( $con ) } // Datenbank auswählen mysqli_select_db ( $con , „ test “ ) ; // Codierung festlegen, um verstümmelte chinesische Zeichen zu verhindern mysqli_set_charset ( $ con , „ utf8 “ ) ; $ sql = „ SELECT * FROM Websites WHERE id = “ „ “ ;" <table border='1'><tr><th>ID</th><th>Website-Name</th><th>Website-URL</th><th>Alexa-Ranking</th><th> Land</th></tr> " ; while ( $row = mysqli_fetch_array ( $result ) ) { Echo " <tr> " ; Echo " <td> " . $ row [ ' id ' ] ; " <td> " . $ row [ ' name ' ] ; " <td> " . $ row [ ' url ' ]" <td> " . $ row [ ' alexa ' ] ; " <td> " . $ row [ ' land ' ] ; " </tr> " ; Echo " </table> " ; mysqli_close ( $ con ) ; Erläuterung: Was passiert, wenn eine Abfrage von JavaScript an eine PHP-Datei gesendet wird:
PHP öffnet eine Verbindung zu einer MySQL-Datenbank
Suchen Sie den ausgewählten Benutzer
Erstellen Sie eine HTML-Tabelle, füllen Sie sie mit Daten und senden Sie den Platzhalter „txtHint“ zurück
