Qu'est-ce-que c'est XMLHttpRequest ?
XMLHttpRequest est un objet qui permet de récupérer toutes sorte d'info sans recharger la page !!!
Récupérer des information sans recharger la page ?
Oui vous avez bien lu grâce a cet objet vous pouvez récupérer toutes les données que vous voulez mais avant que vous arriviez a le faire il faut savoir comment le faire !!!
Synchrone ou asynchrone ?
Commençons par le mode asynchrone : le mode asynchrone permet de faire quelque chose pendant que le script ajax s' éxécute et communique avec le serveur contrairement au mode synchrone qui bloc la page pendant l' éxécution du script !!!
Pour envoyer une requête en mode asynchrone il faut mettre true au troisième paramètre de la fonction open !!!
Pour envoyer une requête en mode synchrone il faut mettre false au troisième paramètre de la fonction open !!!
Comment envoyer des variables ?
Pour envoyer des variables avec la requêtes ajax, il faut :
- ajouter une entête de type : multipart/form-data avec la fonction ou methode : setRequestHeader();
- créer une variable contenant les variables sous cette forme :
Si on envoi les données en GET :
var donnees = URIencode("var1=contenu&var2=contenu2&...");
Si on envoi les données en POST :
var donnees = "var1=contenu&var2=contenu2&...";
- mettre le nom de la variale dans la methode send(); au lieu de guillemet ou de "null" comme ça :
send(donnees);
Pourquoi encode t-on les variables quand on les envoi en GET et pas en POST ?
Vous avez du remarqué que quand on envodes variables en GET, on utilise la methode URIencode et vous devez vous demander pourquoi on le fait avec la methode GET et pas avec la methode POST...
Et bien voila l'explication :
Vous savez que la methode GET fait passer les variables par l'URL...
Et vous savez également que les données passant par l'URL doivent être encoder...
Vous avez votre réponse, ce n'est pas plus compliqué que ça...
GET ou POST ?
Vous devez vous demander ce qui est le mieux entre ces deux methodes et si elle sont équivalente pourquoi en avoir créé deux...
La methode GET est a utiliser dans les moteur de recherche ou les données qui peuvent être modifié (pas dangeureuse) et il ne faut pas passer en GET les grosse chaine de caractères car comme vous devez le savoir l'url est limité (ça dépend des navigateurs..., des fois 250 caractère, un peut plus, un peut moins...)...
La methode POST, vous pouvez l'utiliser pour tout, les formulaires de connection, faire passer des données confidentielles, etc...
Je vous conseille également la methode POST pour envoyer de longue voir très longue chaine de caractères, la méthode post n'a aucune limitation en therme de taille et les données envoyés ne sont pas visiblent...
En fait quand vous passez par la methode POST ça créer un paquet HTTP qui peut contenir autant de données que vous voulez...
Mise en pratique :
|
| var xhr_object = null ; //création de l'objet |
|
| |
|
| if ( window . XMLHttpRequest ) // Firefox |
|
| xhr_object = new XMLHttpRequest ( ); |
|
| else if ( window . ActiveXObject ) // Internet Explorer |
|
| 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) alert (xhr_object. responseText ); |
|
| } |
|
|
|
|
| xhr_ object.send ( null ); //on envoi la requête |
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 accssibles en partie |
| 4 ( complete ) | les données sont complètement accessibles |
Si vous avez des conseil a me donner pour enrichir ce tutorial je vous serais reconnaissant de me les faire parvenir !!!