jQuery ajax - getScript() metodu
Örnek
AJAX istekleri aracılığıyla bir JavaScript dosyasını almak ve çalıştırmak:
$("button").click(function(){ $.getScript("demo_ajax_script.js"); });
Tanım ve kullanım
getScript() metodu, HTTP GET istekleri aracılığıyla JavaScript dosyasını yükler ve çalıştırır.
Gramer
jQuery.getScript(url,success(response,status});
Parametreler | Açıklama |
---|---|
url | İstenen URL dizgesi. |
success(response,status) |
İsteğe bağlı. İstek başarılı olduğunda çalıştırılacak geri çağrı fonksiyonunu belirler. Ek parametreler:
|
Ayrıntılı açıklama
Bu fonksiyon, kısaltılmış Ajax fonksiyonudur ve şuyla eşdeğerdir:
$.ajax({ url: url, dataType: "script", success: success });
Bu geri çağrı fonksiyonu, döndürülen JavaScript dosyasını iletir. Bu genellikle çok faydalı değil, çünkü o zaman betik çalıştırmış olur.
Yüklenen senaryo genel ortamda çalışır, bu yüzden diğer değişkenleri referans alabilir ve jQuery fonksiyonlarını kullanabilir.
Örneğin, aşağıdaki kodu içeren bir test.js dosyasını yükleyin:
$(".result").html("<p>Lorem ipsum dolor sit amet.</p>");
Bu dosya adını referans alarak bu senaryoyu yükleyip çalıştırabilirsiniz:
$.getScript("ajax/test.js", function() { alert("Yükleme gerçekleştirildi."); });
Açıklama:jQuery 1.2 sürümünden önce, getScript yalnızca aynı alan adlı JS dosyalarını çağırabilirdi. 1.2'de, JavaScript dosyalarını alan sınırlamasız olarak çağırabilirsiniz. Dikkat: Safari 2 veya daha eski sürümler, genel alan içinde senkron olarak senaryoları çalıştıramaz. getScript ile senaryo eklediğinizde, gecikme fonksiyonu ekleyin.
Daha fazla örnek
Örnek 1
test.js dosyasını yükle ve çalıştır:
$.getScript("test.js");
Örnek 2
test.js dosyasını yükle ve çalıştır, başarılı olduktan sonra bilgi göster:
$.getScript("test.js", function(){ alert("Script yüklendi ve çalıştırıldı."); });
Örnek 3
Yükle jQuery resmi renk animasyon eklentisi Başarıyla bağlanan renk değişim animasyonu:
HTML kodu:
<button id="go">Çalıştır</button> <div class="block"></div>
jQuery kodu:
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); }); });