oujood.com

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

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

chercher |

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();
Méthode Description
open(method,url,async) Spécifie le type de requête, l'URL, et si la demande doit être gérée de manière asynchrone ou pas.

méthode: le type de demande : GET ou POST
URL: l'emplacement du fichier sur le serveur.
Async: true (asynchrone) ou false (synchrone)
send(chaîne) Envoie la demande au serveur.

chaîne: uniquement utilisé pour les requêtes POST

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");
Méthode Description
setRequestHeader (en-tête, valeur) Ajoute des en-têtes HTTP de la requête.

en-tête: spécifie le nom d'en-tête
valeur: spécifie la valeur d'en-tête

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 :

xmlhttp.open("GET","ajax_info.txt",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;

Par carabde 22 aout 2014

Voir aussi nos tutoriel :

fonction md5_file

Calcule le md5 d'un fichier

Se connecter à une base de données

Se connecter à une base de données

fonction convert_cyr_string, convert_cyr_string

Convertit une chaîne d'un jeu de caractères cyrillique l'autre