jQuery ajax - getScript() -menetelmä

Esimerkki

Hanki ja suorita JavaScript-tiedosto AJAX-pyynnön kautta:

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

Kokeile itse

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:

  • response - Sisältää pyynnöstä saadut tulosedat
  • status - Sisältää pyynnön tilan ("success", "notmodified", "error", "timeout" tai "parsererror")

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