Advertencia XMLHttpRequest sincrónica y

Recibo un mensaje de advertencia:

La XMLHttpRequest sincrónica en el hilo principal está en desuso debido a sus efectos perjudiciales para la experiencia del usuario final. Para obtener más ayuda, consulte http://xhr.spec.whatwg.org/ .

cuando se realiza una solicitud asíncrona de AJAX que contiene un script (que tiene src local), que se inyecta en HTML, utilizando el método $.html() . Cambié el script dado para que contenga async="async" , pero el mensaje de advertencia aún permanece.

Empecé a depurar el problema para descubrir que mi anexado se maneja a través de una llamada jquery AJAX desde jQuery.ajaxTransport ( http://code.jquery.com/jquery-1.10.0.js , # 8663), donde async está configurado como false (probablemente sea de donde proviene el problema).

Ahora, ¿qué puedo hacer al respecto?

El mensaje aparece en la versión más reciente de Chrome y Firefox.


Si bien no puedo proporcionar un caso de prueba en jsfiddle, aquí hay un caso de prueba que muestra el 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 solicitud AJAX no es necesaria para activar la advertencia; todo lo que se necesita es insertar un

test2.html

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

Vale la pena señalar que esto se ha solucionado, por https://github.com/jquery/jquery/issues/2060

ACTUALIZACIÓN: esto se ha solucionado en jQuery 3.x. Si no tiene posibilidad de actualizar a ninguna versión superior a la 3.0, puede usar el siguiente fragmento, PERO tenga en cuenta que ahora perderá el comportamiento de sincronización de la carga de scripts en el contenido de destino.

Podrías arreglarlo, estableciendo explícitamente la opción asincrónica de xhr request en true :

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

Los navegadores ahora advierten sobre el uso de XHR sincrónico. MDN dice que esto se implementó recientemente:

Comenzando con 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

Así es como se implementó el cambio en Firefox y Chromium:

En cuanto a las personas de Chrome, informan que esto comenzó a suceder en algún lugar alrededor de la versión 39. No estoy seguro de cómo vincular una revisión / conjunto de cambios a una versión particular de Chrome.

Sí, sucede cuando jQuery agrega marcas a la página, incluidas las tags de script que cargan archivos js externos. Puedes reproducirlo con algo como esto:

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

Supongo que jQuery arreglará esto en una versión futura. Hasta entonces podemos ignorarlo o usar la sugerencia de A. Wolff arriba.

Incluso el último jQuery tiene esa línea, por lo que tiene estas opciones:

  • Cambie la fuente de jQuery usted mismo, pero tal vez haya una buena razón para su uso
  • En vivo con la advertencia, tenga en cuenta que esta opción está en desuso y no está obsoleta .
  • Cambia tu código, para que no use esta función

Creo que el número 2 es el curso de acción más sensato en este caso.

Por cierto, si aún no lo has probado, prueba esto: $.ajaxSetup({async:true}); , pero no creo que funcione

Estuve plagado por este mensaje de error a pesar de usar async: true. Resulta que el problema real fue usar el método de success . Cambié esto a done y la advertencia se fue.

success: function(response) { ... }

Reemplazado con:

done: function(response) { ... }

En mi caso, esto fue causado por la secuencia de comandos flexible que era parte de la aplicación “Selecciones CDNJS” ofrecida por Cloudflare .

Según Cloudflare, “esta aplicación está en desuso en marzo de 2015”. Lo apagué y el mensaje desapareció al instante.

Puede acceder a las aplicaciones visitando https://www.cloudflare.com/a/cloudflare-apps/yourdomain.com

si solo necesitas cargar el script no hagas lo siguiente

 $(document.body).html(' 

Prueba esto

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