jQuery ajax - getScript() -menetelmä
Esimerkki
Hanki ja suorita JavaScript-tiedosto AJAX-pyynnön kautta:
$("button").click(function(){ $.getScript("demo_ajax_script.js"); });
Määritelmä ja käyttö
getScript() -menetelmä ladataan ja suoritetaan HTTP GET -pyynnön kautta JavaScript-tiedosto.
Syntaksi
jQuery.getScript(url,success(response,status});
Parametrit | Kuvaus |
---|---|
url | Tuleva pyyntö URL-merkkijono. |
success(response,status) |
Valinnainen. Määrittää pyynnön onnistuttua suoritettavan paluufunktion. Lisäparametrit:
|
Yksityiskohtainen selitys
Tämä funktio on lyhennetty Ajax-funktio, ja se on yhtä kuin:
$.ajax({ url: url, dataType: "script", success: success });
Tämä paluufunktio vastaanottaa palautetun JavaScript-tiedoston. Tämä ei yleensä ole erityisen hyödyllistä, koska silloin skripti on jo suoritettu.
Ladatut skriptit suoritetaan globaalissa ympäristössä, joten ne voivat viitata muihin muuttujiin ja käyttää jQuery-funktioita.
Esimerkiksi lataa test.js-tiedosto, joka sisältää seuraavan koodin:
$(".result").html("<p>Lorem ipsum dolor sit amet.</p>");
Voit ladata ja suorittaa tämän skriptin viittaamalla tiedostonimeen:
$.getScript("ajax/test.js", function() { alert("Lataus suoritettiin."); });
Huomautus:jQuery 1.2 versiosta eteenpäin getScript voi kutsua vain samassa verkkotunnuksessa olevia JS-tiedostoja. 1.2:ssa voit kutsua JavaScript-tiedostoja eri verkkotunnuksista. Huomaa: Safari 2 tai aikaisemmat versiot eivät voi suorittaa skriptejä globaalissa kontekstissa. Jos lisäät skriptin getScript:in avulla, lisää viivytysfunktio.
Lisää esimerkkejä
Esimerkki 1
Lataa ja suorita test.js:
$.getScript("test.js");
Esimerkki 2
Lataa ja suorita test.js, ja näytä tiedot onnistuttuaan:
$.getScript("test.js", function(){ alert("Script ladataan ja suoritetaan."); });
Esimerkki 3
Lataa jQuery virallinen värianimointiliitännäinen Onnistuttuaan sidotaan värimuutosanimaatio:
HTML-koodi:
<button id="go">Aja</button> <div class="block"></div>
jQuery-koodi:
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); }); });