javascript - example - xmlhttprequest json

jQuery ha desaprobado XMLHTTPRequest sincrónico

Question

Como muchos otros, mi sitio web está usando jQuery. Cuando abro las herramientas de desarrollador, veo una advertencia que dice que XMLHTTPRequest es

en desuso debido a sus efectos perjudiciales para la experiencia del usuario final.

Seguí y leí parte de la documentation , pero era bastante técnica. ¿Alguien puede explicar las consecuencias de cambiar de XMLHTTPRequest a WHATWG en términos simples? Dice que sucedió en 2012.

Además, la documentación dice que Synchronous XMLHttpRequest fuera de los trabajadores está en proceso de ser eliminado de la plataforma web, cuando eso sucede, si un agente de usuario los tenía en un servicio, ¿necesitan modificar su código existente?

Answer 1

Esto me sucedió al tener un enlace a js externos fuera de la cabeza justo antes del final de la sección del cuerpo. Ya sabes, uno de estos:

<script src="http://somesite.net/js/somefile.js">

No tenía nada que ver con JQuery.

Probablemente verías lo mismo haciendo algo como esto:

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

Pero no he probado esa idea.

Answer 2

Fue mencionado como un comentario por @henri-chan , pero creo que merece más atención:

Cuando actualiza el contenido de un elemento con un nuevo html usando jQuery / javascript, y este nuevo html contiene etiquetas <script> , estas se ejecutan sincrónicamente y, por lo tanto, desencadenan este error. Lo mismo ocurre con las hojas de estilo.

Usted sabe que esto está sucediendo cuando ve (múltiples) scripts u hojas de estilo que se cargan como XHR en la ventana de la consola. (Firefox).

Answer 3

La respuesta aceptada es correcta, pero encontré otra causa si está desarrollando bajo ASP.NET con Visual Studio 2013 o superior y está seguro de que no realizó ninguna solicitud ajax sincrónica ni definió ningún script en el lugar incorrecto.

La solución es deshabilitar la función "Enlace del navegador" desmarcando "Habilitar enlace del navegador" en el menú desplegable de la barra de herramientas VS indicado por el pequeño icono de actualización que apunta en el sentido de las agujas del reloj. ¡Tan pronto como haga esto y vuelva a cargar la página, las advertencias deberían detenerse!

Esto solo debería suceder durante la depuración local, pero aún así es bueno saber la causa de las advertencias.

Answer 4

Mi trabajo: utilizo solicitudes asíncronas que descargan el código en un búfer. Tengo un bucle que comprueba el búfer cada segundo. Cuando el volcado ha llegado al búfer, ejecuto el código. También uso un tiempo de espera. Para el usuario final, la página funciona como si se usaran solicitudes sincrónicas.

Answer 5

Ninguna de las respuestas anteriores (que son correctas) fue adecuada para mi situación: no uso el parámetro async en jQuery.ajax() y no jQuery.ajax() una etiqueta de script como parte del contenido que se devolvió me gusta:

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

Mi situación es que estoy llamando dos solicitudes AJAX consecutivamente con el objetivo de actualizar dos divs al mismo tiempo:

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

Cuando hago clic en a.anchor3 , a.anchor3 el a.anchor3 advertencia. Resolví el problema reemplazando la invocación de f2 por la función click() :

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

Answer 6

Para evitar esta advertencia, no use:

async: false

en cualquiera de sus llamadas $.ajax() . Esta es la única característica de XMLHttpRequest que está en desuso.

El valor predeterminado es async: true , por lo que si nunca usa esta opción, su código debería estar seguro si la función se elimina realmente.

Sin embargo, probablemente no lo sea, puede que se elimine de los estándares, pero apuesto a que los navegadores continuarán admitiéndolo durante muchos años. Entonces, si realmente necesita AJAX sincrónico por alguna razón, puede usar async: false e ignorar las advertencias. Pero hay buenas razones por las que AJAX sincrónico se considera un estilo pobre, por lo que probablemente debería intentar encontrar una manera de evitarlo. Y las personas que escribieron aplicaciones Flash probablemente tampoco pensaron que desaparecería, pero está en proceso de eliminación gradual ahora.

Tenga en cuenta que la API Fetch que está reemplazando XMLHttpRequest ni siquiera ofrece una opción síncrona.