État prêt du XHR
Événement onreadystatechange
Lorsqu'une requête est envoyée au serveur, nous devons effectuer certaines tâches basées sur les réponses.
Chaque fois que readyState change, l'événement onreadystatechange sera déclenché.
L'attribut readyState stocke les informations d'état de XMLHttpRequest.
Voici trois attributs importants de l'objet XMLHttpRequest :
| Attribut | Description | ||||||||
|---|---|---|---|---|---|---|---|---|---|
| onreadystatechange | Fonction de stockage (ou Nom de la fonction), cette fonction sera appelée à chaque fois que la propriété readyState changera. | ||||||||
| readyState |
| ||||||||
| statut | 200 : "D'accord" 404 : Page non trouvée |
Dans l'événement onreadystatechange, nous spécifions les tâches à effectuer lorsque la réponse du serveur est prête à être traitée.
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 sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne
Remarque :
L'événement onreadystatechange est déclenché 5 fois (0 - 4), correspondant à chaque changement de readyState.Utiliser les fonctions de rappel Une fonction de rappel est une fonction qui est passée en paramètre à une autre fonction.
Si vous avez plusieurs tâches AJAX sur votre site, vous devez écrire une fonction standard
Cet appel de fonction doit contenir l'URL et la tâche à effectuer lorsque l'événement onreadystatechange se produit (peut être différent pour chaque appel) : Si vous avez plusieurs tâches AJAX sur votre site, vous devez écrire une fonction standard
pour créer un objet XMLHttpRequest et appeler cette fonction pour chaque tâche AJAX.
<!DOCTYPE html>
<html>
<head>
<script>
var xmlhttp;
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest)
{// IE7+, Firefox, Chrome, Opera, Safari 代码
xmlhttp=new XMLHttpRequest();
}
else
{// IE6, IE5 代码
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
function myFunction()
{
loadXMLDoc("/try/ajax/ajax_info.txt",function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
});
}
</script>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 修改文本内容</h2></div>
<button type="button" onclick="myFunction()">修改内容</button>
</body>
</html> <🎜> <🎜><🎜>Exécuter l'instance»<🎜><🎜>Cliquez sur le bouton « Exécuter l'instance » pour afficher l'instance en ligne<🎜><🎜><🎜><🎜><🎜><🎜>
