Mise en œuvre de AJAX

By 4 décembre 2007Javascript/jQuery, Tutoriels

AJAX

AJAX qu’est-ce que c’est ?

Ce n’est pas un nouveau langage mais bien plutôt un style de développement permettant la mise à jour dynamique de contenu dans une page web sans avoir besoin de la recharger. AJAX est en fait un objet intégré depuis pas mal de temps à JavaScript : XMLHttpRequest. Cet objet permet d’échanger des données avec votre serveur en mode synchrone ou asynchrone.

Edit du 19/05/10 : cet article date maintenant de 3 ans, il a toujours une valeur informative et didactique mais depuis, JQuery est apparu, et je ne conseillerais plus à personne de développer de l’AJAX à la main comme ceci, principalement pour des raisons de compatibilité avec les différents navigateurs.

Exemple de petite application

Pour ce premier exemple, nous allons créer un formulaire contenant un champ de texte dont le contenu sera soumis à un script php qui nous renverra un message que nous afficherons en-dessous de notre formulaire. Modeste mais c’est un début 😉

Le code javascript

Le code suivant est en fait composé de 3 fonctions définies dans le header de la page html.

La première crée l’objet XMLHttpRequest qui est à la base de tout code reposant sur AJAX. Remarquez qu’Internet Explorer se distingue encore et que le code standard ne sera compatible avec IE qu’à partir de la version 7.

function xmlhttpPost(strURL) {
    var xmlHttpReq = false;
    var self = this; // problèmes de portée ?
    if (window.XMLHttpRequest) { // Mozilla/Safari
        self.xmlHttpReq = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) { // IE
        self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
    }
    self.xmlHttpReq.open('POST', strURL, true); // en mode asynchrone
    self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    self.xmlHttpReq.onreadystatechange = function() {
        if (self.xmlHttpReq.readyState == 4) { // chargé
            updatepage(self.xmlHttpReq.responseText); // mise à jour de la page
        }
    }
    self.xmlHttpReq.send(getquerystring());
}

Voici ensuite la fonction de récupération des valeurs saisies dans le formulaire

function getquerystring() {
  var form = document.forms['formulaire'];   
  var emetteur = form.emetteur.value;
  qstr = 's=' + escape(emetteur);
  // Remarque: pas de '?' avant la chaîne de requête
  return qstr;
}

La dernière fonction s’occupe des mises à jour de la page web.

function updatepage(str) {
  document.getElementById("resultat").innerHTML = str;
} 

La page HTML

Il ne vous reste plus qu’à créer un petit formulaire html avec un bouton d’envoi et une zone div pour afficher le résultat renvoyé par la page php.

La page PHP

Dans cette page, on récupère de manière classique les variables envoyées par la méthode POST dans le tableau super-global $_POST.

<?php
  if(isset($_POST['s'])) {
    $emetteur = $_POST['s'];
    echo "un message émanant de $emetteur a été transmis au serveur";
  } else {
    echo "problème...";
  }
?> 

Le code de la page HTML en un seul bloc

<html>
<head>
<title>je teste AJAX</title>
<script language="Javascript">
function xmlhttpPost(strURL) {
    var xmlHttpReq = false;
    var self = this;
    if (window.XMLHttpRequest) { // Mozilla/Safari
        self.xmlHttpReq = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) { // IE
        self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
    }
    self.xmlHttpReq.open('POST', strURL, true);
    self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    self.xmlHttpReq.onreadystatechange = function() {
        if (self.xmlHttpReq.readyState == 4) {
            updatepage(self.xmlHttpReq.responseText);
        }
    }
    self.xmlHttpReq.send(getquerystring());
}

function getquerystring() {
    var form = document.forms['formulaire'];
    var sender = form.sender.value;
    var message = form.message.value;
    qstr = 's=' + escape(sender) + '&m=' + escape(message);
    return qstr;
}

function updatepage(str){
    document.getElementById("resultat").innerHTML = str;
}
</script>
<style type="text/css">
    p, input, textarea, div { font: bold 8pt verdana, sans-serif; }
    .resultat { color: red; }
</style>
</head>

<form name="formulaire">
  <p>Votre nom : <input name="emetteur" type="text"><br><br>
  <input value="Envoyer" type="button" onclick="JavaScript:xmlhttpPost('script.php')"></p>
  <div id="resultat" class="resultat"></div>
</form>
</body>
</html>

 

4 commentaires

Laisser un commentaire