Javascript AJAX d'inclure le fichier avec eval

Supposons que j'ai

1)
un document HTML.

2)
La version HTML de ce document est chargé fichier Javascript "code.js" comme ceci: 

<script src="code.js">

3)
L'utilisateur clique sur le bouton qui exécute "fetchdata" fonction "code.js",

4)
"fetchdata" fonction ressemble à ceci:

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState==4) {
        myjsdata = xmlhttp.responseText;
    }
}
xmlhttp.open("GET", 'http://www.example.com/data.js', false);
xmlhttp.send(null);

...

Maintenant comment dois-je faire ce qui suit avec succès:

Je veux insérer/eval mon Javascript dans un sens, de sorte que toutes les fonctions dans l' "code.js" y compris "fetchdata" et les fonctions définies ci-dessus/ci-dessous peuvent accéder aux données (structures, des déclarations, des pré-calculé les valeurs de données, etc.) "data.js".

(Si c'était possible, il serait l'idée depuis que j'ai pu attendre le chargement de la réelle JS fichier de données jusqu'à ce que le consentement explicite de l'utilisateur en fait la demande.)

Ne vous utilisez jQuery, ou une quelconque raison de ne pas trop? Il peut considérablement aider avec des choses comme les appels ajax, de sorte que vous n'avez pas à vérifier readystate et l'état, qui vous ont été vérifier pour 200 sur la réussite.

OriginalL'auteur Tom | 2012-01-26

  1. 10

    jQuery a toujours quelque chose pour tout:

    http://api.jquery.com/jQuery.getScript/

    Charge un fichier javascript à partir de l'url et l'exécute dans le contexte mondial.

    edit: Oups, ne pas voir que vous n'étiez pas à l'aide de jQuery. Tout le monde est toujours à l'aide de jQuery...

    Viens de faire:

    var scrpt = document.createElement('script');
scrpt.src='http://www.example.com/data.js';
document.head.appendChild(scrpt);
    Merci! Donc, au lieu d'utiliser Ajax/, je peux utiliser votre code dans la section "code.js" ... Et des fonctions à l'intérieur "code.js" l'accès immédiat à toutes les variables, etc. définie à l'intérieur "data.js"? Je vais essayer maintenant 🙂
    Oui, l'ajout d'un élément de script à la tête de l'exécute.
    "Étape 1: Si vous utilisez jQuery, appelez le getScript fonction. Étape 2: Si vous n'êtes pas à l'aide de jQuery, démarrez à l'aide de jQuery et retour à l'Étape 1."
    Cela semble fonctionner dans IE9, mais il ne semble pas fonctionner dans FireFox. Après l'application de votre "appendChild" code", fetchdata" immédiatement tente d'appeler une fonction (qui initialise les données) dans le juste ajouté "data.js" fichier... Mais FireFox dit que cet appel est défini.
    si j'avais à choisir entre l'utilisation d'une poussette multi-liner script (qui peut ne pas être évolutive et robuste) et à l'aide d'un éprouvé de la bibliothèque avec un one-liner appel, j'irais pour la bibliothèque de l'approche qu'ils ont fait de sorte que vous n'avez pas à réinventer la roue.

    OriginalL'auteur mowwwalker

  2. 5

    je pense que vous devriez jeter un coup d'oeil à ce site

    ce site parle de la dynamique de chargement et de rappels (avec des exemples) - où vous pouvez appeler une fonction dans le script chargé après le chargement. pas de jQUery, juste pur JS.

    C'est une bonne référence.
    En utilisant les deux méthodes indiquées dans la section "Détection de la Charge d'Achèvement" (+ faire en sorte que je ne risque pas d'avoir à intervenir avec les deux) effectivement résolu le reste de mes problèmes dans les dernières versions de IE,FF,Opera,Chrome ... Merci 🙂
    Cela a marché parfaitement. J'ai essayé de charger jQuery... donc je n'ai pas de jQuery pour commencer à charger jQuery.
    Fonctionne parfaitement. je laisse ici mon application.

    OriginalL'auteur Joseph

  3. 2

    Cela dépend de beaucoup de facteurs, mais dans la plupart des cas, vous aurez envie de charger l'ensemble de votre code/html/css en une seule séance. Il prend moins de demandes, et ainsi se vanter d'avoir un perçue plus élevée avantage de performance. À moins que votre fichier de code est au-dessus de plusieurs méga-octets de gros, à charger lorsqu'un utilisateur demande il n'est pas nécessaire.

    En plus de tout cela, la modification innerHTML et l'exécution de scripts via eval peut être très lourd et risqué (respectivement). De nombreuses références en ligne sera de retour ce point. Ne présumez pas que simplement parce que d'une bibliothèque est de faire quelque chose comme cela, il est sûr de jouer.

    Cela dit, il est tout à fait possible de la charge externe, js fichiers et de les exécuter. Une façon est de coller tout le code dans une nouvelle balise de script. Vous pouvez aussi tout simplement essayer de l'exécution du code dans un eval appel de fonction (même si il n'est pas recommandé).

    address = "testscript.js";

var req = (window.XMLHttpRequest)?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
if(req == null) {
    console.log("Error: XMLHttpRequest failed to initiate.");
}
req.onload = function() {
    try {
        eval(req.responseText);
    } catch(e) {
        console.log("There was an error in the script file.");
    }
}
try {

    req.open("GET", address, true);
    req.send(null);

} catch(e) {
    console.log("Error retrieving data httpReq. Some browsers only accept cross-domain request with HTTP.");
}
    Le truc, c'est mon data.js est entre 200-500 ko. Je préfère charge uniquement en cas de besoin. Cependant, quand la "eval" mettre le code dans le champ d'application / ordre de déclaration? Dois-je tout simplement besoin d'appeler "eval" et toutes les fonctions/vairables etc. sera immédiatement disponible?
    Et en théorie, il n'y a pas de limite supérieure sur la taille de fichier de données... Pourrait facilement être bien lager si les gens étaient d'accord avec ça... Cependant, pour l'instant je fonctionne avec un "réduire la taille et le temps de" mentalité 🙂
    eval s'exécute dans le contexte global, je crois. C'est vraiment simple à exécuter un étranger script, c'est pourquoi il est si dangereux.
    Je voulais juste dire merci pour cette suggestion! Je upvoted toutes les réponses, car ils ont tous été très utile 🙂
    Je suis nouveau sur le JS et j'ai été la recherche de ce pour un couple de jours!!! Vous êtes un épargnant de VIE!

    OriginalL'auteur Jeffrey Sweeney