L'objet XMLHttpRequest est utilisé pour échanger des données avec un serveur.
Envoyez une demande à un serveur
Pour envoyer une demande à un serveur, nous utilisons l' open() et send() méthodes de l'objet XMLHttpRequest:
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();| méthode | La description |
|---|---|
| open(method, url, async) | Indique le type de demande method : le type de demande: GET ou POST url : le serveur (fichier) emplacement async : true (asynchrone) ou false (synchrone) |
| send() | Envoie la requête au serveur (utilisé pour GET ) |
| send(string) | Envoie la requête au serveur (utilisé pour POST ) |
GET ou POST ?
GET est plus simple et plus rapide que POST , et peut être utilisé dans la plupart des cas.
Cependant, toujours utiliser POST demandes lorsque:
- Un fichier mis en cache est pas une option (mise à jour d'un fichier ou base de données sur le serveur).
- Envoi d' une grande quantité de données sur le serveur ( POST a aucune limitation de taille).
- Envoi d' entrée de l' utilisateur (qui peut contenir des caractères inconnus), POST est plus robuste et plus sûre que GET .
GET demandes
Une simple GET demande:
Dans l'exemple ci-dessus, vous pouvez obtenir un résultat en cache. Pour éviter cela, ajouter un cadre unique ID to the URL: ID to the URL:
Exemple
xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send(); Essayez - le vous - même » Si vous voulez envoyer des informations à l' GET méthode, ajouter les informations à l'adresse URL:
Exemple
xhttp.open("GET", "demo_get2.asp?fname=Henry&lname=Ford", true);
xhttp.send(); Essayez - le vous - même » POST demandes
Une simple POST demande:
Pour POST des données comme un formulaire HTML, ajoutez un en- HTTP header avec setRequestHeader() . Spécifiez les données que vous voulez envoyer dans le send() méthode:
Exemple
xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Henry&lname=Ford"); Essayez - le vous - même » | méthode | La description |
|---|---|
| setRequestHeader(header, value) | Ajoute des en-têtes HTTP à la demande header : spécifie le nom d' en- tête value : spécifie la valeur d' en- tête |
L'URL - un fichier sur un serveur
L' url paramètre de l' open() méthode, est une adresse à un fichier sur un serveur:
xhttp.open("GET", "ajax_test.asp", true);Le fichier peut être tout type de fichier, comme .txt et .xml ou les fichiers de script de serveur comme .asp et .php (qui peut effectuer des actions sur le serveur avant d'envoyer la réponse en retour).
Asynchronous - True ou False ?
AJAX signifie Asynchronous JavaScript et XML, et pour l'objet XMLHttpRequest à se comporter comme AJAX, l' async paramètre de l' open() méthode doit être définie sur true:
xhttp.open("GET", "ajax_test.asp", true);L'envoi des requêtes asynchrones est une énorme amélioration pour les développeurs web. Un grand nombre des tâches exécutées sur le serveur sont beaucoup de temps. Avant AJAX, cette opération pourrait entraîner l'application de suspendre ou d'arrêter.
Avec AJAX, JavaScript n'a pas à attendre la réponse du serveur, mais peut à la place:
- exécuter d'autres scripts en attendant la réponse du serveur
- faire face à la réponse lorsque la réponse prête
Async=true
Lorsque vous utilisez class = "notranslate" async = true, spécifier une fonction à exécuter lorsque la réponse est prêt en cas de onreadystatechange:
Exemple
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("demo").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send(); Essayez - le vous - même » Vous en apprendrez plus sur onreadystatechange dans un chapitre ultérieur.
Async=false
Pour utiliser async=false , changer le troisième paramètre dans l' open() méthode pour faux:
xhttp.open("GET", "ajax_info.txt", false);Utilisation async=false est pas recommandé, mais pour quelques petites demandes , cela peut être ok.
Rappelez-vous que le JavaScript ne va pas continuer à exécuter, jusqu'à ce que la réponse du serveur est prêt. Si le serveur est occupé ou lent, l'application se bloquer ou arrêter.
Remarque: Lorsque vous utilisez async=false , ne pas écrire une fonction onreadystatechange - il suffit de mettre le code après l' send() déclaration:
Exemple
xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText; Essayez - le vous - même »