Diferença entre $ .ajax () e $ .get () e $ .load ()

Respostas:

241

$.ajax()é o mais configurável, onde você obtém controle refinado sobre cabeçalhos HTTP e outros. Você também pode obter acesso direto ao objeto XHR usando esse método. Um tratamento de erro um pouco mais refinado também é fornecido. Portanto, pode ser mais complicado e muitas vezes desnecessário, mas às vezes muito útil. Você precisa lidar com os dados retornados com um retorno de chamada.

$.get()é apenas uma abreviação para, $.ajax()mas abstrai algumas configurações, definindo valores padrão razoáveis ​​para o que oculta a você. Retorna os dados para um retorno de chamada. Ele permite apenas solicitações GET, portanto é acompanhado pela $.post()função para abstração semelhante, apenas para POST

.load()é semelhante a, $.get()mas adiciona uma funcionalidade que permite definir onde no documento os dados retornados serão inseridos. Portanto, realmente só pode ser usado quando a chamada resultar em HTML. Ele é chamado de maneira um pouco diferente das outras chamadas globais, pois é um método vinculado a um elemento DOM específico envolvido pelo jQuery. Portanto, alguém faria:$('#divWantingContent').load(...)

Deve-se notar que todos $.get(), $.post(), .load()são todos invólucros apenas para $.ajax(), como é chamado internamente.

Mais detalhes na documentação do Ajax do jQuery: http://api.jquery.com/category/ajax/

Alexander Sagen
fonte
3
@UzairAli não, literalmente leva as variáveis que você passar para ele e os usa para executar jQuery.ajax ()
lisburnite
1
Ótimo, o .load () é apenas HTML simples e o .get () é útil para mais coisas.
Luigi Lopez
30

Os métodos fornecem diferentes camadas de abstração.

  • $.ajax()fornece controle total sobre a solicitação do Ajax. Você deve usá-lo se os outros métodos não atenderem totalmente às suas necessidades.

  • $.get()executa uma GETsolicitação Ajax . Os dados retornados (que podem ser quaisquer dados) serão transmitidos ao seu manipulador de retorno de chamada.

  • $(selector).load()executará uma GETsolicitação do Ajax e definirá o conteúdo dos dados retornados selecionados (que devem ser texto ou HTML).

Depende da situação que método você deve usar. Se você quiser fazer coisas simples, não há necessidade de se preocupar $.ajax().

Por exemplo, você não usará $.load()se os dados retornados forem JSON, que precisam ser processados ​​ainda mais. Aqui você usaria $.ajax()ou $.get().

Felix Kling
fonte
9

http://api.jquery.com/jQuery.ajax/

jQuery.ajax()

Descrição: execute uma solicitação HTTP assíncrona (Ajax).

O monty completo permite que você faça qualquer tipo de solicitação do Ajax.


http://api.jquery.com/jQuery.get/

jQuery.get()

Descrição: carregue dados do servidor usando uma solicitação HTTP GET.

Só permite fazer solicitações HTTP GET, requer um pouco menos de configuração.


http://api.jquery.com/load/

.load()

Descrição: carregue dados do servidor e coloque o HTML retornado no elemento correspondente.

Especializado para obter dados e injetar em um elemento.

deceze
fonte
8

Muito básico mas

  • $.load(): Carrega um pedaço de html no DOM do contêiner.
  • $.get(): Use isso se você quiser fazer uma chamada GET e jogar extensivamente com a resposta.
  • $.post(): Use isso se desejar fazer uma chamada POST e não desejar carregar a resposta em algum DOM do contêiner.
  • $.ajax(): Use isso se você precisar fazer algo quando o XHR falhar ou se precisar especificar opções ajax (por exemplo, cache: true) em tempo real.
Tim
fonte
5

Nota importante: o método jQuery.load () pode não apenas solicitar GET, mas também solicitações POST , se o parâmetro de dados for fornecido (consulte: http://api.jquery.com/load/ )

data Tipo: PlainObject ou String Um objeto simples ou string que é enviado ao servidor com a solicitação.

Método de solicitação O método POST é usado se os dados forem fornecidos como um objeto; caso contrário, GET é assumido.

Example: pass arrays of data to the server (POST request)
$( "#objectID" ).load( "test.php", { "choices[]": [ "Jon", "Susan" ] } );
pymen
fonte
3

Todo mundo está certo. Funções .load, .gete .postsão maneiras diferentes de usar a função .ajax.

Pessoalmente, acho a função bruta .ajax muito confusa e prefiro usar load, get ou post conforme necessário.

O POST possui a seguinte estrutura:

$.post(target, post_data, function(response) { });

GET tem o seguinte:

$.get(target, post_data, function(response) { });

LOAD tem o seguinte:

$(*selector*).load(target, post_data, function(response) { });

Como você pode ver, há poucas diferenças entre eles, porque é a situação que determina qual deles usar. Precisa enviar as informações para um arquivo internamente? Use .post (isso seria a maioria dos casos). Precisa enviar as informações de forma que você possa fornecer um link para o momento específico? Use .get. Ambos permitem um retorno de chamada onde você pode lidar com a resposta dos arquivos.

Uma observação importante é que .load atua de duas maneiras diferentes. Se você fornecer apenas o URL do documento de destino, ele funcionará como um get (e eu digo agir porque testei a verificação $_POSTno PHP chamado enquanto utilizava o comportamento .load padrão e ele detecta $_POST, não $_GET; talvez seja mais preciso diga que age como .post sem argumentos); no entanto, como http://api.jquery.com/load/diz que, uma vez que você forneça uma matriz de argumentos para a função, ela enviará as informações para o arquivo. Seja qual for o caso, a função .load inserirá diretamente as informações em um elemento DOM, que em MUITOS casos é muito legível e muito direto; mas ainda fornece um retorno de chamada se você quiser fazer algo mais com a resposta. Além disso, o .load permite extrair um determinado bloco de código de um arquivo, oferecendo a possibilidade de salvar um catálogo, por exemplo, em um arquivo html, e recuperar partes dele (itens) diretamente nos elementos DOM.

Isaac Levi Felix Salinas
fonte
1

Ambos são usados ​​para enviar alguns dados e receber alguma resposta usando esses dados.

GET : obtenha informações armazenadas no servidor. (ou seja, pesquisa, tweet, informações pessoais). Se você deseja enviar informações, obtenha solicitação envie solicitação usando process.php?name=subrotoEntão, basicamente, envia informações por meio de url. O URL não pode lidar com mais de 2036 caracteres. Então, para postar no blog, você lembra que não é possível?

POST : Post faz a mesma coisa que GET. Registro de usuário, Login de usuário, Envio de Big Data, Postagem no blog. Se você precisar enviar informações seguras, use postagem ou para grandes dados, pois eles não passam pelo URL.

AJAX : $.get()e $.post()contém recursos que são subconjuntos de $.ajax(). Tem mais configuração.

$.get ()método, que é um tipo de atalho para $.ajax(). Ao usar $.get (), em vez de passar um objeto, você passa argumentos. No mínimo, você precisará dos dois primeiros argumentos, que são o URL do arquivo que você deseja recuperar (por exemplo, test.txt) e um retorno de chamada bem-sucedido.

Subroto Biswas
fonte
0

Todos explicaram o tópico muito bem. Há mais um ponto que eu gostaria de acrescentar sobre o método .load ().

Conforme o documento Carregar, se você adicionar um seletor com sufixo no URL de dados, ele não executará scripts ao carregar o conteúdo.

Plunker de trabalho

            $(document).ready(function(){
                $("#secondPage").load("mySecondHtmlPage.html #content");
            })

Por outro lado, depois de remover o seletor na url, os scripts no novo conteúdo serão executados. Experimente este exemplo

depois de remover #content no URL no arquivo index.html

            $(document).ready(function(){
                $("#secondPage").load("mySecondHtmlPage.html");
            })

Não existe esse recurso incorporado fornecido por outros métodos em discussão.

Deepak Kumar
fonte