success example error jquery ajax

example - jquery ajax json



Advertencia síncrona XMLHttpRequest y<script> (6)

ACTUALIZACIÓN: Esto se ha solucionado en jQuery 3.x. Si no tiene posibilidad de actualizar a una 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.

Puede solucionarlo, estableciendo explícitamente la opción asíncrona de la solicitud xhr en true :

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

Recibo un mensaje de advertencia:

XMLHttpRequest síncrono en el subproceso 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/ .

al realizar una solicitud AJAX asincrónica que contiene un script (que tiene src local), que se inyecta en HTML, utilizando el método $.html() . He cambiado el script dado para que contenga async="async" , pero el mensaje de advertencia aún permanece.

Comencé a depurar el problema para descubrir que mi <script> adjunto se maneja a través de la llamada jquery AJAX desde jQuery.ajaxTransport ( http://code.jquery.com/jquery-1.10.0.js , # 8663), donde async se establece en false (probablemente de ahí proviene el problema).

Ahora, ¿qué puedo hacer al respecto?

El mensaje aparece en la versión más reciente de Chrome, así como en Firefox.

Si bien no puedo proporcionar un caso de prueba en jsfiddle, aquí hay un caso de prueba que muestra el problema:

test.html

<html> <body> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script> <script> $(document).ready(function(){ $.ajax({ url: ''/response.html'', success: function(response){ $(document.body).html(response); } }) }); </script> </body> </html>

respuesta.html

<script type="text/javascript" src="/json.js" async="async"></script>

json.js

console.log(''hi'');

La solicitud AJAX no es necesaria para activar la advertencia; todo lo que se necesita es insertar un <script>

test2.html

<html> <body> <script type="text/javascript" src="https://code.jquery.com/jquery-2.1.3.js"></script> <script> $(document).ready(function(){ $(document.body).html(''<script type="text/javascript" src="/json.js" async="async"><//script>''); }); </script> </body> </html>

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

En mi caso, esto fue causado por el script flexie 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

Este mensaje de error me atormentó a pesar de usar async: true. Resulta que el problema real era usar el método de success . Cambié esto a done y la advertencia se ha ido.

success: function(response) { ... }

reemplazadas con:

done: function(response) { ... }

Incluso la última 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.
  • Vive con la advertencia, ten 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 ha intentado, pruebe esto: $.ajaxSetup({async:true}); , pero no creo que funcione.

Los navegadores ahora advierten sobre el uso de XHR síncrono. 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 Chrome, las personas 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 etiquetas de script que cargan archivos js externos. Puedes reproducirlo con algo como esto:

$(''body'').append(''<script src="foo.js"></script>'');

Supongo que jQuery solucionará esto en alguna versión futura. Hasta entonces, podemos ignorarlo o usar la sugerencia de A. Wolff anterior.

si solo necesita cargar el script, no haga lo siguiente

$(document.body).html(''<script type="text/javascript" src="/json.js" async="async"><//script>'');

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);