L'objet XMLHttpRequest permet d'échanger des données avec le serveur.
Pour envoyer une requête au serveur, nous utilisons les méthodes open() et send() de l'objet XMLHttpRequest :
xmlhttp.open("GET","ajax_info.txt",true);xmlhttp.send();| méthode | décrire |
|---|---|
| open( méthode , url , async ) | Spécifie le type de demande, l'URL et si la demande doit être traitée de manière asynchrone. méthode : type de requête ; GET ou POST url : L'emplacement du fichier sur le serveur async : true (asynchrone) ou false (synchrone) |
| envoyer( chaîne ) | Envoyez la demande au serveur. string : utilisé uniquement pour les requêtes POST |
GET est plus simple et plus rapide que POST et fonctionne dans la plupart des situations.
Cependant, utilisez les requêtes POST dans les situations suivantes :
Impossible d'utiliser les fichiers en cache (mise à jour des fichiers ou des bases de données sur le serveur)
Envoyer de grandes quantités de données au serveur (POST n'a pas de limite de taille de données)
POST est plus stable et fiable que GET lors de l'envoi d'entrées utilisateur contenant des caractères inconnus
Une simple requête GET :
Dans l'exemple ci-dessus, vous obtenez peut-être des résultats en cache.
Pour éviter cela, ajoutez un identifiant unique à l'URL :
Si vous souhaitez envoyer des informations via la méthode GET, ajoutez les informations à l'URL :
Une simple requête POST :
Si vous avez besoin de POST des données comme un formulaire HTML, utilisez setRequestHeader() pour ajouter des en-têtes HTTP. Précisez ensuite les données que vous souhaitez envoyer dans la méthode send() :
| méthode | décrire |
|---|---|
| setRequestHeader( en-tête,valeur ) | Ajoutez des en-têtes HTTP à la requête. header : précise le nom de l'en-tête value : spécifie la valeur de l'en-tête |
Le paramètre url de la méthode open() est l'adresse du fichier sur le serveur :
xmlhttp.open("GET","ajax_test.html",true);Le fichier peut être n'importe quel type de fichier, tel que .txt et .xml, ou un fichier de script de serveur, tel que .asp et .php (qui peut effectuer des tâches sur le serveur avant de renvoyer la réponse).
AJAX fait référence à JavaScript et XML asynchrones.
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 constitue une énorme amélioration. De nombreuses tâches effectuées sur le serveur prennent beaucoup de temps. Avant AJAX, cela pouvait entraîner le blocage ou l'arrêt de l'application.
Avec AJAX, JavaScript n'a pas besoin d'attendre une réponse du serveur, mais :
Exécuter d'autres scripts en attendant la réponse du serveur
Traiter la réponse lorsqu'elle est prête
Lorsque vous utilisez async=true, spécifiez une fonction à exécuter en réponse à l'état prêt dans l'événement onreadystatechange :
Vous en apprendrez davantage sur onreadystatechange dans un chapitre ultérieur.
Si vous souhaitez utiliser async=false, remplacez le troisième paramètre de la méthode open() par false :
xmlhttp.open("GET","test1.txt",false);Nous vous déconseillons d'utiliser async=false, mais pour certaines petites requêtes, c'est possible.
N'oubliez pas que JavaScript attend que la réponse du serveur soit prête avant de continuer. Si le serveur est occupé ou lent, l'application se bloque ou s'arrête.
Remarque : lorsque vous utilisez async=false, n'écrivez pas la fonction onreadystatechange - mettez simplement le code après l'instruction send() :