Ajax, basé sur du JavaScript permet de faire communiquer une page Web avec un serveur Web sans occasionner le rechargement de la page.
Fonctionnement sans Ajax
Tout d’abord le navigateur envoie une requête – via une URL – au serveur. Le serveur répond en renvoyant au navigateur le code HTML de la page ainsi que tout ce qui lui est associé comme les scripts JavaScript, les images ou les éventuels médias et autres objets embarqués – donc la réponse du serveur est beaucoup plus volumineuse que la requête. Le navigateur affiche la page et l’utilisateur peut la parcourir quelques instants avant de cliquer sur un lien hypertexte qui enverra une nouvelle requête au serveur qui lui-même renverra le HTML correspondant… et ainsi de suite.
Ces échanges sont couteux pour le serveur. il va à chaque fois renvoyer tout, ce qui prend du temps et ce qui occasionne une charge pour le serveur.
Ce principe de fonctionnement montre que le navigateur n’intervient pas dans le processus si ce n’est que pour afficher la page. Le gros du travail se fait du côté du serveur.
Principe AJAX
La première requête est la même. La différence va résider dans le fait que quand l’utilisateur cliquera sur un lien – ou un autre élément cliquable – la page ne se rechargera pas et le navigateur enverra une requête au serveur, lequel renverra les données demandées dans un format léger – comme le format JSON. Dans ce cas, le serveur n’a renvoyé qu’un minimum de données ce qui est beaucoup plus léger et donc plus rapide. Le navigateur, par le biais de JavaScript, peut alors mettre à jour une petite partie de la page avec les données reçues du serveur. AJAX doit être utilisé pour modifier de petites parties d’une page.
Etape 1 : fonctionnement d’Ajax
Réaliser une page index.html
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> </head> <body> <button class="btn btn-primary" id="btn">Valider</button> <div id="result"></div> <script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script> <script src="index.js"></script> </body> </html>
Réaliser une page index.js
$( document ).ready(function() {
//click sur l'id btn
$('#btn').click(function(){
$.ajax({
type: "GET",
//appel de index.php sur le serveur web
url: "http://localhost/index.php",
success: function(data){
$("#result").html(data);
}
});
});
});
Réaliser une page index.php
<?php echo "bonjour Ajax"; ?>
Cliquer sur le bouton, bonjour Ajax devrait s’afficher. JS vient d’appeler une contenu d’une page PHP.
Etape 2 : formulaire
Réaliser un formulaire qui permette de saisir une adresse email valide. On considère une adresse valide pour notre site si elle respecte la forme [email protected]
Avec obligatoirement un point entre le nom et le prénom. Il faut utiliser une expression régulière à inclure dans votre champ HTML de saisie.
Etape 3 : connexion à la base
A la validation du formulaire, on recherche dans la base de données si cette adresse existe. Afficher un message si l’adresse a été trouvée ou non.
Etape 4 : autocomplete avec JQuery
Lors de l’insertion d’une lettre dans le champ email, on souhaite que le navigateur complète l’adresse avec des adresses prédéfinis.
Pour cela réaliser un fichier autocomplete.js et utiliser la méthode autocomplete de JQUERY avec un tableau d’email prédéfinis dans ce fichier.
Etape 5 : autocomplete avec JQuery et PHP
On souhaite maintenant que lors de l’insertion d’une lettre dans le champ, le fichier autocomplete.js recherche les adresses non pas dans un tableau mais dans la base de données.
Pour cela, appeler un fichier PHP dans le fichier autocomplete.js . Ce fichier PHP renverra la liste des emails de la base de données.
Le JS
$("#email").autocomplete({
source: "http://localhost/ajax5.php"
});
La page PHP devra afficher après votre requête SQL:
["[email protected]","[email protected]","[email protected]","[email protected]"]
Le fichier PHP à adapter
<?php
try{
$dbh=new PDO('mysql:host=localhost;dbname=test', 'root', '');
}catch(PDOException $e){
echo "Connexion échouée:".$e->getMessage();
}
$sql="SELECT email FROM email";
$statement=$dbh->query($sql) or die(print_r($dbh->errorInfo(),true));
$array=$statement->fetchAll(PDO::FETCH_OBJ);$statement->closeCursor();
/* formater le tableau*/
?>
Etape 6 : autocomplete amélioré avec JQuery
Améliorer votre programme pour que la recherche ne se lance qu’à partir de 3 lettres.