Nous allons voir Ajax mais uniquement avec la librairie/framework jQuery. Vous garderez en tête qu'il existe une manière pure javascript de faire le même chose et que bien sur d'autre librairies/frameworks permettent de faire la même chose.

Un appel AJAX part donc à l'initiative de la partie client. Ca sera un appel depuis javascript qui répond lui-même à un évènement javascript. Cet appel AJAX peut transmettre des paramètres puis va déclencher du code coté serveur (pour nous du PHP). Le code coté serveur va générer du texte (ou du JSON !!!) qui sera rendu au client qui a appelé le serveur. Le code coté client va utiliser ce que PHP lui donne pour mettre à jour l'interface/la page web/les styles, etc. Le contenu que PHP génère peut utiliser des fichiers, une base de donnée (pas le scope de ce cours) qui peuvent dépendre de ce que les autres utilisateurs font ou ont fait. AJAX va donc permettre non seulement de s'affranchir de certaines limites du web (accéder à des fichiers, des BDs, tout Internet, etc.) mais il va surtout permettre de faire une application multi-utilisateur distribuée qui ne nécessite pas d'installer autre chose qu'un navigateur web (et je crois qu'on peut dire que 99,999% des ordinateurs en ont déjà un) et qui contourne presque tous les pare-feu et autres mesures de sécurité (car un pare-feu qui interdit AJAX interdit tout le web et généralement l'utilisateur ne peut plus travailler du tout). 

un appel AJAX standard avec jQuery + le code PHP qui va avec

<!doctype html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <title>Titre de la page</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    function setNom(prenom){
      $.ajax({
        method: "GET",
        url: "getNomForPrenom.php",
        data: {"prenom": prenom }
      }).done(function(e) {
        $("#prenom").css("background", "lightgreen");
        $("#nom").val(e);
      }).fail(function(e) {
        console.log(e);
        $("#message").html("<span class='ko'> Error: network problem </span>");
      });

      $(".truc").css("background", "yellow");
      $("#mabellediv").css("color", "red");
      $("div input").addClass("encadre");
    }

  </script>
</head>
<body >
  Bonjour le monde
  <div>
    Entrez votre prénom :
      <input type="text" id="prenom" onchange="setNom(this.value)">
      <input type="text" id="nom"><br>
  </div >
  <div id="message">...</div>
</body>
</html>

<?php
  $prenom = $_GET["prenom"];
  if ($prenom=="frederic") print("VERNIER");
  else if ($prenom=="nicolas") print("SABOURET");
  else if ($prenom=="sandrine") print("DELAHAYE");
  else print("INCONNU")
?>



Attention 1 : je n'ai pas protégé les entrées en PHP pour des raisons de concision mais bien sur il faudrait le faire

Attention 2 : dans les formulaires que nous connaissions, les input avaient un attribut name. Ici c'est nous qui contrôlons ce que nous envoyons à PHP. j'ai préféré mettre un id car c'est plus sûr pour jQuery qui ne trouvera qu'une seule balise avec cet id. 

Envoie de données

{" prenom": prenom } contrôle complètement ce qu'on envoie et avec quel nom. 

  • On aurait par exemple pu remplacer les tirets des prénoms composés par des espaces, tout mettre en minuscule, etc. 
  • On aurait pu utiliser le nom "firstname" en anglais à la place de "prenom" si le coté serveur était un service web en anglais.
  • On aurait pu envoyer 2 paramètres {"prenom": prenom, "cherche":"nom de famille" } si c'était un service générique et qu'il fallait specifier ce que l'on veut en retour du prénom

Comme vous le voyez, tout est envoyé dans un objet "à la mode JSON" puisque on est entre accolade. On peut même envoyer des types plus complexes, un tableau de nombres, un objet avec comme champs un nom, un prénom et une liste de notes, etc. En PHP on récupérera les données de la même façon que prenom, ce qui changera c'est la manière d'utiliser le $ _GET["monTableau" ]; en PHP (ici on se doute que c'est un tableau non ?). Bref c'est à la charge du dévelopeur d'etre cohérent entre ce qu'il envoie avec javascript et comment il utilise les données avec PHP.

Récupération de données

Par défaut PHP écrit des chaines de caractères et Javascript récupère des chaines de caractères = la variable e de .done (function( e) {...} ".Il est toutefois possible de parler "JSON" dans l'autre sens sans grand effort. Bizarrement c'est à l'initiative de Javascript de dire qu'il v a attendre du JSON en retour. S'il ne le fait pas et que PHP crache du JSON javascript va recevoir le JSON comme une grosse chaîne de caractère (bof). On rajoutera dataType: "json"dans l'appel ajax ET on écrira du JSON avec PHP grâce à la fonction  json_encode(...) qui transformera un objet/tableau/truc PHP en JSON. La fonction array(...) de PHP permet facilement de construire un tel tableau ou objet. 

$.ajax({
  method: "GET",
  dataType: "json", // NOUVEAU JS VEUX DU JSON
  url: "getNomForPrenom.php",
  data: {"prenom": prenom }
}).done(function(obj) {
  $("#prenom").css("background", obj.couleur);
  $("#nom").val(obj.nom);
});


<?php
  header('Content-Type: application/json; charset=utf-8');// NOUVEAU. PHP PROMET DE DONNER DU JSON
  $prenom = $_GET["prenom"];
  if ($prenom=="frederic")      print(json_encode(array("nom"=>"VERNIER"  ,"couleur"=>"green")));
  else if ($prenom=="nicolas")  print(json_encode(array("nom"=>"SABOURET" ,"couleur"=>"#f00")));
  else if ($prenom=="sandrine") print(json_encode(array("nom"=>"DELAHAYE" ,"couleur"=>"rgb(0,0,255")));
  else print(json_encode(array("nom"=>"INCONU" ,"couleur"=>"grey")));
?>


comme on le voit dans l'exemple ci-dessus, la fonction done() a maintenant un paramètre different que j'ai choisi d'appeler obj pour le différencier de e. Encore une fois ce qui change fondamentalement c'est la façon d'utiliser obj puisqu'on utilise maintenant obj.nom et obj.couleur au lieu d'utiliser e directement comme une chaine de caractères.

Última modificación: martes, 11 de febrero de 2025, 17:28