jQuery tornou obsoleto o XMLHTTPRequest síncrono

119

Como muitos outros, meu site está usando jQuery. Quando abro as ferramentas do desenvolvedor, vejo um aviso que diz que XMLHTTPRequest é

descontinuado devido aos seus efeitos prejudiciais à experiência do usuário final.

Continuei e li parte da documentação , mas era bastante técnica. Alguém pode explicar as consequências de mudar de XMLHTTPRequest para WHATWG em termos simples? Diz que aconteceu em 2012.

Além disso, a documentação diz que Synchronous XMLHttpRequest fora dos workers está em processo de remoção da plataforma web, quando isso acontece, se um agente do usuário os tiver em um serviço, eles precisam modificar o código existente?

Edd
fonte
2
Você deve estar falando de XMLHTTPRequests síncronos, não assíncronos, correto? As solicitações síncronas são horríveis para a experiência do usuário final (elas bloqueiam o navegador durante a solicitação) e geralmente não devem ser usadas.
jfriend00
2
forneça algum código que acione isso
charlietfl
3
Este é o texto completo em questão? XMLHttpRequest síncrono no thread principal foi descontinuado devido aos seus efeitos prejudiciais à experiência do usuário final.
Qantas 94 Heavy
1
jQuery só dá esse aviso para solicitações síncronas, não é? Você está fazendo uma solicitação síncrona deliberadamente? Nesse caso, a solução é estruturar seu código para trabalhar com solicitações assíncronas, o que você deve fazer de qualquer maneira, porque são muito mais agradáveis ​​do ponto de vista do usuário.
nnnnnn
1
Eu vi essa bandeira não só no meu site, mas também em outras, como no Youtube. Em relação às especificações, com quais especificações meu código deve estar em conformidade, W3C's ou WHATWG's? , referência que eu não quero perguntar no tópico principal, pois seria sinalizado como uma questão de opinião, eu acho. @ Qantas94Heavy
Edd

Respostas:

136

Para evitar esse aviso, não use:

async: false

em qualquer uma de suas $.ajax()chamadas. Este é o único recurso XMLHttpRequestobsoleto.

O padrão é async: true, portanto, se você nunca usar essa opção, seu código estará seguro se o recurso for realmente removido.

No entanto, provavelmente não será - ele pode ser removido dos padrões, mas aposto que os navegadores continuarão a suportá-lo por muitos anos. Portanto, se você realmente precisa do AJAX síncrono por algum motivo, pode usar async: falsee simplesmente ignorar os avisos. Mas há bons motivos pelos quais AJAX síncrono é considerado um estilo ruim, então você provavelmente deve tentar encontrar uma maneira de evitá-lo. E as pessoas que escreveram aplicativos em Flash provavelmente nunca pensaram que ele iria desaparecer, mas agora está em processo de extinção.

Observe que a FetchAPI que está substituindo XMLHttpRequestnem mesmo oferece uma opção síncrona.

Barmar
fonte
9
Este é o aviso do jQuery então. Eu posso ignorar isso? Não uso chamadas síncronas para o servidor. Meu lado perfeccionista não gosta de receber avisos de jeito nenhum.
Jordânia
2
@Jordan Acho que o aviso vem do navegador, não do jQuery. Isso acontecerá sempre que você tentar usar AJAX síncrono. Se você usar jQuery, isso só acontecerá se você especificar essa opção para $.ajax.
Barmar de
2
Estou usando, jquery.i18n.properties.jsmas não há uma chamada explícita do meu lado para $.ajax.Talvez internamente, mas não tenho certeza.
Manuel Jordan
1
Esse plugin carrega pacotes de recursos de .propertiesarquivos. Provavelmente, ele está usando AJAX síncrono para fazer isso, causando este aviso.
Barmar
1
@ManuelJordan configuração async: true em i18n pode causar um atraso na exibição das strings exibidas em sua página em conexões lentas. Showin em vez do código da string
Siyon DP
62

A resposta aceita está correta, mas eu encontrei outra causa se você estiver desenvolvendo em ASP.NET com Visual Studio 2013 ou superior e tiver certeza de que não fez nenhuma solicitação ajax síncrona ou definiu scripts no lugar errado.

A solução é desativar o recurso "Link do navegador" desmarcando "Habilitar link do navegador" na lista suspensa da barra de ferramentas do VS, indicada pelo pequeno ícone de atualização apontando no sentido horário. Assim que você fizer isso e recarregar a página, os avisos devem parar!

Desativar link do navegador

Isso só deve acontecer durante a depuração local, mas ainda é bom saber a causa dos avisos.

Sam
fonte
Pode-se desabilitar web.configadicionando <add key="vs:EnableBrowserLink" value="false" />dentro <appSettings>conforme descrito aqui: poconosystems.com/software-development/… .
Beel
3
Acho que esta é uma má sugestão apenas para se livrar das mensagens de aviso no console. Desativar o link do navegador e se livrar das melhorias de produtividade que o link do navegador adiciona para que você não veja uma mensagem de aviso no console do navegador? Melhor registrar um bug com a microsoft e ele será corrigido.
coding4fun
4
@ coding4fun Obrigado pela sua opinião; você pode ficar à vontade para registrar um bug na Microsoft. Eu não estava dizendo que você deveria desativar o link do navegador. Minha resposta é precisa quanto à causa desse aviso em alguns casos e é útil descartar algo em seu próprio código. Pessoalmente, me senti melhor quando percebi que não era algo que fiz de errado e pensei que outras pessoas também poderiam achar útil.
Sam
Isso corrigiu mais do que apenas o aviso de ajax. Eu tenho todos os tipos de bagunça de link de navegador no console javascript usando asp core.
JoeBass de
Alguém saberia o que é link do navegador e por que ele acaba dando esse aviso?
gideon
15

Isso aconteceu comigo por ter um link para js externos fora da cabeça pouco antes do final da seção do corpo. Você sabe, um destes:

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

Não tinha nada a ver com JQuery.

Você provavelmente veria o mesmo fazendo algo assim:

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

Mas não testei essa ideia.

Dave Amigo
fonte
O aviso foi embora para mim quando removi uma linha como esta, que eu não estava usando de qualquer maneira: @ Html.Script ("~ / scripts / apps / appname.js")
MsTapp
10

Foi mencionado como um comentário por @henri-chan , mas acho que merece um pouco mais de atenção:

Quando você atualiza o conteúdo de um elemento com novo html usando jQuery / javascript, e este novo html contém <script>tags, elas são executadas de forma síncrona e, portanto, acionando este erro. O mesmo vale para as folhas de estilo.

Você sabe que isso está acontecendo quando vê (vários) scripts ou folhas de estilo sendo carregados como XHRna janela do console. (Raposa de fogo).

Hugo Delsing
fonte
3

Nenhuma das respostas anteriores (que estão todas corretas) foi adequada para minha situação: Eu não uso o asyncparâmetro em jQuery.ajax()e não incluo uma tag de script como parte do conteúdo que estava sendo retornado como:

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

Minha situação é que estou chamando duas solicitações AJAX consecutivamente com o objetivo de atualizar duas divs ao mesmo tempo:

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

Quando clico em a.anchor3, surge o sinalizador de aviso. Resolvi o problema substituindo f2 invocando pela click()função:

function anchor_problem(){
$('a.anchor_problem').click(function(){
     f1();
     $('a.anchor_f2').click();
});
}
Adib Aroui
fonte
5
Os scripts não são executados se você inseri-los diretamente no DOM via innerHTML. Portanto, quando você chama .html (), o jQuery busca e executa todos os scripts incluídos na resposta html de forma síncrona.
Henry Chan,
@HenryChan, tentei entender você, mas sem sucesso. Você poderia me explicar em palavras mais simples. Não insiro scripts no DOM, insiro apenas HTML e ainda assim esta solução é a única que funciona para mim. Agradecemos antecipadamente
Adib Aroui
2
@whitelettersinblankpapers Acho que ele quis dizer: dentro de seu callback de ajax, se o conteúdo que você anexar a seus "div" contiver tags de script, eles serão chamados de forma síncrona.
Haitham Sweilem
1

Meu workabout: eu uso solicitações assíncronas despejando o código em um buffer. Eu tenho um loop verificando o buffer a cada segundo. Quando o dump chega ao buffer, executo o código. Eu também uso um tempo limite. Para o usuário final, a página funciona como se as solicitações síncronas fossem usadas.

retorno
fonte
você tem um pequeno código para eu saber como fazer isso?
ZerOne
5
@runback, o retorno de chamada da promessa done () não pode ser usado? $.ajax({ url : "example.com", async : true /* default is true */ }).done(function(response){ // Process the dump }) Espero não ter lido nada mal.
pravin
0

Se carregarmos o script em vista parcial, esse problema virá

  1. Removi o script na visualização parcial e mudei para a visualização principal.

Esta solução está funcionando bem para mim

A.Chandrashekar shekar
fonte