Método jQuery ajax - getScript()
Exemplo
Obter e executar um arquivo JavaScript por meio de solicitação AJAX:
$("button").click(function(){ $.getScript("demo_ajax_script.js"); });
Definição e uso
O método getScript() carrega e executa o arquivo JavaScript via solicitação HTTP GET.
Sintaxe
jQuery.getScript(url,success(response,status});
Parâmetros | Descrição |
---|---|
url | A string de URL que será solicitada. |
success(response,status) |
Opcional. Define a função de callback a ser executada após a solicitação com sucesso. Parâmetros adicionais:
|
Explicação detalhada
Esta função é uma versão abreviada da função Ajax, equivalente a:
$.ajax({ url: url, dataType: "script", success: success });
A função de callback passada aqui receberá o arquivo JavaScript retornado. Isso geralmente não é muito útil, porque o script já foi executado naquela hora.
Os scripts carregados são executados no escopo global, portanto, podem referenciar outras variáveis e usar funções do jQuery.
Por exemplo, carregar um arquivo test.js que contém o seguinte código:
$(".result").html("<p>Lorem ipsum dolor sit amet.</p>");
Ao referenciar esse nome de arquivo, você pode carregar e executar esse script:
$.getScript("ajax/test.js", function() { alert("Carregamento foi executado."); });
Comentário:Antes da versão 1.2 do jQuery, getScript só podia chamar arquivos JS do mesmo domínio. Na versão 1.2, você pode chamar arquivos JavaScript de domínios diferentes. Atenção: Versões 2 ou anteriores do Safari não podem executar scripts no escopo global de forma síncrona. Se você adicionar scripts via getScript, adicione uma função de atraso.
Mais exemplos
Exemplo 1
Carregar e executar test.js:
$.getScript("test.js");
Exemplo 2
Carregar e executar test.js, exibir mensagem após sucesso:
$.getScript("test.js", function() { alert("Script carregado e executado."); });
Exemplo 3
Carregar Plugin oficial de animação de cor do jQuery Após a execução, vincular a animação de mudança de cor:
Código HTML:
<button id="go">Executar</button> <div class="block"></div>
Código do jQuery:
jQuery.getScript("http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js", function() { $("#go").click(function() { $(".block").animate({ backgroundColor: 'pink' }, 1000) .animate({ backgroundColor: 'blue' }, 1000); }); });