Sur demande, javascript

Question

Je me demande si vous pouvez m'aider à exécuter du javascript à la demande en utilisant AJAX ? Si vous pouvez m'aider avec un exemple simple, je l'apprécierais vraiment.

ma question est la suivante : comment obtenir un code javascript de mon serveur et l'exécuter ?

Merci pour votre aide

Answer 1

En fait, vous n'avez même pas besoin d'utiliser AJAX pour cela. Il suffit d'ajouter un nouveau <script> à votre corps.

Plain Old Javascript :

var newScript = document.createElement('script');
newScript.type = 'text/javascript';
newScript.src = '/scripts/example.js';

document.body.appendChild(newScript);

Voici le même code en utilisant jQuery :

// Traditional
$(document.body)
  .append('<script type="text/javascript" src="/scripts/example.js" />');

// Using getScript
$.getScript('/scripts/example.js');

Voici le même code en utilisant MooTools :

// Traditional
new Element('script', {type: 'text/javascript',
                       src: '/scripts/example.js'}
           ).inject(document.body);

// Using Assets (Recommended)
new Asset.javascript('/scripts/example.js');

Answer 2

Si vous voulez vraiment utiliser AJAX (comme indiqué dans la question), vous pouvez le faire aussi. Tout d'abord, vous téléchargez le javascript normalement en utilisant XMLHttpRequest et lorsque le téléchargement est terminé, vous l'évaluez() ou l'insérez dans une balise générée.

function xhr_load(url, callback) {
  xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) {
      if (xhr.status == 200) {
        callback(xhr.responseText);
      } 
    }
  }
  xhr.open("GET", url, true);
  xhr.send(null);
}

// (1) download using XHR and execute using eval()
xhr_load('mylib.js', function(response) {
  eval(response.responseText);
});

// (2) download using XHR and execute as an inline script
xhr_load('mylib.js', function(response) {
  var script = 
    document.createElement('script');
    document.getElementsByTagName('head')[0].appendChild(script);
    script.text = response.responseText;
});

De même, Steve Souders a fait un travail remarquable dans ce domaine et je vous recommande vivement de regarder son exposé sur le sujet. vidéo .

Answer 3

J'ai créé la fonction suivante pour pouvoir charger les fichiers JavaScript de manière programmatique :

Utilisation :

loadScript('http://site.com/js/libraryXX.js', function () {
  alert('libraryXX loaded!');
});

Mise en œuvre :

function loadScript(url, callback) {
  var head = document.getElementsByTagName("head")[0],
      script = document.createElement("script"),
      done = false;

  script.src = url;

  // Attach event handlers for all browsers
  script.onload = script.onreadystatechange = function(){
    if ( !done && (!this.readyState ||
      this.readyState == "loaded" || this.readyState == "complete") ) {
      done = true;
      callback(); // execute callback function

      // Prevent memory leaks in IE
      script.onload = script.onreadystatechange = null;
      head.removeChild( script );
    }
  };
  head.appendChild(script);
}

J'utilise un argument de fonction callback, qui sera exécuté lorsque le script sera chargé correctement.

Notez également que le script est supprimé de l'élément head après qu'il soit chargé et que je retire le load y readystatechange en leur attribuant la valeur null qui a pour but d'éviter les fuites de mémoire dans IE.

Vérifiez un exemple d'utilisation ici .

Answer 4

J'utilise ce code pour charger à la demande (en utilisant jQuery). Il est bloquant (mais j'en ai besoin), vous pouvez le rendre synchrone en utilisant async:true

(function(script) {
    var included_files = new Array();
    this.include = function(script) {
        var js_base = '/js/';
        if (_.indexOf(included_files, script) == -1){
            included_files.push(script);
            $.ajax({
                url: js_base+script.split('.').join('/')+'.js',
                type: 'get',
                dataType: 'script',
                async: false,
                global:false,
            });
        }
    };
})();

Il utilise jQuery y Underscore.js para .indexOf mais vous pouvez omettre cette dernière avec votre propre fonction indexOf.
Bonne chance.

Answer 5

Récupérer le code JavaScript du serveur enfermé dans des balises, l'ajouter au DOM et exécuter une fonction. Le nom de la fonction à exécuter peut provenir de la même requête ou être prédéfini.

A quoi ça sert ? Peut-être que si vous pouviez élaborer vos objectifs, une méthode plus simple pourrait être trouvée.