Méthode getScript() de jQuery ajax

Manuel de référence jQuery Ajax

Exemple

Obtenir et exécuter un fichier JavaScript via une requête AJAX :

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

Essayez-le vous-même

Définition et utilisation

La méthode getScript() charge et exécute un fichier JavaScript via une requête HTTP GET.

Syntaxe

jQuery.getScript(url,success(response,status});
Paramètres Description
url Chaîne d'URL à demander.
success(response,status)

Optionnel. Définit la fonction de rappel à exécuter après la réussite de la requête.

Paramètres supplémentaires :

  • response - Contient les données de résultat de la requête
  • status - Contient l'état de la requête ("success", "notmodified", "error", "timeout" ou "parsererror")

Explication détaillée

Cette fonction est une version abrégée de la fonction Ajax, équivalente à :

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

La fonction de rappel ici reçoit le fichier JavaScript retourné. Cela n'est généralement pas très utile, car le script est déjà exécuté à ce moment-là.

Les scripts chargés s'exécutent dans l'environnement global, donc ils peuvent utiliser d'autres variables et utiliser les fonctions jQuery.

Par exemple, charger un fichier test.js contenant le code suivant :

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

En référençant ce nom de fichier, vous pouvez charger et exécuter ce script :

$.getScript("ajax/test.js", function() {
  alert("Le chargement a été effectué.");
});

Remarque :Avant la version 1.2 de jQuery, getScript ne pouvait appeler que des fichiers JS du même domaine. Dans la version 1.2, vous pouvez appeler des fichiers JavaScript de domaines différents. Note : Safari 2 ou versions antérieures ne peuvent pas exécuter des scripts en mode global en synchroné. Si vous ajoutez un script via getScript, ajoutez une fonction de délai.

Plus d'exemples

Exemple 1

Charger et exécuter test.js :

$.getScript("test.js");

Exemple 2

Charger et exécuter test.js, puis afficher un message :

$.getScript("test.js", function() {
  alert("Script chargé et exécuté.");
});

Exemple 3

Charger Extension officielle d'animation de couleur jQuery Animation de changement de couleur après succès :

Code HTML :

<button id="go">Exécuter</button>
<div class="block"></div>

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

Manuel de référence jQuery Ajax