Envoi d'un formulaire à un script CGI par AJAX
Cet exemple montre comment envoyer les données d'un formulaire HTML à un script CGI en utilisant AJAX : le résultat de la requête (sortie standard du script CGI) sera affiché sur cette page dans un paragraphe et sans actualiser la page.
Le script CGI est ici un programme en Ruby qui se contente d'inverser une chaîne de caractère en basculant la casse des lettres (par exemple JQuery devient YREUqj).
Démonstration de l'application :
3 - Observez le résultat renvoyé par le script CGI dans le cadre suivant :
le résultat du script CGI sera affiché ici |
Placer ce texte dans le formulaire
Explications et détails techniques de cet échange d'information entre un formulaire HTML et un script CGI en utilisant AJAX :
Les données sont transmises du formulaire vers le script CGI par la méthode POST, ce qui signifie que le script CGI ajax.rb va récupérer les données directement sur son entrée standard avec la fonction gets.
Voici le code source du script CGI en Ruby nommé ajax.rb :
#!/usr/bin/ruby
# encoding: utf-8
# Script CGI réalisé le 6 juillet 2015
# www.gecif.net
puts "Content-type: text/html;charset=UTF-8\n\n"# Récupère les paramètres POST directement sur l'entrée standard :
chaine = gets;
# Renvoie la chaîne inversée avec la casse des lettre modifiée :
puts chaine.reverse.swapcase;
Mais les données ne sont pas directement envoyées par le formulaire mais par une fonction JavaScript nommée appeler_cgi().
Voici le source de cette fonction appeler_cgi() :
//////////////////////////////////////////////////////////////////////////////
// Fonction pour appeler le script CGI sur le serveur grâce à AJAX :
// Réalisé le 06 juillet 2015 par Jean-Christophe MICHEL
// www.gecif.net
function appeler_cgi() {$.ajax({
type: "POST",
url: "ajax.rb",
contentType: "application/x-www-form-urlencoded;charset=UTF-8",
// les données transmises par POST sont indiquées par le paramètre data de l'objet $.ajax() : ici une simple chaîne de caractères
data: $("#chaine").val(),
error:function(msg){
alert( "Erreur : " + msg );
},
// le retour du CGI (sa sortie standard) est transmis au paramètre unique de la fonction configurée dans success :
success:function(data){
//affiche le retour du script CGI dans le conteneur dédié
$('#ma_balise').text(data);
}
});
}
Le fait que les données ne soient pas envoyées par le formulaire est que leur format lors de la transmission par POST est libre : on transmet ici une chaîne de caractères et non un ensemble de paramètres au format nom=valeur séparés par des &.
Cette chaîne de caractères est précisée par le paramètre data de la foncfion JQuery $.ajax().
Le bouton Envoyer du formulaire n'appelle pas directement le script CGI mais appelle la fonction JavaScript appeler_cgi() qui enverra les données par POST au script CGI. Voici le code source du formulaire HTML :
<form onSubmit="return false">
<p>Entrez une chaîne de caractères :
<input name="chaine" type="text" id="chaine" value="" size="80" />
</p>
<p>Envoyer les données par AJAX au script CGI
<input type="submit" name="Submit" value="Envoyer" onclick="appeler_cgi()"/>
</p>
</form>
Remarque : le bouton du formulaire pourrait très bien être remplacé par un simple lien qui appelle la fonction JavaScript appeler_cgi().
Et voici en détail le cheminement des données entre l'utilisateur (sur le client) et le script CGI (sur le serveur) et inversement pour le retour :
1 - l'utilisateur remplit le formulaire
2 - l'utilisateur valide le formulaire : la fonction JavaScript appeler_cgi() est lancée
3 - la fonction appeler_cgi() lance une requête Ajax en appelant le script ajax.rb et en lui transmettant par POST une chaîne de caractères (ici seulement le contenu du champ texte du formulaire) en récupérant les données dans le formulaire grâce à JQuery
4 - le script CGI ajax.rb reçoit les données (une chaîne de caractères) sur son entrée standard (par gets), les traite, et envoie son résultat (également une chaîne de caractères) sur sa sortie standard (par puts)
5 - la fonction appeler_cgi() reçoit la sortie du script CGI et la transmet à la fonction définie dans le paramètre success de la fonction $.ajax() de JQuery
6 - Enfin la fonction définie dans le paramètre success de la fonction $.ajax() écrit les données reçues à leur place sur la page en modifiant le contenu d'une balise HTML toujours grâce à JQuery
Quelques mots sur l'encodage des caractères : tous les caractères sont ici encodés en UTF-8 (les fichiers sources ajax.rb et cette page web jquery_ajax_formulaire.html, l'envoi des caractères par Ajax entre le client et le script CGI par la méthode POST, le retour de la réponse entre le script CGI et le client par Ajax). Si le script CGI se contentait de renvoyer la chaîne reçue les caractères accentués seraient correctemant affichés. Le problème d'affichage avec les chaînes contenant des caractères accentués ne vient pas d'une incompatibilité d'encodage entre les différents systèmes (client, serveur, Ajax, Ruby, http, POST, JavaScript, JQuery, etc.) mais vient de la méthode reverse de Ruby qui visiblement inverse la chaîne octet par octet : comme les caractères accentués sont codés sur 2 octets en UTF-8, après inversion de la chaîne par la méthode reverse de Ruby ces 2 octets ne correspondent plus à un caractère unicode affichable. Il faut savoir que par défaut JQuery envoie les caractères encodés en UTF-8, même si on ne le précise pas dans le programme.
Enfin voici l'ensemble des techniques (ou méthodes, ou langages, ou interfaces, ou protocoles, ou principes, ou concepts, etc.) mises en jeu et dans l'ordre d'utilisation :
utilisateur > formulaire > JavaScript > Ajax > HTTP > CGI > Ruby > CGI > HTTP > Ajax > Javascript > HTML > utilisateur
L'ensemble de cette chaîne peut être appelé "le web 2.0" (bien que cela ne veuille rien dire si on ne précise pas les technologies utilisées ...), et :
Ce chaînage montre bien la position d'Ajax, maillon indispensable dans la chaîne du web 2.0 si on veut modifier seulement une partie de la page en interrogeant le serveur. De plus cette chaîne de transmission de l'information place CGI au centre du web 2.0 (bien que les maillons CGI + Ruby + CGI puissent être remplacés par PHP).
Une autre chaîne simplifiée résumant le web 2.0 et positionnant Ajax peut être aussi :
utilisateur > navigateur > JavaScript > Ajax > HTTP > PHP > HTTP > Ajax > Javascript > navigateur > utilisateur
Bien que les langages côté serveur soient nombreux (Ruby, Perl, Python, PHP, etc.), le langage côté client est forcément JavaScript pour utiliser Ajax. Mais il existe aujourd'hui de nombreux frameworks bien pratiques permettant d'interfacer Ajax (ce qui revient à utiliser simplement l'objet XMLHttpRequest de JavaScript) sans utiliser de code JavaScript trop complexe (JQuery, Prototype, Script.aculo.us, Dojo, etc.).
Réalisé par Jean-Christophe MICHEL
Juillet 2015