Demande XHR
L'objet XMLHttpRequest permet d'échanger des données avec le serveur.
Envoyer une requête au serveur
Pour envoyer une requête au serveur, nous utilisons les méthodes open() et send() de l'objet XMLHttpRequest :
xmlhttp.send();
| Méthode | Description | ||||||
|---|---|---|---|---|---|---|---|
| open(méthode< /em>, url,async) |
| ||||||
| send(string) | <🎜>Envoyer la demande au serveur. <🎜>
|
OBTENIR ou POST ?
Comparé au POST, GET est plus simple et plus rapide, et fonctionne dans la plupart des cas.
Veuillez toutefois utiliser les requêtes POST dans les situations suivantes :
Les fichiers cache (mise à jour de fichiers ou de bases de données sur le serveur) ne peuvent pas être utilisés
Envoyer de grandes quantités de données au serveur (POST n'a pas de limite de données)
Lors de l'envoi d'une entrée utilisateur contenant des caractères inconnus, POST est plus stable et fiable que GET
Demande GET
Une simple requête GET :
Instance
<html><!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/demo_get.php",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<div id="myDiv"></div>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Dans l'exemple ci-dessus, vous pouvez obtenir des résultats en cache.
Pour éviter cela, ajoutez un identifiant unique à l'URL :
Instance
<html><!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<p>Click the button several times to see if the time changes, or if the file is cached.</p>
<div id="myDiv"></div>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Si vous souhaitez envoyer des informations via la méthode GET, veuillez ajouter des informations à l'URL :
Instance
<html><!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<div id="myDiv"></div>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Demande POST
Une simple requête POST :
Instance
<html><!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","/try/ajax/demo_post.php",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<div id="myDiv"></div>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton "Exécuter l'instance" " pour afficher des exemples en ligne
Si vous avez besoin de POST des données comme un formulaire HTML, veuillez utiliser setRequestHeader() pour ajouter des en-têtes HTTP. Précisez ensuite les données que vous souhaitez envoyer dans la méthode send() :
Instance
<html><!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<div id="myDiv"></div>
</body>
</html>Run instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
| Méthode | Description | ||||
|---|---|---|---|---|---|
| setRequestHeader(en-tête,valeur ) |
|
url - fichier sur le serveur
le paramètre url de la méthode open() est l'adresse du fichier sur le serveur :
Le fichier peut être n'importe quel type de fichier, tel que .txt et .xml, ou un fichier de script serveur , tels que .asp et .php (capables d'effectuer des tâches sur le serveur avant de renvoyer la réponse).
Async - Vrai ou faux ?
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 :
L'envoi de requêtes asynchrones est une énorme amélioration pour les développeurs Web. 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 plutôt :
Exécuter d'autres scripts en attendant une réponse du serveur
Traitez la réponse lorsqu'elle est prête
Async=true
Lors de l'utilisation de async=true, veuillez spécifier quand la réponse est prête dans l'événement onreadystatechange Fonctions exécutées dans le statut :
Instance
<html><!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
<button type="button" onclick="loadXMLDoc()">修改内容</button>
</body>
</html>Exécuter l'instance»
Cliquez le bouton "Exécuter l'instance" pour afficher l'instance en ligne
Vous en apprendrez plus sur onreadystatechange dans les chapitres suivants.
Async = false
Si vous devez utiliser async=false, veuillez modifier le troisième paramètre de la méthode open() en false :
xmlhttp.open("GET","test1.txt",false);
Nous ne Il est recommandé d'utiliser async=false, mais pour certaines petites requêtes, c'est également possible.
N'oubliez pas que JavaScript attendra que la réponse du serveur soit prête avant de poursuivre l'exécution. Si le serveur est occupé ou lent, l'application se bloque ou s'arrête.
Remarque : Lorsque vous utilisez async=false, veuillez ne pas écrire la fonction onreadystatechange - mettez simplement le code après l'instruction send() :
Exemple
<html><!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
</script>
</head>
<body>
<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>
</body>
</html>Exécuter l'instance»
Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
