web-dev-qa-db-fra.com

jQuery a déconseillé d'utiliser XMLHTTPRequest synchrone

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

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

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

En outre, la documentation indique que Synchronous XMLHttpRequest en dehors des travailleurs est en cours de suppression de la plate-forme Web. Lorsque cela se produit, si un agent d'utilisateur en a un dans un service, doit-il modifier son code existant?

javascriptjqueryajaxxmlhttprequest
114
Edd

Pour éviter cet avertissement, n'utilisez pas:

async: false

dans l’un de vos appels $.ajax(). C’est la seule fonctionnalité de XMLHttpRequest qui est déconseillée.

La valeur par défaut est async: true. Par conséquent, si vous n'utilisez jamais cette option, votre code devrait être protégé si la fonctionnalité est réellement supprimée.

Cependant, ce ne sera probablement pas le cas. Il sera peut-être supprimé des normes, mais je parie que les navigateurs continueront à le prendre en charge pendant de nombreuses années. Donc, si vous avez vraiment besoin de AJAX synchrone pour une raison quelconque, vous pouvez utiliser async: false et ignorer 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 ceux qui ont écrit les applications Flash n'ont probablement jamais pensé que cela disparaîtrait non plus, mais le processus est en train de disparaître progressivement.

Notez que l'API Fetch qui remplace XMLHttpRequest n'offre même pas une option synchrone.

132
Barmar

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 une version ultérieure et que vous êtes certain de ne pas avoir effectué de demande ajax synchrone ni défini de script au mauvais endroit.

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

Disable Browser Link

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

62
Sam

Cela m'est arrivé en ayant un lien vers un js externe en dehors de la tête juste avant la fin de la section du corps. Vous savez, 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 ça:

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

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

15
Dave Friend

Il a été mentionné comme 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 le nouveau code HTML à l'aide de jQuery/javascript, et que ce nouveau code HTML contient des balises <script>, celles-ci sont exécutées de manière synchrone et donc déclencher cette erreur. Il en va de même pour les feuilles de style.

Vous savez que cela se produit lorsque plusieurs scripts ou feuilles de style sont chargés en tant que XHR dans la fenêtre de la console. (firefox).

4
Hugo Delsing

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

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

Ma situation est que j'appelle deux AJAX requêtes consécutives 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, il déclenche l'indicateur d'avertissement. J'ai résolu le problème en remplaçant f2 en invoquant la fonction click():

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

Mon workabout: J'utilise des demandes asynchrones déchargeant le code dans un tampon. J'ai une boucle vérifiant le tampon toutes les secondes. Lorsque le dump est arrivé dans la mémoire tampon, j'exécute le code. J'utilise aussi un timeout. Pour l'utilisateur final, la page fonctionne comme si des demandes synchrones seraient utilisées.

1
runback