Qual é a diferença entre XMLHttpRequest, jQuery.ajax, jQuery.post, jQuery.get

121

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?

Rodrigues
fonte
4
Quanto às performances (mal respondidas): de acordo com o jsperf, o uso regular do XMLHttpRequest é muito mais rápido do que o jQuery.
e2-e4 24/10

Respostas:

145
  • 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.

Uso

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.

Analogia

É 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.

Robert Koritnik
fonte
existe alguma vantagem em usar $ .ajax () em termos de desempenho?
Rodrigues
1
@ Rodrigues: na verdade não. Se você pensar $.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.
Robert Koritnik
Obrigado Robert Koritnik. então eu vou ficar com $ .post e $ .get.
Rodrigues
Você também pode $.ajaxtornar suas chamadas consistentes em qualquer lugar, se quiser. Contanto que você não use o XHR diretamente, é bom fazê-lo de qualquer maneira.
Robert Koritnik
1
@RobertKoritnik e o problema de armazenamento em cache no IE? É o mesmo usando XMLHttpRequest e $ .ajax ()?
Bhargavi Gunda
28

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.

Jonathon Bolster
fonte
o que acontece com limite de transferência de dados de cada função para upload e download
Rodrigues
Uma 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!).
Jonathon Bolster
Está bem. então, em suma, você quer dizer, enviar mais dados usar post e receber mais dados usar, certo?
Rodrigues
@Rodrigues - Sim, basicamente :) Geralmente, se você está apenas procurando ler algo (por exemplo, uma solicitação para obter uma lista de tweets do twitter), use GET. Se você deseja enviar algo (por exemplo, postar um tweet), use POST:
Jonathon Bolster
7

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.

Sírius
fonte
2

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.

Neil
fonte
qual é a vantagem de usar o jquery sobre a criação de um objeto XMLHttpRequest xmlhttp.open, send () e responseText.
Rodrigues
O objeto XMLHttpRequest é instanciado de maneira diferente, de acordo com o navegador atual. Exigiria que você trabalhasse um pouco de manutenção de javascript para fornecer uma interface básica usando XMLHttpRequest. Se você já possui o jQuery, ele faz tudo por você. É realmente uma questão de conveniência, não de funcionalidade, já que você pode tecnicamente fazer a mesma coisa. Sem mencionar que, como o jQuery envolve o objeto XMLHttpRequest, significa que ele será fornecido caso você queira fazer algo específico com ele.
Neil
ok .. Obrigado Neil por sua sugestão ... existe algum IDE como o visual studio disponível para usar e depurar o jquery com php ou aspx.
Rodrigues
É difícil encontrar um IDE que permita depurar javascript e php ou aspx simplesmente porque um está do lado do servidor enquanto o outro está do lado do cliente. Isso significa que, infelizmente, você precisa depurar o javascript separadamente. No entanto, descobri que o firebug ( getfirebug.com ) é maravilhoso para depurar o javascript em geral. Coloque um ponto de interrupção na função de retorno de chamada e ele mostra tudo o que você recebe pelo servidor e passo a passo, tudo o que seu javascript faz com ele. Espero que ajude.
Neil
1

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.

Mannan Bahelim
fonte
0

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.

Steve
fonte
é que não há qualquer vantagem na personalização jQuery.ajax
Rodrigues
Suponho que você queira usá-lo sobre os métodos de taquigrafia, na minha experiência, acho que os de taquigrafia são úteis se a maioria dos padrões for o que você deseja, se precisar ser muito específico sobre como obter os dados necessários. Ajax é geralmente o caminho a percorrer.
Steve Steve
Obrigado Steve. vai usar post e get. Se você der alguns exemplos de .ajax, posso fazer uma comparação.
Rodrigues