AJAX - Envoyer une demande à un serveur

Attention, depuis PHP 5.5.0, certaines extensions SQL sans doute utilisées dans ce tutoriel peuvent être obsolètes et seront supprimées dans le futur, vous devez donc adapter les codes! Exemples ici.
Pour envoyer une demande à un serveur, on utilise la méthode open() et send() de l'objet XMLHttpRequest. Pour utiliser une méthode ou un attribut de l'objet XMLHttpRequest, il faut simplement concaténer la variable à la méthode ou à l'attribut (variable.attribut ou variable.méthode). Si votre variable ce nomme par exemple "tarte" et que l'on fait appel à la méthode "send()", on obtient donc : tarte.send();. Si on fait appel à l'attribut "readyState" on obtient : tarte.readyState, etc...

GET vs POST 
Une requête GET est utilisée pour obtenir des données à partir du serveur.
Une requête POST est utilisé pour modifier des données sur le serveur.

Exemple d'une demande en GET :
mavariable.open("GET","teste.txt",true);
mavariable.send();
GET est la méthode utilisé.
teste.txt correspond à l'url de la page.
true correspond au mode "asynchrone".

Exemple d'une demande en GET avec paramêtre :
mavariable.open("GET","teste.php?param1=valeur1&param2=valeur2",true);
mavariable.send();
Exemple d'une demande en POST :
mavariable.open("POST","teste.txt",true);
mavariable.send();
Pour des données en POST qui utilise des paramètre, il faut ajoutez un en-tête HTTP avec la méthode setRequestHeader() et spécifier les données que vous voulez envoyer directement dans la méthode send().

Exemple d'une demande en POST avec paramètre :
mavariable.open("POST","teste.php",true);
mavariable.setRequestHeader("Content-type","application/x-www-form-urlencoded");
mavariable.send("param1=valeur1&param2=valeur2");
Pour bien comprendre, nous allons faire un teste grandeur nature en créant une fonction appelé depuis un formulaire. Le résultat obtenu sera affiché dans un simple "div".

Etape 1 :
On créer un simple formulaire qui au clique sur un bouton va lancer une fonction nommé teste_ajax() .
<form method="POST">
<input type="button" value="Go" onclick="teste_ajax()">
</form>
Etape 2 :
On créer un simple div nommé "mondiv" qui affichera le résultat de la fonction.
<div id="mondiv"></div>
Etape 3 :
On créer un simple fichier texte nommé "mon-fichier.txt" contenant juste le mot "Bonjour".

Etape 4 :
On créer la fonction teste_ajax() et pour bien comprendre la bête, on va procéder étape par étape.

On créer la fonction.
<script type="text/javascript">
function teste_ajax(){
 
}
</script>
On déclare une variable et on teste si le navigateur prend en charge l'objet XMLHttpRequest ou un ActiveXObject.
<script type="text/javascript">
function teste_ajax(){
    //On déclare une variable
    var mavariable;
    //code pour IE7+, Firefox, Chrome, Opera, Safari   
    if (window.XMLHttpRequest){
        mavariable = new XMLHttpRequest();
    }
    //code pour IE6, IE5   
    else{
        mavariable = new ActiveXObject("Microsoft.XMLHTTP");
    }
 
}
</script>
On assigne une fonction à la propriété onreadystatechange.
<script type="text/javascript">
function teste_ajax(){
    //On déclare une variable
    var mavariable;
    //code pour IE7+, Firefox, Chrome, Opera, Safari   
    if (window.XMLHttpRequest){
        mavariable = new XMLHttpRequest();
    }
    //code pour IE6, IE5   
    else{
        mavariable = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //On assigne une fonction à la propriété onreadystatechange
    mavariable.onreadystatechange = function(){
 
    };
 
}
</script>
Dans la fonction de la propriété onreadystatechange, on teste si l'attribut readyState renvoie 4 et si l'attribut status renvoie 200 pour afficher la réponse dans le div "mondiv" via l'attribut responseText. Si il y a une erreur, on renvoie le code d'erreur dans ce même "div" par l'intermédiaire de l'attribut satus.
<script type="text/javascript">
function teste_ajax(){
    //On déclare une variable
    var mavariable;
    //code pour IE7+, Firefox, Chrome, Opera, Safari   
    if (window.XMLHttpRequest){
        mavariable = new XMLHttpRequest();
    }
    //code pour IE6, IE5   
    else{
        mavariable = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //On assigne une fonction à la propriété onreadystatechange
    mavariable.onreadystatechange = function(){
        //Si l'attribut readyState renvoie 4 et que l'attribut status renvoie 200
        if(mavariable.readyState == 4 && mavariable.status == 200){
            //On affiche le résultat chargé dans l'attribut responseText qui est affiché dans un div nommé "mondiv"
            document.getElementById("mondiv").innerHTML=mavariable.responseText;
        }
        //Si erreur
        else{
            //On affiche le résultat de l'erreur obtenu par l'attribut status dans ce même div
            document.getElementById("mondiv").innerHTML=mavariable.status;
        }
    };
 
}
</script>
Reste plus qu'à définir l'envoie avec la méthode open() et send().
<script type="text/javascript">
function teste_ajax(){
    //On déclare une variable
    var mavariable;
    //code pour IE7+, Firefox, Chrome, Opera, Safari   
    if (window.XMLHttpRequest){
        mavariable = new XMLHttpRequest();
    }
    //code pour IE6, IE5   
    else{
        mavariable = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //On assigne une fonction à la propriété onreadystatechange
    mavariable.onreadystatechange = function(){
        //Si l'attribut readyState renvoie 4 et que l'attribut status renvoie 200
        if(mavariable.readyState == 4 && mavariable.status == 200){
            //On affiche le résultat chargé dans l'attribut responseText qui est affiché dans un div nommé "mondiv"
            document.getElementById("mondiv").innerHTML=mavariable.responseText;
        }
        //Si erreur
        else{
            //On affiche le résultat de l'erreur obtenu par l'attribut status dans ce même div
            document.getElementById("mondiv").innerHTML=mavariable.status;
        }
    };
    //On déclare la méthode d'envoie
    mavariable.open("GET","mon-fichier.txt",true);
    //On envoie
    mavariable.send();
}
</script>
Au clique sur le bouton "Go", vous devriez obtenir un sympathique "Bonjour" d'AJAX sans que la page ne se soit rechargé . Bon, je vous l'accorde ce code n'est pas très utile mais ça permet de comprendre un peut comment fonctionne AJAX.

Si maintenant on utilise une fonction d'instance pour vérifier la compatibilité avec les navigateurs le code change un tout petit peut au niveau de la fonction teste_ajax().

Etape 1 : la fonction d'instance
function objet_XMLHttpRequest()
{
    //On déclare une variable "mavariable" à null
    var mavariable = null;
    //Teste si le navigateur prend en charge les XMLHttpRequest
    if (window.XMLHttpRequest || window.ActiveXObject){
        // Si Internet Explorer alors on utilise les ActiveX
        if(window.ActiveXObject){
            //On teste IE7 ou supérieur
            try{
                mavariable = new ActiveXObject("Msxml2.XMLHTTP");
            }
            //Si une erreur est levée, alors c'est IE 6 ou inférieur
            catch(e){
                mavariable = new ActiveXObject("Microsoft.XMLHTTP");
            }
        }
        //Navigateurs récents (Firefox, Opéra, Chrome, Safari, ...)
        else{
            mavariable = new XMLHttpRequest();
        }
    }
    //XMLHttpRequest non supporté par le navigateur
    else{
        alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest...");
        return null;
    }
    //On retourne l'objet mavariable
    return mavariable;
}
Etape 2 : la fonction teste_ajax()

La partie :
    //On déclare une variable
    var mavariable;
    //code pour IE7+, Firefox, Chrome, Opera, Safari   
    if (window.XMLHttpRequest){
        mavariable = new XMLHttpRequest();
    }
    //code pour IE6, IE5   
    else{
        mavariable = new ActiveXObject("Microsoft.XMLHTTP");
    }
...est supprimé et remplacé par :
    //On déclare une variable
    var mavariable = objet_XMLHttpRequest();
La fonction devient donc :
function teste_ajax(){
    //On déclare une variable
    var mavariable = objet_XMLHttpRequest();
    //On assigne une fonction à la propriété onreadystatechange
    mavariable.onreadystatechange = function(){
        //Si l'attribut readyState renvoie 4 et que l'attribut status renvoie 200
        if(mavariable.readyState == 4 && mavariable.status == 200){
            //On affiche le résultat chargé dans l'attribut responseText qui est affiché dans un div nommé "mondiv"
            document.getElementById("mondiv").innerHTML=mavariable.responseText;
        }
        //Si erreur
        else{
            //On affiche le résultat de l'erreur obtenu par l'attribut status dans ce même div
            document.getElementById("mondiv").innerHTML=mavariable.status;
        }
    };
    //On déclare la méthode d'envoie
    mavariable.open("GET","mon-fichier.txt",true);
    //On envoie
    mavariable.send();
}
En utilisant cette méthode et si vous avez plusieurs fonctions, vous avez juste à déclarer votre variable dans votre nouvelle fonction sans avoir besoin de vérifier si le navigateur prend en charge l'objet XMLHttpRequest ou un ActiveXObject puisque cette vérification est faite dans la fonction d'instance.
function un(){
    var monobjet1 = objet_XMLHttpRequest();
    //reste du code
}
 
function deux(){
    var monobjet2 = objet_XMLHttpRequest();
    //reste du code
}
 
function trois(){
    var monobjet3 = objet_XMLHttpRequest();
    //reste du code
}

Voir/déposer un commentaire (0) | Signaler un problème