jQuery ajax - getScript() methode

jQuery Ajax referentiemanual

Voorbeeld

Verkrijg en voer een JavaScript-bestand uit via een AJAX-aanvraag:

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

Probeer het zelf

Definitie en gebruik

De getScript() methode laadt en voert een JavaScript-bestand via een HTTP GET-aanvraag uit.

Syntaxis

jQuery.getScript(url,success(response,status});
Parameters Beschrijving
url De te aanvragen URL-string.
success(response,status)

Optioneel. Bepaalt de callback-functie die wordt uitgevoerd na het succesvolle uitvoeren van de aanvraag.

Aanvullende parameters:

  • response - Bevat de resultaatgegevens van de aanvraag
  • status - Bevat de status van de aanvraag ("success", "notmodified", "error", "timeout" of "parsererror")

Uitleg

Deze functie is een afgekorte versie van de Ajax-functie, equivalent aan:

$.ajax({
  url: url,
  dataType: "script",
  success: success
});

De callback-functie die wordt ingevoerd, ontvangt de geretourneerde JavaScript-bestand. Dit is meestal niet zo nuttig, omdat het script op dat moment al is uitgevoerd.

Het geladen script wordt in de globale omgeving uitgevoerd, waardoor het andere variabelen kan aanroepen en jQuery-functies kan gebruiken.

Bijvoorbeeld, laden van een test.js-bestand dat het volgende codeblok bevat:

$(".result").html("<p>Lorem ipsum dolor sit amet.</p>");

Door de bestandsnaam te refereren, kunt u dit script laden en uitvoeren:

$.getScript("ajax/test.js", function() {
  alert("Laden is uitgevoerd.");
});

Opmerking:Voor jQuery versie 1.2 en eerder kon getScript alleen JS-bestanden van dezelfde domeinnaam aanroepen. In versie 1.2 kunt u JavaScript-bestanden over domeinen heen aanroepen. Let op: Safari 2 of eerder kunnen scripts niet synchroon in de globale scope worden uitgevoerd. Als u scripts via getScript toevoegt, voeg een vertraging toe aan de functie.

Meer voorbeelden

Voorbeeld 1

Laden en uitvoeren van test.js:

$.getScript("test.js");

Voorbeeld 2

Laden en uitvoeren van test.js, succesvol weergeven van informatie:

$.getScript("test.js", function() {
  alert("Script geladen en uitgevoerd.");
});

Voorbeeld 3

Laden jQuery officiële kleuranimatie plug-in Succesvol een kleurveranderingsanimatie koppelen:

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

jQuery Ajax referentiemanual