Communication avec un serveur en mode asynchrone (Ajax)

Dernière mise à jour le par @karamel .

Ajax

Qu'est-ce-que ?

ajax pour Asynchronous JavaScript and XML utilise l'objet XMLHttpRequest par l'intermediaire du javascript et permet au navigateur de communiquer avec le serveur afin de modifier une page sans avoir a la recharger et sans la bloquer.

a la base comme son nom l'indique ajax mettait l'accent sur la possibilité d' intégrer les donné issu de fichier xml de nos jours même si on dit toujours ajax c'est un peut faux car hormis le xml les donné recu peuvent etres au format json qui est dérivé de la notation des objets du JavaScript et permet comme le xml de de traiter des donner mais de facon différente,

XMLHttpRequest permet aussi d'envoyer des donnés

XMLHttpRequest

création d'une requête

La création d'une requête ce fait en créant une instance de l'objet de XMLHttpRequest avec new en passant par une variable qui sera le lien avec l'instance.

pour internet explorer 8 et < la syntaxe sera differente on doit donc passer par une condition qui testera le navigateur utilisé.

if (window.XMLHttpRequest)    //  Objet standard
{
    nom_de_la_requete =new XMLHttpRequest     //  Objet standard
}
else  if (window.ActiveXObject)      //  Internet Explorer
{
    nom_de_la_requete = new ActiveXObject("Microsoft.XMLHTTP");
}

a noter que la variable ne comporte pas le mot clé var afin qu'elle puisse etre globale pour pouvoir etre accessible plus facilement.

configuration de la requête

la configuration de la requête vient juste après sa création, c'est une des méthode de l'objet XMLHttpRequest et se nome open elle est composé de 3 paramètres

get post

- le premier paramètre concerne la méthode d'envois des donné get ou post

GET
La methode GET fait transité les donné via l'url défini dans la méthode open (voir chapitre suivant envoyer des donnés) elles sont donc visibles, l'url étant limité autour des 250 caractère on ne peut faire parvenir que de petite quantités de donné.

POST
La methode POST utilise la possibilité du protocole http a faire transité des donné on peut l'utiliser pour des donnés de formulaire mais elle sera surtout utile pour faire transiter des fichier de divers tailles.

du fait de l'utilisation du protocole IP, qui requière un entête, POST est utilisé conjointement avec setRequestHeader afin de spécifier le type de donné envoyé et la méthode send qui sera vu au chapitre suivant comportera les donné a envoyer.

url

- le second c''est l'adresse du fichier a consulté qui peut être un fichier xml ou un fichier php asp ou autre cela dépendra du langage serveur si il s'agit d'un fichier xml il sera directement récupéré, Le fichier peut etre facilement consulté en récupérant son adresse pour les autre fichier tel que php la requête sera pris en charge par le script au niveau du serveur

Synchrone asynchrone

- le troisième paramètre concerne la méthode utilisé pour la requête asynchrone ou synchrone

Le mode asynchrone ne fige pas la page pendant que le script ajax s'exécute et communique avec le serveur contrairement au mode synchrone qui bloc la page durant l' exécution de la requête.

les valeur possibles son :

true : mode asynchrone

false : mode synchrone

exemple de configuration

nom_de_la_requete.open( GET", "data.xml",  true);

envoyer des donnés

Méthode get

pour get les donnés son envoyé a la suite de l'url contenu dans open.

les donné doivent au préalable êtres convertis au format ASCII. qui est la table de caractère de basse en informatique mais surtout celle utilisé dans les barre d'adresse et qui ne connait pas les espaces et les caractères spéciaux ceux si sont encodé en hexadécimale et retranscrit par le serveur en fonction de sa table de caractère.Généralement il s'agit de l'UTF8.Le fait d'utiliser ASCII garanti l'universalité des donné car en regle generale les table de caractère que se soit l'utf-8 ou le latin-1 sont en quelque sorte des extension de l'ASCII.

il existe deux méthodes d'encodages encodeURIComponent() qui encode en UTF8 et escape() qui encode en Latin-1(ISO-8859-1) cette dernière est déprécie et a moins d'avoir un serveur configurer en latin-1 (ISO-8859-1) on utilisera encodeURIComponent()

voici un script qui permet de voir la différence de codage entre les deux méthodes

<!DOCTYPE html>
<head>
<script>

function encodedecode() {
  var uriEncode = encodeURIComponent ("www.Cette été je chante URL.com");//utf
var uriDecode = decodeURIComponent(uriEncode);

var bb=escape("www.Cette été je chante URL.com"); //ISO-8859-1.
var cc=unescape( bb)

document.write(uriEncode);
document.write("<br/>");
document.write(uriDecode);
document.write("<br/>");
document.write(bb);
document.write("<br/>");
document.write(cc);
}
</script>
</head>
<body>
<button onclick="encodedecode()">Click</button>

</body></html>

les donné qui peuvent etres celles d'un formulaire sont mis apres l'url. Afin de les distingué de l'url on met un point d'interrogation a la fin de l'url ( ? ). quand aux donné elle sont affublé d' un nom suivi du signe égale suive des donné et si l'on désire envoyer plusieurs donné on insert entre chaque nom et leurs donné le signe ( & )

Du coté du langage serveur chaque donné sera contenu dans des variables qui porterons le nom qu'on leurs aura assigné.

nom_de_la_requete.open("GET", 'page_a_consulter.php?nom1="donné1"&nom2="donne2"&nom3="donne3"', true);
nom_de_la_requete.send(null)

Methose post

avec post les donné sont inséré dans la méthode send() il faudra rajouter un entête qui comportera le type mime par l'intermédiaire de la methode setRequestHeader();

afin d'envoyer des donné de la meme maniere qu'avec get le type mime sera
application/x-www-form-urlencoded

 nom_de_la_requete.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

ensuite on créer une variable contenant les variables sous cette forme :

  var donnees = "var1=contenu&var2=contenu2&...";

puis on indique le nom de la variable dans la methode send();

 nom_de_la_requete.send(donnees);

envoyer une image

l'image sera envoyer en base 64,pour ce faire on va charger une image dans le navigateur a partir d'un input de type file et la convertir en base 64 grace a l'objet FileReader

function charger(fichier){
 
var fichier = document.getElementById('fileinput').files;
 
 if (fichier[0].type.match('image.*')) {
   
 var charge=new FileReader();
 charge.readAsDataURL(fichier[0]);

      charge.onloadend = function(e){
      var b64 = e.target.result;
   
      }
       }
}

ensuite on envoi le tout en indiquant un type mime qui peut être quelconque car on le supprimera a la réception des donnés avec le langage serveur

ajax.setRequestHeader('Content-Type', 'base64/upload');
ajax.send(b64);

a la reception du fichier par le serveur dans notre cas ce sera le php on utilisera explode qui decoupera les donné en tableau afin de separer le typemime des donnés ensuite on utilise base64_decode afin de décoder les donné et a ce niveau il ne reste plus qu'a enregistrer le fichier.

<?php 

//on teste l'existance des donné
if (isset($GLOBALS["HTTP_RAW_POST_DATA"])) 
{

 $dataURL=$GLOBALS['HTTP_RAW_POST_DATA'];
  
 
    // on split les donné en tableau afin de separer le typemime des donnés
    $parts = explode(',', $dataURL);  
 
 //on recupere les donné sans le typemime
    $data = $parts[1];  
 
    // on decode les donné Base64 en data
    $data = base64_decode($data);  
    
 //on cree un fichier en ecriture
    $fp = fopen('image.png', 'w');  
 
 //on ecrit les donnés dans le fichier
    fwrite($fp, $data);
 
 //on ferme le fichier
    fclose($fp); 
}
?>

Etat d'avancement de la requête

afin de connaitre l'état de la requête on passe par l'évènement onreadystatechange qui est appelé périodiquement pendant la durée de la requête on associe l'évènement a une fonction dans laquel est insérer une condition qui vérifiera l'état d'avancement de la requête jusqu 'a la fin de celle ci et sa réussite afin de lancer les instruction d'exploitation des donnés issu de la requête
.

readystate

readystate a travers des valeurs allant de 0 a 4 informe de l'évolution de la requête la valeur qui nous intéresse en particulié est 4 qui indique que la requête est terminé.

Valeur de readystate

Valeur Description
0 ( uninitialized) non initialisé
1 (loading) début du transfert des données
2 ( loaded) données transférées
3 (interactive) les données reçues sont accessibles en partie
4 (complete) les données sont complètement accessibles

status

il s'agit des code d'une requête http le code le plus connue est 404 qui indique qu'une page n'a pas été trouve la liste est longue mais dans notre cas il faudra surtout retenir le code 200 qui informe que la requête a été traitée avec succès

code http sur wikipedia
.

exemple d'avancement

nom_de_la_requete.onreadystatechange=controle_requete

 function controle_requete(){

  if (nom_de_la_requete.readyState==4 && nom_de_la_requete.status==200) {

   instruction

    }
  }

Méthode de reception

il y a deux principales facon de réceptionner les données responseText et responseXML

responseText

pour recevoir des donnés formaté en tant que texte qui pourrait être un texte simple, du html que l'on pourrait insérer directement dans la page, une image encodé en base 64, ou des données json.

pour le json il faudra parser les donné afin d'obtenir un ojet json comprenant des ensembles de paires nom / valeur qui peuvent elle meme etre des objet ou des tableaux ou bien encore des valeurs generique comme du texte.

var donné_json=JSON.parse(nom_de_la_requete.responseText)

responseXML

pour recevoir un fichier xml qui devras être traité par l'intermédiaire du DOM avant insertion dans la page.
Le xml tout comme le html est un langage de balisage et les deux proposes une representation similaire a un arbre et comme le dom est fait pour parcourir cette arbre on vas pourvoir parcourir le xml comme on le fait avec le html

exemple de reception


 function controle_requete(){

  if (nom_de_la_requete.readyState==4 && nom_de_la_requete.status==200) {

  var donne = nom_de_la_requete.responseText;
  alert(donne)
    }

  }

Mise en pratique

var  xhr_object  =   null    //création de l'objet

if (windowXMLHttpRequest){          //le standard

xhr_object = new XMLHttpRequest()

}

else if (window .ActiveXObject){            // Internet Explorer 8 et <

xhr_object = new ActiveXObject("Microsoft.XMLHTTP")
}
else{                       //XMLHttpRequest non supporté par le navigateur

alert (" Votre navigateur ne supporte pas les objets XMLHTTPRequest");

return;
}

xhr_object.open( "GET", "  fichier.extension ",  true);   //le premier paramètre est la méthode, le deuxième est le nom du dossier dont on va retourner le résultat et le troisième sert a dire que c'est en mode asynchrone*/

xhr_object.onreadystatechange=function() {

if (xhr_object. readyState ==  4 && xhr.status == 200{

 alert (xhr_object. responseText );

}

| xhr_object.send(null);               //on envoi la requête
}

Si vous avez des conseil a me donner pour enrichir ce tutorial je vous serais reconnaissant de me les faire parvenir !!!

A voir également
Ce document intitulé « Communication avec un serveur en mode asynchrone (Ajax) » issu de CodeS SourceS (codes-sources.commentcamarche.net) est mis à disposition sous les termes de la licence Creative Commons. Vous pouvez copier, modifier des copies de cette page, dans les conditions fixées par la licence, tant que cette note apparaît clairement.
Communication entres frames
Api google maps, annuaire de liens
Rejoignez-nous