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 :

Sélectionner 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 :

Sélectionner 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 :

Sélectionner 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 :

Sélectionner le code

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

 

Requêtes POST

Une simple demande de poste :

Exemple :

Sélectionner 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 :

Sélectionner 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 :

Sélectionner 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 :

Sélectionner 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 :

Sélectionner le code

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

 

Par carabde 22 aout 2014

MARKETPOWER-IA
Logiciel d'I.A.
Logiciel d'I.A. 100% Français pour lancer son business en ligne

La méthode secrète likes sans fin sur Facebook

Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.

GAGNER DE L'ARGENT
GRÂCE À FACEBOOK 
N'A JAMAIS ÉTÉ SI FACILE


Consulter


1tpe