AJAX peut être utilisé pour communiquer de manière interactive avec une base de données.
Instance de base de données AJAX
L'exemple suivant montre comment une page Web lit les informations de la base de données via AJAX :
Le fichier SQL de la table Websites utilisé dans ce tutoriel : website.sql.
Exemple d'explication - Base de données MySQL
Dans l'exemple ci-dessus, la table de base de données que nous avons utilisée ressemble à ceci :
mysql> sélectionnez * sur les sites Web ;+----+--------------+---------------------- -----+-------+---------+| identifiant | url | pays |+----+--------- -----+---------------------------+-------+-------- -+| 1 | Google | https://www.google.cm/ | 1 | États-Unis || Taobao | http://www.codercto.com/ | 4689 | CN || |États-Unis |+----+--------------+---------------------------------- - -+-------+--------+5 lignes dans l'ensemble (0,01 sec)
Exemple d'explication - page HTML
Lorsque l'utilisateur sélectionne un utilisateur dans la liste déroulante ci-dessus, une fonction nommée "showSite()" est exécutée. Cette fonction est déclenchée par l'événement "onchange" :
Code du fichier test.html :
< ! HTML > <html> <tête> < méta jeu de caractères = " utf-8 " > <title> Tutoriel Codeur ( codercto.com ) </title> Fonction <script> showSite ( str ) { si ( str == " " ) { document getElementById ( " txtHint " ) innerHTML = " " ; si ( fenêtre . XMLHttpRequest ) { // Code d'exécution du navigateur IE7+, Firefox, Chrome, Opera, Safari xmlhttp = nouveau XMLHttpRequête ( ) ; autre { // Code d'exécution du navigateur IE6, IE5 xmlhttp = nouveau ActiveXObject ( " Microsoft.XMLHTTP " ) ; xmlhttp.onreadystatechange = fonction ( ) { si ( xmlhttp . readyState == 4 && xmlhttp . status == 200 ) { document getElementById ( " txtHint " ) innerHTML = xmlhttp . } xmlhttp . open ( " GET " , " getsite_mysql.php ? q = " + str , true ) ;</ tête > <corps> <formulaire> < sélectionner nom = " utilisateurs " onchange = " showSite (this.value) " > < option value = " " > Sélectionnez un site Web : </ option > < option valeur = " 1 " > Google </ option > < option valeur = " 2 " > Taobao </ option > < option value = " 3 " > Tutoriel du codeur </ option > < option valeur = " 4 " > Weibo </ option > < option valeur = " 5 " > Facebook </ option > </sélectionner> </form> < br > < div id = " txtHint " > < b > Les informations du site Web sont affichées ici... </ b > </ div > </corps> </html> La fonction showSite() effectue les étapes suivantes :
Vérifier si un site Web est sélectionné
Créer un objet XMLHttpRequest
Créer une fonction qui s'exécute lorsque la réponse du serveur est prête
Envoyer une requête à un fichier sur le serveur
Notez le paramètre (q) ajouté à la fin de l'URL (contenant le contenu de la liste déroulante)
Fichiers PHP
La page serveur appelée ci-dessus via JavaScript est un fichier PHP nommé "getsite_mysql.php".
Le code source dans « getsite_mysql.php » exécute une requête sur la base de données MySQL et renvoie les résultats dans un tableau HTML :
Code du fichier getsite_mysql.php :
<?php $q = isset ( $ _GET [ " q " ] ) intval ( $ _GET [ " q " ] ) : ' ' si ( vide ( $q ) ) { écho ' Veuillez sélectionner un site Web ' ; quitter } $con = mysqli_connect ( ' localhost ' , ' root ' , ' 123456 ' ) si ; ( ! $con ) { die ( ' Impossible de se connecter : ' . mysqli_error ( $ con ) ) ; // Sélection de la base de données mysqli_select_db ( $con , " test " ) ; // Définit l'encodage pour éviter les caractères chinois tronqués mysqli_set_charset ( $con , " utf8 " ) ; $ sql = " SELECT
* FROM Sites Web WHERE id = ' " $ q ' $ result = mysqli_query ( $ con , $ sql ) ; " <table border='1'><tr><th>ID</th><th>Nom du site Web</th><th>URL du site Web</th><th>Classement Alexa</th><th> Pays</th></tr> " ; while ( $row = mysqli_fetch_array ( $result ) ) { écho " <tr> " ; écho " <td> " . $ ligne [ ' identifiant ' ] . " </td> " ; " <td> " . $ ligne [ ' nom ' ] . " </td> " ; " <td> " . $ ligne [ ' url ' ] . " </td> " ; " <td> " . $ row [ ' alexa ' ] . " </td> " ; " <td> " . $ row [ ' pays ' ] . " </td> " ; " </tr> " ; } écho " </table> " ; mysqli_close ( $con ) ? > Explication : Lorsqu'une requête est envoyée depuis JavaScript vers un fichier PHP, que se passe-t-il :
PHP ouvre une connexion à une base de données MySQL
Rechercher l'utilisateur sélectionné
Créez un tableau HTML, remplissez-le avec des données et renvoyez l'espace réservé "txtHint".
