AJAX est une technologie de développement web qui est utilisée pour mettre à jour une page web sans recharger tout le contenu de la page web.

AJAX met à jour seulement des parties d'une page web par exemple les données, avec lesquelles l'utilisateur interagit. Cette intéraction est qualifiée d'asynchrone.

La méthode FETCH() est également un objet javascript qui propose des fonctionnalités asynchrone. Etant apparu récemment, il est conseillé d'utiliser cet objet en remplacement de XHR. FETCH() apporte des simplifications et des fonctionnalités supplémentaires.

L'exemple ci-dessous montre un calcul avec plusieurs valeurs envoyées à un script php de manière asynchrone avec ajax et le résultat est retourné au navigateur client sous forme d'une seule valeur texte.

Le script JAVASCRIPT-AJAX-FETCH avec PHP POST utilisé pour cet exemple

Pour un résultat similaire avec l'api FETCH, d'autres scripts peuvent s'appliquer de différentes manières (procédurales, fonctions, classes...).

<script>
function formAjaxFetch_v01() {

// lecture de la saisie du formulaire
var nb1 = document.getElementById("nbSaisie1").value;
var nb2= document.getElementById("nbSaisie2").value;
var in3z = document.getElementById("AfficheResultat")

// pour le séparateur décimal anglais -> francais
nb1 = nb1.replace(/,/g, '.');
nb2 = nb2.replace(/,/g, '.');

// validation de la saisie pour ne pas
// créer un échange de données vide

boo = true;
// une des saisies n'est pas un nombre
if (isNaN(nb1) || isNaN(nb2)) {
  boo = false;
}

// si ce sont des nombres, vérification des bornes
if ((Number(nb1) < 0) || (Number(nb1) > 50)){
  boo = false;
 } else if ((Number(nb2) < 0) || (Number(nb2) > 50)){
  boo = false;
}

// saisie valide
// boo est vrai
// on continue
if (boo){
  var e = document.getElementById("liste_deroul");
  var oper = e.options[e.selectedIndex].value;

  const url = "fichier_liaison.php";

  // objet formulaire
  var formData = new FormData();

  // ajout des saisies dans l'objet
  formData.append('nb1', nb1);
  formData.append('nb2', nb2);
  formData.append('oper', oper);

  // paramètres d'envoi de l'objet
  let fetchData = {
    method: 'POST',
    body: formData
  };


  /* --------- */
  /* API FETCH */
  /* --------- */

  /* implémentation de l'api fetch, 2 paramètres */
  fetch(url, fetchData)

    // format de la donnée en réception (ici 1 résultat texte)
    .then((response) => { // -1
      return response.text();
    })

    // affichage dans l'élément html
    .then((data) => {
      in3z.value = data;
    })

    // gestion des erreurs de l'api fetch
    .catch(function(error) {
      console.log(error);
    });

  // fetch

} // if boo

</script>

-1- .then est une méthode de l'api fetch. Les méthodes .then utilisées dans cet exemple, combinent des concepts de promises et callback pour gérer l'envoi et la réception de données de manière asynchrone.

Le script PHP avec POST utilisé pour cet exemple

(script identique à celui des exemples précédents pour l'envoi d'un résultat texte...)

fichier_liaison.php

<?php

// réception POST des données saisies
$nb_1 = htmlspecialchars($_POST['nb1']);
$nb_2 = htmlspecialchars($_POST['nb2']);
$nb_oper = htmlspecialchars($_POST['oper']);

// étape de gestion des incohérences ou erreurs
// de saisie nécessaire mais pas mentionnée

// utilisation de php pour renvoyer le résultat du calcul demandé
if ($nb_oper === "add") {
 $nb_res_1 = $nb_1 + $nb_2;
} else if ($nb_oper === "subst") {
 $nb_res_1 = ($nb_1 - $nb_2) > 0 ?
             $nb_1 - $nb_2 : $nb_2 - $nb_1;
}

// envoi de la réponse au script ajax
echo $nb_res_1;

?>

Les scripts ci-dessus présentent une communication basique entre un navigateur et un serveur web. L'api fetch est utilisée depuis plusieurs années sur des sites web. C'est une api qui ne nécessite pas une librairie externe.

C'est une évolution du langage de développement web javascript. Cette évolution accompagne d'autres évolutions avec des principes de gestion asynchrone (non-bloquante) des connexions entre un navigateur web client et un serveur web.