Maison  >  Article  >  interface Web  >  Explication détaillée de la synchronisation ajax et de l'asynchronisme dans jquery

Explication détaillée de la synchronisation ajax et de l'asynchronisme dans jquery

亚连
亚连original
2018-05-25 09:55:332051parcourir

La synchronisation Jquery ajax signifie que lorsque le code JS est chargé dans l'ajax actuel, tous les codes de la page cesseront de se charger et la page apparaîtra dans un état d'animation suspendue. Lorsque l'ajax sera terminé, il continuera. pour exécuter d’autres codes. L’état suspendu sera levé. Asynchrone signifie que d'autres codes peuvent s'exécuter pendant que ce code ajax est en cours d'exécution. Cet article vous donnera une explication détaillée.Pour ceux qui sont intéressés, veuillez vous référer à

Lorsque j'ai déjà écrit du code JQUERY, je dois considérer l'ordre d'exécution du code lorsque je rencontre des données de chargement AJAX. Des projets récents ont utilisé la synchronisation AJAX. 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 sortira de l'état d'animation suspendue. Lorsque l'AJAX sera terminé, elle continuera à exécuter d'autres. les codes et l’état d’animation suspendu de la page seront publiés.

De manière asynchrone, d'autres codes peuvent s'exécuter pendant que ce code AJAX est en cours d'exécution.

async:false de jquery, cet attribut

est par défaut true : asynchrone, false : synchrone.

$.ajax({ 
    type: "post", 
    url: "path", 
    cache:false, 
    async:false, 
    dataType: ($.browser.msie) ? "text" : "xml", 
     success: function(xmlobj){ 
    } 
});

Avoir cet attribut peut relativement réduire le problème de l'exécution du code dans l'ordre des livres, mais s'il est trop utilisé, la page se figera trop de fois . Cela entraînera une mauvaise expérience utilisateur ~ !

Explication officielle de l'async et du succès dans $.Ajax() :

async 
Boolean 
Default: true
By default, all requests are sent asynchronous (e.g. this is set to true by default). If you need synchronous requests, set this option to false. Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active.
success 
Function
A function to be called if the request succeeds. The function gets passed two arguments: The data returned from the server, formatted according to the 'dataType' parameter, and a string describing the status. This is an Ajax Event.

Ici, la valeur par défaut de async est true , cette situation est asynchrone, ce qui signifie qu'après qu'Ajax a envoyé une requête, en attendant le retour du serveur, la réception continuera à exécuter le script derrière le bloc Ajax et n'exécutera pas avec succès tant que le serveur n'aura pas renvoyé le résultat correct. C'est-à-dire que deux threads sont exécutés à ce moment, un thread après le bloc ajax envoie la requête et le script (un autre thread) après le bloc ajax. Exemple :

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

function2();

Dans l'exemple ci-dessus, lorsque le bloc ajax envoie une requête, il restera dans function1() et attendra le retour du côté serveur, mais en même temps (pendant ce processus d'attente (au milieu), la réception exécutera function2(), c'est-à-dire que deux threads apparaîtront à ce moment-là, appelons-les ici function1() et function2() .

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

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

Articles connexes :

Des exemples spécifiques à Jquery présentent quand utiliser AJAX et où AJAX doit être utilisé

jquery et PHP combiné avec un long sondage AJAX

Compréhension préliminaire de JavaScript, Ajax, jQuery et comparaison de la relation entre les trois

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!

Déclaration:
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