Metoda jQuery ajax - getScript()
Przykład
Pobieranie i uruchamianie pliku JavaScript za pomocą żądania AJAX:
$("button").click(function(){ $.getScript("demo_ajax_script.js"); });
Definicja i użycie
Metoda getScript() ładuje i wykonuje plik JavaScript za pomocą żądania HTTP GET.
Gramatyka
jQuery.getScript(url,success(response,status});
Parametry | Opis |
---|---|
url | Ciąg znaków URL do żądania. |
success(response,status) |
Opcjonalne. Określa funkcję zwrotną do wykonania po pomyślnym zakończeniu żądania. Dodatkowe parametry:
|
Szczegółowe wyjaśnienie
Ta funkcja jest skróconą wersją funkcji Ajax, która jest równoważna:
$.ajax({ url: url, dataType: "script", success: success });
Funkcja zwrotna dostarcza zwrócony plik JavaScript. Zwykle nie jest to zbyt użyteczne, ponieważ w tym momencie skrypt już działa.
Załadowany skrypt jest wykonywany w kontekście globalnym, więc może odnosić się do innych zmiennych i używać funkcji jQuery.
Na przykład załadowanie pliku test.js, który zawiera poniższy kod:
$(".result").html("<p>Lorem ipsum dolor sit amet.</p>");
Przez odniesienie do nazwy tego pliku można załadować i uruchomić ten skrypt:
$.getScript("ajax/test.js", function() { alert("Załadunek został wykonany."); });
Komentarz:Przed wersją 1.2 jQuery getScript mógł wywoływać pliki JS z tej samej domeny. W wersji 1.2 możesz wywoływać pliki JavaScript z innej domeny. Uwaga: Safari 2 lub wcześniejsze wersje nie mogą wykonywać skryptów w kontekście globalnym w sposób synchroniczny. Jeśli skrypt jest dodawany za pomocą getScript, dodaj funkcję opóźniającą.
Więcej przykładów
Przykład 1
Wczytaj i uruchom test.js:
$.getScript("test.js");
Przykład 2
Wczytaj i uruchom test.js, po powodzeniu wyświetl komunikat:
$.getScript("test.js", function(){ alert("Skrypt został załadowany i wykonany."); });
Przykład 3
Wczytaj Oficjalny wtyczka animacji kolorów jQuery Po powodzeniu powiązanie animacji zmiany koloru:
Kod HTML:
<button id="go">Run</button> <div class="block"></div>
Kod 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); }); });