Avertissement synchrone XMLHttpRequest et

Je reçois un message d’avertissement:

Synchronous XMLHttpRequest sur le thread principal est déconseillé en raison de ses effets néfastes sur l’expérience de l’utilisateur final. Pour plus d’aide, consultez http://xhr.spec.whatwg.org/ .

lors de l’exécution d’une requête AJAX asynchrone contenant un script (qui a src local), qui est injecté dans HTML, en utilisant la méthode $.html() . J’ai changé le script donné pour contenir async="async" , mais le message d’avertissement persiste.

J’ai commencé à déboguer le problème pour découvrir que mon ajouté est géré via un appel jquery AJAX depuis jQuery.ajaxTransport ( http://code.jquery.com/jquery-1.10.0.js , # 8663), où async est défini sur false (c’est probablement de là que vient le problème).

Maintenant, que puis-je faire à ce sujet?

Le message apparaît dans la dernière version de Chrome ainsi que dans Firefox.

Bien que je ne puisse pas fournir de scénario de test sur jsfiddle, voici un scénario de test qui affiche le problème:

test.html

     $(document).ready(function(){ $.ajax({ url: '/response.html', success: function(response){ $(document.body).html(response); } }) });

response.html

json.js

 console.log('hi');

La requête AJAX n’est pas nécessaire pour déclencher l’avertissement – il suffit d’insérer un

test2.html

     $(document).ready(function(){ $(document.body).html(''); });

Il convient de noter que cela a été corrigé, selon https://github.com/jquery/jquery/issues/2060

UPDATE: ~~ceci a été corrigé dans jQuery 3.x.~~ Si vous n’avez aucune possibilité de mettre à niveau vers une version supérieure à 3.0, vous pouvez utiliser l’extrait de code suivant, MAIS soyez conscient du fait que vous allez maintenant perdre le comportement de synchronisation du chargement du script dans le contenu ciblé.

Vous pouvez résoudre ce problème en définissant explicitement l’option async de la requête xhr sur true :

 $.ajaxPrefilter(function( options, original_Options, jqXHR ) { options.async = true; });

Les navigateurs avertissent maintenant pour l’utilisation de XHR synchrone. MDN dit que cela a été mis en œuvre récemment:

À partir de Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27)

https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests#Synchronous_request

Voici comment le changement a été implémenté dans Firefox et Chrome:

En ce qui concerne Google Chrome, cela a commencé à se produire autour de la version 39. Je ne sais pas comment associer une révision / un ensemble de modifications à une version particulière de Chrome.

Oui, cela se produit lorsque jQuery ajoute un balisage à la page, y compris des balises de script qui chargent des fichiers js externes. Vous pouvez le reproduire avec quelque chose comme ceci:

 $('body').append('');

Je suppose que jQuery corrigera cela dans une future version. Jusque-là, nous pouvons soit l’ignorer, soit utiliser la suggestion d’A. Wolff ci-dessus.

Même la dernière version de jQuery a cette ligne, vous avez donc ces options:

Changer la source de jQuery vous-même – mais peut-être y a-t-il une bonne raison à son utilisation
En direct avec l’avertissement, veuillez noter que cette option est obsolète et non obsolète .
Changez votre code pour qu’il n’utilise pas cette fonction

Je pense que le numéro 2 est la ligne de conduite la plus sensée dans ce cas.

Au fait, si vous n’avez pas encore essayé, essayez ceci: $.ajaxSetup({async:true}); , mais je ne pense pas que ça va marcher.

J’ai été en proie à ce message d’erreur en dépit de l’utilisation async: true. Il s’est avéré que le problème était d’utiliser la méthode du success . J’ai changé cela pour done et l’avertissement est parti.

success: function(response) { ... }

remplacé par:

done: function(response) { ... }

Dans mon cas, cela était dû au script Flexie qui faisait partie de l’application “CDNJS Selections” proposée par Cloudflare .

Selon Cloudflare “Cette application est déconseillée en mars 2015”. Je l’ai éteint et le message a disparu instantanément.

Vous pouvez accéder aux applications en visitant https://www.cloudflare.com/a/cloudflare-apps/yourdomain.com

si vous avez juste besoin de charger le script ne faites pas comme ci-dessous

 $(document.body).html('

Essaye ça

 var scriptEl = document.createElement('SCRIPT'); scriptEl.src = "/module/script/form?_t="+(new Date()).getTime(); //$('#holder').append(scriptEl) // <--- create warning document.body.appendChild(scriptEl);