jQuery ajax - getScript() Methode

Beispiel

Durch AJAX-Anfragen einen JavaScript-Dokument erhalten und ausführen:

$("button").click(function(){
  $.getScript("demo_ajax_script.js");
});

Probieren Sie es selbst aus

Definition und Verwendung

Die getScript() Methode lädt und führt das JavaScript-Dokument über einen HTTP GET-Anfrage aus.

Syntax

jQuery.getScript(url,success(response,status});
Parameter Beschreibung
url Die zu sendende URL-Zeichenkette.
success(response,status)

Optional. Bestimmt die Callback-Funktion, die nach dem Erfolg der Anfrage ausgeführt wird.

Zusätzliche Parameter:

  • response - Enthält die Ergebnisse der Anfrage
  • status - Enthält den Status der Anfrage ("success", "notmodified", "error", "timeout" oder "parsererror")

Detaillierte Erklärung

Diese Funktion ist eine verkürzte Ajax-Funktion und entspricht:

$.ajax({
  url: url,
  dataType: "script",
  success: success
});

Die Callback-Funktion überträgt das zurückgegebene JavaScript-Dokument. Das ist in der Regel nicht sehr nützlich, da der Skript bereits ausgeführt wurde.

Das geladene Skript wird im globalen Namespace ausgeführt und kann daher andere Variablen referenzieren und jQuery-Funktionen verwenden.

Zum Beispiel laden eines test.js-Datei, die das folgende Skript enthält:

$(".result").html("<p>Lorem ipsum dolor sit amet.</p>");

Durch Verweis auf diesen Dateinamen kann das Skript geladen und ausgeführt werden:

$.getScript("ajax/test.js", function() {
  alert("Laden wurde ausgeführt.");
});

Kommentare:Vor jQuery 1.2 konnte getScript nur JS-Dateien aus dem gleichen Domänennamen aufrufen. In Version 1.2 können Sie JavaScript-Dateien über Domänen hinweg aufrufen. Beachten Sie: Safari 2 oder frühere Versionen können Skripte nicht im globalen Namespace synchron ausführen. Fügen Sie bitte eine Verzögerungsfunktion hinzu, wenn Sie Skripte mit getScript hinzufügen.

Mehr Beispiele

Beispiel 1

Laden und Ausführen von test.js:

$.getScript("test.js");

Beispiel 2

Laden und Ausführen von test.js, erfolgreich nach der Anzeige der Information:

$.getScript("test.js", function(){
  alert("Script geladen und ausgeführt.");
});

Beispiel 3

Laden jQuery offizielles Farbanimation-Plugin Erfolgreich gebundene Farbanimationen:

HTML-Code:

<button id="go">Run</button>
<div class="block"></div>

jQuery-Code:

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