Javascript Formulaire web avec AJAX (sans jquery)

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.

XMLHttpRequest (en abbrégé XHR) fait partie des principaux objets javascript qui gèrent des connexions asynchrones. XHR contient des méthodes pour des données JSON, XML, texte…

Depuis plusieurs années, XHR est utilisé sur de nombreux sites et pages web pour ajouter des fonctionnalités intéractives, dynamiques et rendre les accès et l’utilisation plus rapides.

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 (PHP POST sans JQUERY) utilisé pour cet exemple

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

// 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;

// variable envoyée au serveur php
var creds = « nb1= »+ nb1 + « &nb2= » + nb2 + « &oper= » + oper;

// initialisation d’un objet XMLHTTP
// compatible avec les anciens navigateurs web
if (window.XMLHttpRequest) {
var ajx = new XMLHttpRequest();}
else {
var ajx = new ActiveXObject(« Microsoft.XMLHTTP ») ;
}

// gestion asynchrone de la connexion…
// les codes 4 et 200 sont des codes de
// de statut de la page web 1-
// et de transmission de données -2-
ajx.onreadystatechange = function () {
if (ajx.readyState == 4 && ajx.status == 200) {
in3z.value = ajx.responseText;
}
};

// fichier php qui réceptionne et retourne les données
const url = « fichier_liaison.php »;

// utilisation de la méthode POST
// true pour requête asynchrone
ajx.open(« POST », url, true);
ajx.setRequestHeader(« Content-type », « application/x-www-form-urlencoded »);
// données envoyées (asynchrone)
ajx.send(creds);

} // fx
} // if boo
</script>

-1- readyState 4 veut dire que la requête est créee,
-2- status 200 veut dire que la requête a été reçue (=succès),

onreadystatechange est une fonction callback (qui attend un évènement comme un click de souris…) asynchrone (qui fonctionne en arrière-plan sans bloquer le script d’appel jusqu’à la fin de l’exécution)
Le script PHP avec POST utilisé pour cet exemple

<?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;

Le script JAVASCRIPT-AJAX (PHP GET sans JQUERY)

// 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;

// variable envoyée au serveur php
var creds = « nb1= »+ nb1 + « &nb2= » + nb2 + « &oper= » + oper;

// gestion asynchrone de la connexion…
// les codes 4 et 200 sont des codes de
// de statut de la page web
// et de transmission de données
ajx.onreadystatechange = function () {
if (ajx.readyState == 4 && ajx.status == 200) {
in3z.value = ajx.responseText;
}
};

// fichier php qui réceptionne et retourne les données
const url = « fichier_liaison.php »;
// ajout d’un ? dans l’url pour la méthode GET
const urlget = url + « ? » + creds;

// utilisation de la méthode GET
ajx.open(« GET », urlget, true);
ajx.setRequestHeader(« Content-type »,
« application/x-www-form-urlencoded »);
// données envoyées (asynchrone)
ajx.send(creds);

} // fx
} // if boo
</script>

Le script PHP avec GET

<?php

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

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

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

Cet exemple a été testé avec la méthode GET sur ce lien

Les scripts ci-dessus présentent une communication basique entre un navigateur et un serveur web.

Cet exemple peut être géré entièrement avec javascript mais c’est pour montrer les possibilités de gestion d’un formulaire web de manière asynchrone.