jQuery a désapprouvé XMLHTTPRequest synchrone

Comme beaucoup d'autres, mon site Web utilise jQuery. Lorsque j'ouvre les outils de développement, je vois un avertissement indiquant que XMLHTTPRequest est

obsolète en raison de ses effets néfastes sur l'expérience de l'utilisateur final.

J'ai continué et j'ai lu une partie de la documentation , mais c'était assez technique. Quelqu'un peut-il expliquer les conséquences du passage de XMLHTTPRequest à WHATWG en termes simples? Il dit que c'est arrivé en 2012.

En outre, la documentation indique que Synchronous XMLHttpRequest en dehors des nœuds de calcul est en cours de suppression de la plate-forme Web, lorsque cela se produit, si un agent utilisateur les avait dans un service, doit-il modifier son code existant?

Pour éviter cet avertissement, n'utilisez pas:

async: false

dans l'un de vos $.ajax()appels. C'est la seule fonctionnalité XMLHttpRequestobsolète.

La valeur par défaut est async: true, donc si vous n'utilisez jamais du tout cette option, votre code devrait être sûr si la fonctionnalité est vraiment supprimée.

Cependant, ce ne sera probablement pas le cas - il sera peut-être retiré des normes, mais je parie que les navigateurs continueront de le prendre en charge pendant de nombreuses années. Donc, si vous avez vraiment besoin d'AJAX synchrone pour une raison quelconque, vous pouvez utiliser async: falseet ignorer simplement les avertissements. Mais il y a de bonnes raisons pour lesquelles AJAX synchrone est considéré comme un style médiocre, vous devriez donc probablement essayer de trouver un moyen de l'éviter. Et les personnes qui ont écrit des applications Flash n'ont probablement jamais pensé que cela disparaîtrait non plus, mais il est en train d'être progressivement supprimé.

Notez que l' FetchAPI qui remplace XMLHttpRequestn'offre même pas d'option synchrone.

La réponse acceptée est correcte, mais j'ai trouvé une autre cause si vous développez sous ASP.NET avec Visual Studio 2013 ou supérieur et êtes sûr que vous n'avez pas effectué de requêtes ajax synchrones ou défini des scripts au mauvais endroit.

La solution est de désactiver la fonction "Lien du navigateur" en décochant "Activer le lien du navigateur" dans la liste déroulante de la barre d'outils VS indiquée par la petite icône de rafraîchissement pointant dans le sens des aiguilles d'une montre. Dès que vous faites cela et rechargez la page, les avertissements devraient cesser!

Cela ne devrait se produire que lors du débogage local, mais il est toujours agréable de connaître la cause des avertissements.

Cela m'est arrivé en ayant un lien vers des j externes à l'extérieur de la tête juste avant la fin de la section du corps. Vous savez, l'un de ceux-ci:

<script src="http://somesite.net/js/somefile.js">

Cela n'avait rien à voir avec JQuery.

Vous verriez probablement la même chose faire quelque chose comme ceci:

var script = $("<script></script>");
script.attr("src", basepath + "someotherfile.js");
$(document.body).append(script);

Mais je n'ai pas testé cette idée.

Cela a été mentionné comme un commentaire par @ henri-chan , mais je pense que cela mérite plus d'attention:

Lorsque vous mettez à jour le contenu d'un élément avec un nouveau html à l'aide de jQuery / javascript, et que ce nouveau html contient des <script>balises, celles-ci sont exécutées de manière synchrone et déclenchent ainsi cette erreur. Il en va de même pour les feuilles de style.

Vous savez que cela se produit lorsque vous voyez (plusieurs) scripts ou feuilles de style en cours de chargement comme XHRdans la fenêtre de la console. (Firefox).

Aucune des réponses précédentes (qui sont toutes correctes) n'était adaptée à ma situation: je n'utilise pas le asyncparamètre dans jQuery.ajax()et je n'inclus pas de balise de script dans le contenu qui était renvoyé comme:

<div> 
     SOME CONTENT HERE
</div>
<script src="/scripts/script.js"></script> 

Ma situation est que j'appelle deux requêtes AJAX consécutivement dans le but de mettre à jour deux divs en même temps:

function f1() {
     $.ajax(...); // XMLHTTP request to url_1 and append result to div_1
}

function f2() {
     $.ajax(...); // XMLHTTP request to url_2 and append result to div_2
}

function anchor_f1(){
$('a.anchor1').click(function(){
     f1();
})
}

function anchor_f2(){
$('a.anchor2').click(function(){
     f2();
});
}

// the listener of anchor 3 the source of problem
function anchor_problem(){
$('a.anchor3').click(function(){
     f1();
     f2();
});
}

anchor_f1();
anchor_f2();
anchor_problem();

Lorsque je clique sur a.anchor3, cela déclenche le drapeau d'avertissement.J'ai résolu le problème en remplaçant f2 en invoquant par click()fonction:

function anchor_problem(){
$('a.anchor_problem').click(function(){
     f1();
     $('a.anchor_f2').click();
});
}

Mon entraînement: j'utilise des requêtes asynchrones en vidant le code dans un tampon. J'ai une boucle vérifiant le tampon toutes les secondes. Lorsque le vidage est arrivé dans le tampon, j'exécute le code. J'utilise également un timeout. Pour l'utilisateur final, la page fonctionne comme si des requêtes synchrones étaient utilisées.

Si nous chargeons le script en vue partielle, ce problème arrive

1. J'ai supprimé le script en vue partielle et je suis passé à la vue principale.

Cette solution fonctionne bien pour moi