Maison > interface Web > js tutoriel > le corps du texte

La différence entre la synchronisation et l'asynchrone et la synchronisation et l'asynchronisme de la valeur de l'attribut asynchrone en ajax

亚连
Libérer: 2018-05-24 15:26:18
original
1650 Les gens l'ont consulté

Dans la méthode ajax de Jquery, async est utilisé pour contrôler la synchronisation et l'asynchrone. Lorsque la valeur async est vraie, il s'agit d'une requête asynchrone, et lorsque la valeur async est fausse, il s'agit d'une requête synchrone. L'attribut async en ajax est utilisé pour contrôler la manière dont les données sont demandées. La valeur par défaut est true, ce qui signifie que les données sont demandées de manière asynchrone par défaut.

La méthode ajax dans jquery a un attribut async pour contrôler la synchronisation et l'asynchronisme. La valeur par défaut est true, c'est-à-dire que la requête ajax est une requête asynchrone par défaut. Parfois, la synchronisation AJAX est utilisée dans les projets. Cette synchronisation signifie que lorsque le code JS est chargé dans l'AJAX actuel, tout le code de la page cessera de se charger et la page apparaîtra dans un état d'animation suspendue. Lorsque l'AJAX sera terminé, il continuera à s'exécuter. les autres codes et l'état suspendu de la page seront levés. De manière asynchrone, d'autres codes peuvent s'exécuter pendant l'exécution de ce code AJAX.

L'attribut async en ajax est utilisé pour contrôler la manière de demander des données. La valeur par défaut est true, ce qui signifie que les données sont demandées de manière asynchrone par défaut.

1. La valeur asynchrone est vraie (asynchrone)

Quand ajax envoie la requête, en attendant le retour du serveur, le premier plan continuera à exécuter l'ajax bloc. Le script ne s'exécutera pas avec succès tant que le serveur n'aura pas renvoyé le résultat correct, ce qui signifie que deux threads sont exécutés à ce moment-là, un thread après le bloc ajax envoie la requête et le script après le bloc ajax (un autre thread)

Par exemple

$.ajax({  
     type:"POST", 
     url:"Venue.aspx?act=init", 
      dataType:"html", 
     success:function(result){  //function1()
       f1(); 
       f2();  
    } 
     failure:function (result) {  
      alert('Failed');  
     }, 
 } 
 function2();
Copier après la connexion

Dans l'exemple ci-dessus, lorsque le bloc ajax fait une requête, il restera dans function1() et attendez le retour du serveur, mais en même temps (pendant ce processus d'attente), la réception exécutera function2().

2. La valeur asynchrone est fausse (synchrone)

Lorsque l'AJAX actuel est exécuté, le code JS suivant cessera de s'exécuter jusqu'à ce que l'AJAX soit terminé. , pour continuer à exécuter le code JS suivant.

Par exemple,

$.ajax({  
     type:"POST", 
     url:"Venue.aspx?act=init", 
     dataType:"html", 
     async: false,
    success:function(result){  //function1()
       f1(); 
       f2(); 
     } 
    failure:function (result) {  
      alert('Failed');  
     }, 
 } 
 function2();
Copier après la connexion

Lorsque asyn est défini sur false, la requête ajax est synchronisée. c'est-à-dire qu'une fois que le bloc ajax aura envoyé une requête à ce moment-là, il attendra à function1() et n'exécutera pas function2() jusqu'à ce que la partie function1() soit terminée.

La différence entre la synchronisation Ajax et asynchrone

var returnValue = null; 
xmlhttp = createXmlHttp(); 
xmlhttp.onreadystatechange = function() { 
  if(xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
    if (xmlhttp.responseText == "true") { 
      returnValue = "true"; 
    } 
    else { 
      returnValue = "false"; 
    } 
  } 
}; 
xmlhttp.open("Post",url,true); //异步传输 
xmlhttp.setRequestHeader("If-Modified-Since","0"); //不缓存Ajax
xmlhttp.send(sendStr); 
return returnValue;
Copier après la connexion

Seulement quand c'est le cas asynchrone Utilisez la valeur d'état xmlHttpReq.onreadystatechange ! Voici les différentes méthodes d'appel asynchrone et synchrone :

Java

xmlHttpReq.open("GET",url,true);//异步方式
  xmlHttpReq.onreadystatechange = showResult; //showResult是回调函数名
  xmlHttpReq.send(null);
function showResult(){  
  if(xmlHttpReq.readyState == 4){   
   if(xmlHttpReq.status == 200){
   ******
   }
  }
}
Copier après la connexion

Java

xmlHttpReq.open("GET",url,false);//同步方式  
      xmlHttpReq.send(null);  
      showResult(); //showResult虽然是回调函数名但是具体用法不一样~  
function showResult(){   
       //if(xmlHttpReq.readyState == 4){  这里就不用了,直接dosomething吧~  
        //if(xmlHttpReq.status == 200){  
          ******//dosomething  
        //}  
      //}  
}
xmlhttp.open("Post",url,true);
Copier après la connexion

Si elle est synchrone (faux), la valeur de retour est vraie ou fausse, car une fois l'envoi exécuté, onreadystatechange commence à sera exécuté et le programme attendra jusqu'à ce que onreadystatechange soit exécuté. Une fois que tout sera exécuté, l'instruction suivante ne sera exécutée qu'après l'obtention du texte de réponse, donc returnValue doit avoir une valeur.

Si elle est asynchrone (vrai), la valeur de retour doit être nulle, car après l'exécution de send, le programme n'attend pas la réponse de xmlhttp et continue d'exécuter l'instruction suivante, donc returnValue a renvoyé null avant que cela ait changé.

Si vous souhaitez obtenir la valeur de retour xmlhttp, vous devez utiliser la synchronisation. La valeur de retour ne peut pas être obtenue de manière asynchrone.

Veuillez noter lors de l'utilisation du pool xmlhttp de manière synchrone et asynchrone : lors de l'obtention de xmlhttp, vous ne pouvez créer qu'un nouveau xmlhttp, et vous ne pouvez pas retirer le xmlhttp utilisé du pool, car le readyState du utilisé xmlhttp vaut 4, donc les synchrones et les asynchrones enverront mais n'exécuteront pas onreadystatechange.

J'ai compilé ce qui précède pour vous, j'espère que cela vous sera utile à l'avenir.

Articles connexes :

Comprendre la valeur de l'option d'attribut de type de données dans jquery ajax

Implémentation d'un intervalle de N secondes basé sur Jquery ajax technologie Transmettre la valeur à une page

Résoudre le problème avant et arrière d'ajax basé sur Jquery.history

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!