AJAX - événement onreadystatechange
É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 |
Quand readyState est égal à 4 et que le statut est 200, cela signifie que la réponse est prête :
Instance<html> <head> <script type="text/javascript"> 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","/asset/demo.ajax.php?dm=txt&act=getfruits",true); xmlhttp.send(); } </script> </head> <body> <div id="myDiv"><h2>Let AJAX change this text</h2></div> <button type="button" onclick="loadXMLDoc()">通过 AJAX 改变内容</button> </body> </html>Note :
onreadystatechange L'événement 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<head> <script type="text/javascript"> var xmlhttp; function loadXMLDoc(url,cfunc) { 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=cfunc; xmlhttp.open("GET",url,true); xmlhttp.send(); } function myFunction() { loadXMLDoc("/asset/demo.ajax.php?dm=txt&act=getfruits",function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }); } </script> </head> <body> <div id="myDiv"><h2>Let AJAX change this text</h2></div> <button type="button" onclick="myFunction()">通过 AJAX 改变内容</button> </body> </html><🎜><🎜><🎜>