Como posso descobrir qual o melhor método para uma situação? Alguém pode fornecer alguns exemplos para saber a diferença em termos de funcionalidade e desempenho?
Respostas:
XMLHttpRequest é o objeto bruto do navegador que o jQuery agrupa em um formulário mais utilizável e simplificado e oferece funcionalidade consistente entre navegadores.
jQuery.ajax é um solicitante geral do Ajax no jQuery que pode fazer qualquer tipo e solicitações de conteúdo.
jQuery.gete, jQuery.postpor outro lado, só pode emitir solicitações GET e POST. Se você não sabe o que são, verifique o protocolo HTTP e aprenda um pouco. Internamente, essas duas funções usam, jQuery.ajaxmas usam configurações específicas que você não precisa definir, simplificando a solicitação GET ou POST em comparação ao uso jQuery.ajax. De qualquer maneira, GET e POST são os métodos HTTP mais usados (em comparação com DELETE, PUT, HEAD ou mesmo outros exóticos raramente usados).
Todas as funções do jQuery usam XMLHttpRequestobjetos em segundo plano, mas fornecem funcionalidades adicionais que você não precisa fazer sozinho.
Portanto, se você estiver usando o jQuery, recomendo fortemente que você use apenas a funcionalidade do jQuery . Esqueça XMLHttpRequestcompletamente. Use variações adequadas da função de solicitação do jQuery e, em todos os outros casos, use $.ajax(). Portanto, não esqueça que existem outras funções comuns do jQuery Ajax relacionadas a $.get(), $.post()e $.ajax(). Bem, você pode usar apenas $.ajax()para todas as suas solicitações, mas precisará escrever um pouco mais de código, porque ele precisa de mais opções para chamá-lo.
É como se você fosse capaz de comprar um motor de carro para criar um carro inteiro com direção, freios, etc ... Os fabricantes de automóveis produzem carros completos, com uma interface amigável (pedais, volante etc.) então você não precisa fazer tudo sozinho.
$.poste $.geta única coisa mais lenta é uma pequena quantidade de código antes de $.ajaxser chamado. Mas se você escrever suas próprias rotinas usando o XHR diretamente, as coisas podem ser um pouco otimizadas, mas podem ser mais complicadas. Eu sugiro que você se mantenha do lado do jQuery. Isso tornará sua vida mais fácil. E considerando o fato de que a chamada assíncrona está demorando muito mais do que o código que a emite, você provavelmente não notará nenhuma diferença óbvia entre essas chamadas.
$.ajaxtornar suas chamadas consistentes em qualquer lugar, se quiser. Contanto que você não use o XHR diretamente, é bom fazê-lo de qualquer maneira.
Cada um deles usa XMLHttpRequest. É isso que o navegador usa para fazer a solicitação. O jQuery é apenas uma biblioteca JavaScript e o método $ .ajax é usado para criar um XMLHttpRequest.
$ .post e $ .get são apenas versões abreviadas de $.ajax. Eles fazem praticamente a mesma coisa, mas tornam mais rápida a gravação de uma solicitação AJAX - $.postfazem uma solicitação HTTP POST e $.getfazem uma solicitação HTTP GET.
GETsolicitação enviará todos os dados na cadeia de caracteres da URL - que podem ser limitados pelo cliente / servidor ( stackoverflow.com/questions/2659952/… ). Uma POSTsolicitação envia todos os dados nos cabeçalhos; portanto, o limite de tamanho da URL não deve ser um problema (a menos que você tenha nomes muito longos de arquivos e pastas no seu script!).
GET. Se você deseja enviar algo (por exemplo, postar um tweet), use POST:
jQuery.geté um invólucro para jQuery.ajax, que é um invólucro para XMLHttpRequest.
XMLHttpRequest e Fetch API (experimental no momento) são os únicos no DOM, portanto devem ser os mais rápidos.
Vi muitas informações que não são mais precisas, então criei uma página de teste em que qualquer pessoa pode testar a versão da versão qual é a melhor a qualquer momento:
https://jsperf.com/xhr-vs-jquery-ajax-vs-get-vs-fetch
Dos meus testes de hoje, mostra que apenas o jQuery não é uma solução limpa ou rápida, os resultados para mim em dispositivos móveis ou computadores mostram que o jQuery é, pelo menos, 80% mais lento que o XHR2, se você estiver usando muito ajax, no celular, levará muito tempo para carregar um site simples.
O uso em si também está no link.
jQuery.post e jQuery.get simulam carregamentos típicos de páginas, ou seja, você clica em um botão de envio e leva a uma nova página (ou recarrega a mesma página). postar e obter diferem ligeiramente na maneira como os dados são enviados para o servidor (um bom artigo sobre isso pode ser encontrado aqui .
jQuery.ajax e XMLHttpRequest são carregamentos de página semelhantes a post e get, exceto que a página não muda. Quaisquer informações que o servidor retorne podem ser usadas por javascript localmente para serem usadas de qualquer maneira, incluindo a modificação do layout da página. Eles normalmente são usados para realizar trabalhos assíncronos enquanto o usuário ainda pode navegar na página. Um bom exemplo disso seria os recursos de preenchimento automático, carregando dinamicamente a partir de valores de um banco de dados para concluir um campo de texto. A diferença fundamental entre jQuery.ajax e XMLHttpRequest é que o jQuery.ajax usa XMLHttpRequest para obter o mesmo efeito, mas com uma interface mais simples. Se você usa o jQuery, eu o encorajo a ficar com o jQuery.ajax.
Post antigo. mas ainda quero responder, uma diferença que eu enfrentei enquanto trabalhava com Web Workers (javascript)
os trabalhadores da web não podem ter acesso no nível da interface do usuário. Isso significa que você não pode acessar nenhum elemento DOM no código JavaScript que pretende executar usando trabalhadores da Web. Objetos como janela, documento e pai não podem ser acessados no código de trabalhador da Web.
Como sabemos, a biblioteca jQuery está ligada ao HTML DOM, e isso permitiria violar a regra "sem acesso ao DOM". Isso pode ser um pouco doloroso, porque métodos como jQuery.ajax, jQuery.post, jQuery.get não podem ser usados em trabalhadores da Web. Felizmente, você pode usar o objeto XMLHttpRequest para fazer solicitações do Ajax.
No que diz respeito aos métodos jQuery, .poste .getsimplesmente o faz .ajaxinternamente, seu objetivo é abstrair algumas das opções desnecessárias .ajaxe fornecer alguns padrões apropriados para esse tipo de solicitação, respectivamente.
Duvido que exista muita diferença de desempenho entre os três.
O .ajaxmétodo em si faz um XMLHttpRequest, será altamente otimizado conforme o restante do jQuery, mas provavelmente não será tão eficiente como se você tivesse adaptado toda a interação .. mas essa é a diferença entre escrever muito código ou escrevendo jQuery.ajax.