AJAX - Envoyer au serveurRequête

L'objet XMLHttpRequest est utilisé pour échanger des données avec un serveur.

Envoyer une requête au serveur

Pour envoyer la requête au serveur, nous utilisonsXMLHttpRequestde l'objetopen()etsend()méthodes :

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

Méthode Description
open(method,url,async)

Spécifie le type de requête, l'URL et si la requête doit être traitée de manière asynchrone.

  • method: le type de requête ; GET ou POST
  • url: l'emplacement du fichier sur le serveur
  • async: true (async) ou false (sync)
send(string)

Envoie la requête au serveur.

  • string: uniquement pour les requêtes POST

GET ou POST ?

Par rapport à POST, GET est plus simple et plus rapide, et fonctionne dans la plupart des cas.

Cependant, dans les situations suivantes, veuillez utiliser des requêtes POST :

  • Vous ne voulez pas utiliser de fichiers mis en cache (pour mettre à jour des fichiers ou des bases de données sur le serveur)
  • Envoi d'une grande quantité de données au serveur (POST n'a pas de limite de taille de données)
  • Lors de l'envoi de saisies utilisateur contenant des caractères inconnus, POST est plus stable et fiable que GET.

Requête GET

Une simple requête GET :

Exemple

xmlhttp.open("GET","/try/ajax/demo_get.php",true); xmlhttp.send();

Essayez-le »

Dans l'exemple ci-dessus, vous pouvez obtenir un résultat mis en cache.

Pour éviter cela, ajoutez un ID unique à l'URL :

Exemple

xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true); xmlhttp.send();

Essayez-le »

Si vous souhaitez envoyer des informations en utilisant la méthode GET, ajoutez les informations à l'URL :

Exemple

xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true); xmlhttp.send();

Essayez-le »

Requête POST

Une simple requête POST :

Exemple

xmlhttp.open("POST","/try/ajax/demo_post.php",true); xmlhttp.send();

Essayez-le »

Si vous devez envoyer des données en POST comme le ferait un formulaire HTML, utilisez setRequestHeader() pour ajouter un en-tête HTTP. Spécifiez ensuite les données que vous voulez envoyer dans la méthode send() :

Exemple

xmlhttp.open("POST","/try/ajax/demo_post2.php",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("fname=Henry&lname=Ford");

Essayez-le »

Méthode Description
setRequestHeader(header,value)

Ajoute un en-tête HTTP à la requête.

  • header: Spécifie le nom de l'en-tête
  • value: Spécifie la valeur de l'en-tête

url - Le fichier sur le serveur

Le paramètreurlde la méthode open() est l'adresse du fichier sur le serveur :

xmlhttp.open("GET","ajax_test.html",true);

Le fichier peut être de n'importe quel type, comme .txt et .xml, ou des fichiers de script serveur, comme .asp et .php (qui peuvent effectuer des tâches sur le serveur avant de renvoyer une réponse).

Async - Vrai ou Faux ?

AJAX signifie Asynchronous JavaScript and XML.

Si l'objet XMLHttpRequest doit être utilisé pour AJAX, le paramètre async de sa méthode open() doit être défini sur true :

xmlhttp.open("GET","ajax_test.html",true);

Pour les développeurs web, l'envoi de requêtes asynchrones est une énorme amélioration. De nombreuses tâches effectuées sur le serveur sont assez chronophages. Avant AJAX, cela pouvait entraîner le blocage ou l'arrêt de l'application.

Avec AJAX, JavaScript n'a pas besoin d'attendre la réponse du serveur, mais au lieu de cela :

  • Exécuter d'autres scripts en attendant la réponse du serveur
  • Traiter la réponse lorsqu'elle est prête

Async=true

Lorsque vous utilisez async=true, spécifiez une fonction à exécuter lorsque la réponse est dans un état prêt dans l'événement onreadystatechange :

Exemple

xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } xmlhttp.open("GET","/try/ajax/ajax_info.txt",true); xmlhttp.send();

Essayez-le vous-même »

Vous en apprendrez plus sur onreadystatechange dans un chapitre ultérieur.

Async = false

Pour utiliser async=false, remplacez le troisième paramètre de la méthode open() par false :

xmlhttp.open("GET","test1.txt",false);

Nous ne recommandons pas d'utiliser async=false, mais pour certaines petites requêtes, c'est acceptable.

Rappelez-vous, JavaScript attendra que la réponse du serveur soit prête avant de continuer. Si le serveur est occupé ou lent, l'application se bloquera ou s'arrêtera.

Remarque :Lorsque vous utilisez async=false, n'écrivez pas de fonction onreadystatechange - placez simplement le code après l'instruction send() :

Exemple

xmlhttp.open("GET","/try/ajax/ajax_info.txt",false); xmlhttp.send(); document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

Essayez-le vous-même »
Autres extensions