AJAX vrai asynchrone ou faux synchrone
vrai asynchrone ou faux synchrone d'ajax :
Introduit dans le chapitre sur la brève introduction d'ajax, AJAX fait référence à JavaScript et XML asynchrones (JavaScript et XML asynchrones).
Il s'agit d'un très grand progrès pour le développement Web, qui peut améliorer efficacement la convivialité du site Web. Avant cela, s'il y avait des opérations de requête plus longues, cela entraînerait inévitablement le blocage et l'arrêt du programme. En utilisant le fonctionnement asynchrone d'ajax, vous n'avez pas besoin d'attendre la réponse du serveur, mais effectuez les opérations suivantes :
(1) Exécutez d'autres scripts en attendant la réponse du serveur.
(2). Traitez la réponse lorsqu'elle est prête.
1. À propos de la méthode open() :
Ce qui suit est une brève introduction à la méthode open(). La structure syntaxique est la suivante :
xmlhttp.open(method,url,async);
Pour plus d'informations à ce sujet. méthode, veuillez vous référer à ajax Post ou obtenir un chapitre sur les demandes du serveur.
Vous pouvez voir que la méthode open() a trois paramètres. Le dernier paramètre est une valeur booléenne, qui est utilisée pour spécifier s'il faut utiliser le mode asynchrone.
Quand async=true, il stipule d'utiliser des opérations asynchrones, ce qui signifie que l'opération ajax ne bloquera pas l'exécution du code une fois l'exécution terminée, la réponse sera traitée via l'événement onreadystatechange. comme suit :
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.php.cn/" />
<title>php中文网</title>
<script>
function loadXMLDoc(){
var xmlhttp;
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}
else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("show").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/asset/demo.ajax.php?dm=txt&act=getfruits",true);
xmlhttp.send();
}
window.onload=function(){
var obt=document.getElementById("bt");
obt.onclick=function(){
loadXMLDoc();
}
}
</script>
</head>
<body>
<div id="show"><h2>原来的内容</h2></div>
<button type="button" id="bt">查看效果</button>
</body>
</html> Le code ci-dessus est une opération asynchrone et la réponse est traitée via l'événement onreadystatechange.
Lorsque async=false, un traitement synchrone est utilisé, il n'est donc pas nécessaire d'utiliser l'événement onreadystatechange. Il suffit de mettre le code d'opération correspondant après la méthode send(). Le code est le suivant :
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.php.cn/" />
<title>php中文网</title>
<script>
function loadXMLDoc() {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", "/asset/demo.ajax.php?dm=txt&act=getfruits", false);
xmlhttp.send();
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("show").innerHTML = xmlhttp.responseText;
}
}
window.onload = function () {
var obt = document.getElementById("bt");
obt.onclick = function () {
loadXMLDoc();
}
}
</script>
</head>
<body>
<div id="show"><h2>原来的内容</h2></div>
<button type="button" id="bt">查看效果</button>
</body>
</html>. Ci-dessus Le code n'utilise pas d'opérations asynchrones. Si l'opération ajax prend du temps, cela peut provoquer une congestion du code, ce n'est donc pas recommandé.
De nombreux débutants ne comprennent peut-être pas assez clairement la différence entre les deux, et le code ci-dessus ne le démontre pas bien. Ce qui suit est une démonstration de leur différence à travers deux morceaux de code :
Exemple de code 1 : <🎜. >
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>php中文网</title>
<script>
function loadXMLDoc() {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("show").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open("GET", "demo/ajax/net/Async.aspx", true);
xmlhttp.send();
}
window.onload = function () {
loadXMLDoc();
var odiv = document.getElementById("content");
odiv.innerHTML = "由于是异步操作，所以不会阻塞当前内容的显示。";
}
</script>
</head>
<body>
<div id="show"><img src="wait.gif"></div>
<div id="content"></div>
</body>
</html>Le code ci-dessus est une opération asynchrone, donc lorsque le code de la requête ajax est traité en arrière-plan, cela n'affecte pas l'exécution des autres codes, donc en attendant la réponse, vous pouvez toujours écrire le contenu spécifié dans le div ci-dessous. C'est un avantage important d'ajax. Exemple de code deux :
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.php.cn/" />
<title>php中文网</title>
<script>
function loadXMLDoc() {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
}
else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("GET", "demo/ajax/net/Async.aspx", false);
xmlhttp.send();
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("show").innerHTML = xmlhttp.responseText;
}
}
window.onload = function () {
loadXMLDoc();
var odiv = document.getElementById("content");
odiv.innerHTML = "由于是同步操作，所以会阻塞当前内容的显示。";
}
</script>
</head>
<body>
<div id="show"><img src="wait.gif"></div>
<div id="content"></div>
</body>
</html>Le code ci-dessus ne peut pas exécuter le code suivant lors de l'exécution d'une opération en arrière-plan ajax. Il ne peut qu'attendre que le traitement soit terminé avant d'exécuter le code suivant. Tous les fichiers appelés dans l'exemple ci-dessus peuvent être créés, modifiés et utilisés localement.
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
