Avviso sincrono XMLHttpRequest e

Ricevo un messaggio di avviso:

XMLHttpRequest sincrono sul thread principale è deprecato a causa dei suoi effetti dannosi sull’esperienza dell’utente finale. Per ulteriori informazioni, consulta http://xhr.spec.whatwg.org/ .

quando si esegue una richiesta AJAX asincrona che contiene uno script (che ha src locale), che viene iniettato in HTML, utilizzando il metodo $.html() . Ho cambiato lo script dato per contenere async="async" , ma il messaggio di avviso rimane ancora.

Ho iniziato il debug del problema per scoprire che il mio aggiunto è gestito tramite jQuery chiamata AJAX da jQuery.ajaxTransport ( http://code.jquery.com/jquery-1.10.0.js , # 8663), dove async è impostato su false (probabilmente è da dove viene il problema).

Ora – cosa posso fare per questo?

Il messaggio viene visualizzato nella versione più recente di Chrome e di Firefox.


Mentre non riesco a fornire un caso di test su jsfiddle, ecco un caso di test che mostra il problema:

test.html

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

response.html

  

json.js

 console.log('hi'); 

La richiesta AJAX non è necessaria per triggersre l’avviso: tutto ciò che è necessario è inserire uno

Test2.html

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

Vale la pena notare che questo è stato corretto, per https://github.com/jquery/jquery/issues/2060

AGGIORNAMENTO: è stato corretto in jQuery 3.x. Se non hai la possibilità di eseguire l’aggiornamento a nessuna versione precedente alla 3.0, potresti utilizzare lo snippet seguente, ma tieni presente che ora perderai il comportamento di sincronizzazione del caricamento degli script nel contenuto scelto come target.

È ansible risolvere il problema impostando esplicitamente l’opzione asincrona della richiesta xhr su true :

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

I browser ora avvisano per l’uso di XHR sincrono. MDN dice che questo è stato implementato di recente:

A partire da 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

Ecco come la modifica è stata implementata in Firefox e Chromium:

Per quanto riguarda le persone di Chrome, questo ha iniziato a verificarsi intorno alla versione 39. Non sono sicuro di come colbind una revisione / changeset a una versione particolare di Chrome.

Sì, succede quando jQuery aggiunge il markup alla pagina, inclusi i tag di script che caricano file js esterni. Puoi riprodurlo con qualcosa di simile a questo:

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

Immagino che jQuery risolverà questo in alcune versioni future. Fino ad allora possiamo o ignorarlo o usare il suggerimento di A. Wolff sopra.

Anche l’ ultimo jQuery ha quella linea, quindi hai queste opzioni:

  • Cambia tu stesso la fonte di jQuery – ma forse c’è una buona ragione per il suo utilizzo
  • Vivere con l’avviso, si prega di notare che questa opzione è deprecata e non obsoleta .
  • Cambia il tuo codice, quindi non usa questa funzione

Penso che il numero 2 sia la linea di condotta più sensata in questo caso.

A proposito, se non lo hai ancora provato, prova questo: $.ajaxSetup({async:true}); , ma non penso che funzionerà.

Sono stato afflitto da questo messaggio di errore nonostante l’utilizzo di async: true. Risulta che il vero problema stava usando il metodo di success . L’ho modificato e l’avviso è sparito.

success: function(response) { ... }

sostituito con:

done: function(response) { ... }

Nel mio caso ciò è stato causato dallo script flexie che faceva parte dell’app “CDNJS Selections” offerta da Cloudflare .

Secondo Cloudflare “Questa app è stata ritirata a marzo 2015”. L’ho spento e il messaggio è scomparso all’istante.

Puoi accedere alle app visitando https://www.cloudflare.com/a/cloudflare-apps/yourdomain.com

se hai solo bisogno di caricare script non fare come sotto

 $(document.body).html(' 

Prova questo

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