jQuery ajax - getScript() Methode
Beispiel
Durch AJAX-Anfragen einen JavaScript-Dokument erhalten und ausführen:
$("button").click(function(){ $.getScript("demo_ajax_script.js"); });
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:
|
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); }); });