begin process at 2012 02 14 11:55:14
  Trouver un code source :
 
dans
 
Accueil > 

Tutoriels

 > 

Tutoriaux

 > COMMUNICATION AVEC LE SERVEUR EN MODE ASYNCHRONE(XMLHTTPREQUEST)

COMMUNICATION AVEC LE SERVEUR EN MODE ASYNCHRONE(XMLHTTPREQUEST)


 Information sur le tutoriel

Note :
Aucune note


 Description

Salut, il ya deux jour a peine j'avais besoin d'une explication sur le mode asynchrone pour mon chat et j'ai eu beaux chercher partout un tutorial je n'est rien trouvé donc j'en met un pour que si quelqun est dans le même cas que moi il trouve un tutorial en français au lieu de chercher sur internet !!! Il n'y avait pas beaucoup de doc en français sur ce sujet quand j'ai posté ce tutorial ou j'ai peut être mal cherché !!!
Je vais donc parler du XMLHttpRequest, du mode asynchrone, d'ajax, etc...

Tutorial

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 !!!


 Historique

22 avril 2008 10:56:25 :
ajout du paragraphe "asynchrone ou synchrone"
22 avril 2008 10:59:10 :
ajout de la catégorie : "synchrone ou asynchrone ?"
22 avril 2008 11:03:58 :
règlage d'un problème de couleur et de mise en page du code...
22 avril 2008 11:08:20 :
essai de mettre l tuto au format docx sous word 2007 pour voir si le problème de mise en page viens de moi ou du site !!!
03 août 2008 15:31:15 :
Ajout de 3 catégories : - Comment envoyer des variables ? Explication sur comment envoyer des variables avec la requête... - Pourquoi encode t'on les variables quand on envoi en GET et pas en POST ? Explication sur le sujet de l'encodage des variable si on envoi les données en GET - GET ou POST Petit récapitulatif qui explique les qualités et les défaut de ces deux methodes...
03 août 2008 15:33:45 :
Mise en forme

Commentaires

Commentaire de Arto_8000 le 07/12/2007 01:50:08

Tu peux expliquer la différence entre le mode asynchrome et synchrome. Montrer des exemples comment faire en mode POST. Comment rajouter des en-têtes. Tu peux montrer les différents status (200, 404, etc.). Tu peux donner des exemples concrets et assez courant d'utilisation (exemple : Comment précacher des images). Le AJAX c'est très loin de ce limiter à ces 2 paragraphes que tu as écrit.

Commentaire de Arto_8000 le 07/12/2007 01:55:06

D'ailleurs il y a toujours d'excellent tutorial en français sur le site de Mozilla. Il y a un tutorial très complet sur le sujet que l'on peut lire :

http://developer.mozilla.org/fr/docs/AJAX:Premiers_pas

Commentaire de nicomilville le 07/12/2007 09:12:18

désolé mais j'essaye de modifier le tutorial depuis hier soir mais je n'y arrive pas donc je ne peut pas faire les modifications tant que les admin n'aurons pas règlé le problème

Commentaire de Arto_8000 le 09/12/2007 01:46:32

Tu peux en reposté un autre et tu demanderas a un admin qu'il supprime celui-ci.

Commentaire de hvb le 20/12/2007 12:55:15

"(...)j'ai eu beaux chercher partout un tutorial je n'est rien trouvé(...)"
sans vouloir être offensant... apprend à chercher... ou revoit ta définition de "parout" :)

"xmlhttprequest" sur google te renvoit des centaines de tuto, et particulièrement en premier resultat, le petit tuto assez complet de www.toutjavascript.com (http://www.toutjavascript.com/savoir/xmlhttprequest.php3), que l'on cite ici depuis au moins deux ans ^^

Commentaire de hvb le 20/12/2007 12:58:59

wow, j'avais pas même vu que ton tuto est JUSTEMENT un plagiat de toutjavascript lol...

tu aurais au moins pu changer le nom de ton objet, le nom du fichier test (foo.txt) ou bien citer ta source... ça t'aurais eviter de te faire démasquer :D

Vive l'internet libre, f*ck l'anarchie.

Commentaire de nicomilville le 20/12/2007 18:36:40

quand je dit que j'ai cherché partout ça sous entend que j'ai cherché partout dans le site excuse moi si je n'ai pas été assez claire !!!

Commentaire de hvb le 21/12/2007 09:42:40

moui, prends également en compte mon second commentaire ;)

Commentaire de nicomilville le 21/12/2007 17:30:19

je me suis rendu compte trop tard et je n'arrive plus a modifier mon tuto !!!

Commentaire de XtremDuke le 10/03/2008 15:59:09

J'arrive un peu tard mais bon...
Pour une explication concise sur le sujet, voir par exemple (ils sont nombreux) :
http://fr.wikipedia.org/wiki/Asynchronous_JavaScript_And_XML

Pour ce qui est du mode synchrone/asynchrone : le mode asynchrone agit (pour schématiser) en tâche de fond alors que le mode synchrone va "freezer" l'algorithme jusqu'à un résultat (à la manière d'une alert).

Pour ce qui est de la "mise en pratique", je vous conseille d'aller jeter un ½il sur  http://blog.neovov.com/index.php?2006/12/03/122-mr-propre qui présente une source saine et très légère d'un objet Ajax.



 Ajouter un commentaire




Nos sponsors


Sondage...

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,562 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales