AJAX L'objet XMLHttpRequest- envoyer une demande à un serveur

Envoyer une demande à un serveur

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

Envoyer une demande à un serveur.

Pour envoyer une demande à un serveur, nous utilisons les méthodes open() et send() de l'objet XMLHttpRequest :

Exemple :     📋 Copier le code

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

GET ou POST ?

GET est plus simple et plus rapide que POST et peut être utilisé dans la plupart des cas.

Toutefois, toujours utiliser POST pour :

• Un fichier mis en cache (mise à jour d'un fichier ou une base de données sur le serveur)
• Envoi d'une grande quantité de données au serveur (Contrairement au GET , POST n'a aucune limitation de taille)
• Envoi de l'entrée saisie par l'utilisateur (qui peut contenir des caractères inconnus), POST est plus robuste et plus sécurisé que GET

Obtenez des demandes

Une simple demande GET :

Exemple :

Exemple :     📋 Copier le code

  xmlhttp.open("GET","demo_get.asp",true);
  xmlhttp.send();

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

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

Exemple :

Exemple :     📋 Copier le code

  xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);
  xmlhttp.send();

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

Exemple :

Exemple :     📋 Copier le code

  xmlhttp.open("GET","demo_get2.asp?fname=Henry&lname=Ford",true);
  xmlhttp.send();

Requêtes POST

Une simple demande de poste :

Exemple :

Exemple :     📋 Copier le code

  xmlhttp.open("POST","demo_post.asp",true);
  xmlhttp.send();

Pour afficher des données comme un formulaire HTML, ajouter un en-tête HTTP avec setRequestHeader(). Spécifier les données que vous souhaitez envoyer dans la méthode send() :

Exemple :

Exemple :     📋 Copier le code

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

L'url - un fichier sur un serveur

Le paramètre d'url de la méthode open(), est l'adresse d'un fichier sur un serveur :

Exemple :     📋 Copier le code

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

Le fichier peut être :

• Tout type de fichier serveur comme .asp et .php (qui peut exécuter des actions sur le serveur avant d'envoyer la réponse de l'arrière)
• Des fichiers de script et .xml ou .txt.

Asynchrone - vrai ou faux ?

AJAX signifie Asynchronous JavaScript and XML,  pour que l'objet XMLHttpRequest  comporte comme AJAX, le paramètre asynchrone de la méthode open()  doit être définie sur true :

Exemple :     📋 Copier le code

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

C'est une amélioration énorme pour les développeurs web, envoyer des demandes asynchrones.

 Bon nombre de tâches effectuées sur le serveur sont très longues.

Avant AJAX, cette opération pourrait entraîner l'application à être suspendue ou arrêtée.

Avec AJAX, le JavaScript n'a pas à attendre la réponse du serveur, mais peut plutôt :

• exécuter d'autres scripts en attendant la réponse serveur
• traiter la réponse lorsqu’elle est prête

Async = true

Lorsque vous utilisez async = true, spécifier une fonction à exécuter lorsque la réponse est prête par l’événement onreadystatechange :

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

Async = false

Pour utiliser async = false, on change le troisième paramètre dans la méthode open() à false :

L’utilisation  d'async = false n'est pas recommandé, mais on peut l’utiliser pour quelques petites demandes.

Lors de l’utilisation d’async = false le JavaScript ne continuera  à s’exécuter, que si la réponse du serveur est prête. Si le serveur est occupé ou lent, l'application sera suspendue ou arrêtée.

Note : Lorsque vous utilisez async = false,  ne pas écrire un onreadystatechange fonction – qui mis le code après l'instruction send() :

Exemple :

Exemple :     📋 Copier le code

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