Envoyer une requête AJAX

Après avoir créé l'objet XMLHttpRequest (voir le chapitre précédent), nous devons envoyer une requête au serveur.

Envoyer une requête au serveur

Pour envoyer une requête au serveur, nous utilisons deux méthodes de l'objet XMLHttpRequest :

• open()

• send()

　　httpRequest.open("GET", "ajax_intro.txt", true);
　　httpRequest.send();

La méthode open() accepte trois paramètres :

• Le premier paramètre est la méthode de requête HTTP-GET, POST

• Le second paramètre est l'URL vers laquelle vous envoyez la requête

• Le troisième paramètre optionnel définit si la requête est asynchrone (par défaut true)

La méthode send() accepte un paramètre optionnel :

• Pour les requêtes GET, ne transmettez aucune valeur

• Pour les requêtes POST, transmetteznom=valeursur

Requête HTTP : GET et POST ?

DansGETDans cette méthode, le navigateur ajoutera le contenu du formulaire (nom/ajouter les paires valeur à la fin de l'URL.

GET est généralement utilisé pour des formulaires simples où la sécurité n'est pas importante. GET offre de nombreux avantages pour des formulaires simples.

• Les requêtes GET peuvent être mises en cache

• Les requêtes GET sont conservées dans l'historique du navigateur

• Les requêtes GET peuvent ajouter des signets

• Ne jamais utiliser GET pour traiter des données sensibles

• Les requêtes GET ont une limitation de longueur (seulement2048caractères)

DansPOSTDans cette méthode, le contenu ne s'affiche pas dans l'URL.

Si les données du formulaire contiennent des informations sensibles ou personnelles, utilisez toujours POST.

• Les requêtes POST ne sont jamais mises en cache

• Les requêtes POST ne sont pas conservées dans l'historique du navigateur

• Les requêtes POST ne peuvent pas ajouter de signets

• Utilisez des requêtes POST pour traiter des données sensibles

• Les requêtes POST n'ont pas de limitation de longueur des données

Requête GET

L'exemple suivant montre comment envoyer une requête Ajax GET simple en utilisant JavaScript :

httpRequest.open("GET", "ajax_get.php", true);
httpRequest.send();

Dans l'exemple ci-dessus, vous pourriez obtenir des résultats en cache. Pour éviter cela, ajoutez un nombre aléatoire à l'URL :

httpRequest.open("GET", "ajax_get.php?r="　+　Math.random(), true);
httpRequest.send();

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

httpRequest.open("GET", "ajax_get.php?fname=Seagull&lname=Anna", true);
httpRequest.send();

Requête POST

L'exemple suivant montre comment envoyer une requête Ajax POST simple en utilisant JavaScript :

httpRequest.open("POST", "ajax_post.php", true);
httpRequest.send();

Si vous souhaitez envoyer des informations en utilisant la méthode POST, utilisez l'ajout des en-têtes HTTP avec setRequestHeader() et spécifiez les données à envoyer dans la méthode send() :

httpRequest.open("POST", "ajax_post.php", true);
httpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
httpRequest.send("fname=Seagull&lname=Anna");

La méthode setRequestHeader() accepte deux paramètres :

• Le premier paramètre spécifie le nom de l'en-tête

• Le deuxième paramètre spécifie la valeur de l'en-tête

URL-Le fichier sur le serveur

Le deuxième paramètre de cette méthode (url) open() est l'adresse du fichier sur le serveur.

　　httpRequest.open("GET", "ajax_get.php", true);

AJAX peut envoyer et recevoir divers formats d'informations, y compris JSON, XML, HTML, PHP, ASP, texte, etc.

Attribut onreadystatechange

L'objet XMLHttpRequest vous permet de définir les fonctions à exécuter pour traiter les réponses.

La fonction de réponse onreadystatechange est définie dans les attributs de l'objet XMLHttpRequest.

httpRequest.onreadystatechange = function() {
　　if (this.readyState ===　4　&& this.status ===　200) {
　document.getElementById("output").innerHTML = this.responseText;
　　}
};

Vous découvrirez plus tard dans ce tutoriel les informations sur les attributs de onreadystatechange.

Requête synchronisée

Le troisième paramètre de la méthode open() spécifie que la requête estAsynchroneOuSynchronisée.

À envoyerSynchroniséePour une requête, changez le troisième paramètre de la méthode open() enfalse.

Si vous avez utiliséSynchroniséeSi vous effectuez une requête, vous n'avez pas besoin de spécifier la fonction de réponse :

var httpRequest = new XMLHttpRequest();
httpRequest.open("GET", "ajax_intro.txt", false);
httpRequest.send();
document.getElementById("output").innerHTML = httpRequest.responseText;

Il n'est pas recommandé d'utiliserSynchroniséeRequête, car :

• JavaScript cesse d'exécuter jusqu'à ce que le serveur soit prêt à répondre

• Si le serveur est occupé ou lent, l'application peut être bloquée ou arrêtée

• Apporte une mauvaise expérience utilisateur