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");
});

Experimente você mesmo

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:

  • response - Contém os dados de resultado da solicitação
  • status - Contém o estado da solicitação ("success", "notmodified", "error", "timeout" ou "parsererror")

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