Explication détaillée des exemples d'utilisation pour le chargement de fichiers de script à l'aide d'ajax

Utilisez ajax pour charger le code du fichier de script de l'arrière-plan au premier plan, puis exécutez le code via eval() sur le contenu chargé. La seconde consiste à créer dynamiquement une balise de script, à définir son attribut src et à charger js en insérant la balise de script dans l'en-tête de la page, ce qui équivaut à écrire un cf63513d015db02810a3e91eb1a1779664fc9c2637e24bda97d9a46d32d4a546, mais cette balise de script est créée dynamiquement à l'aide de js
Par exemple, si nous voulons charger dynamiquement un callbakc.js, nous avons besoin d'une telle balise de script :

<script type="text/javascript" src="call.js"></script>

Le code suivant Voici comment créer cette balise via js (et l'ajouter à la tête) :

var head= document.getElementsByTagName('head')[0]; 
var script= document.createElement('script'); 
script.type= 'text/javascript'; 
script.src= 'call.js'; 
head.appendChild(script);

Lorsque call.js est chargé, nous devons appeler la méthode qu'il contient. Cependant, nous ne pouvons pas appeler le js immédiatement après header.appendChild(script). Étant donné que le navigateur charge ce js de manière asynchrone, nous ne savons pas quand il a fini de se charger. Cependant, nous pouvons déterminer si helper.js est chargé en écoutant les événements. (Supposons qu'il existe une méthode de rappel dans call.js)

var head= document.getElementsByTagName('head')[0]; 
var script= document.createElement('script'); 
script.type= 'text/javascript'; 
script.onreadystatechange= function () { 
if (this.readyState == 'complete') 
callback(); 
} 
script.onload= function(){ 
callback(); 
} 
script.src= 'helper.js'; 
head.appendChild(script);

Configurez 2 fonctions d'écoute d'événements, car onreadystatechange est utilisé dans IE, et gecko, les navigateurs webkit et opera prennent tous en charge le chargement. En fait, this.readyState == 'complete' ne fonctionne pas très bien. En théorie, les changements d'état sont les suivants :

0 uninitialized 
1 loading 
2 loaded 
3 interactive 
4 complete

Mais certains états seront ignorés. D'après l'expérience, dans IE7, un seul des fichiers chargé et terminé peut être obtenu, mais pas les deux. La raison peut être que le changement d'état affecte si la lecture à partir du cache est affectée, ou cela peut être pour d'autres raisons. Il est préférable de changer la condition de jugement en this.readyState == 'loaded' || this.readyState == 'complete'
En ce qui concerne l'implémentation de jQuery, notre implémentation finale est :

var head= document.getElementsByTagName('head')[0]; 
var script= document.createElement('script'); 
script.type= 'text/javascript'; 
script.onload = script.onreadystatechange = function() { 
if (!this.readyState || this.readyState === "loaded" || this.readyState === "complete" ) { 
help(); 
// Handle memory leak in IE 
script.onload = script.onreadystatechange = null; 
} }; 
script.src= 'helper.js'; 
head.appendChild(script);

Il existe également une situation simple dans laquelle vous pouvez écrire l'appel help() à la fin de helper.js, vous pouvez alors vous assurer que help() peut être appelé automatiquement après le chargement de helper.js. doit également être capable de le faire à la fin. Est-ce adapté à votre application ?

De plus, veuillez noter :

1 Étant donné que le src de la balise de script peut accéder aux ressources sur plusieurs domaines, cette méthode peut simuler ajax et résoudre le problème de l'accès inter-domaines ajax.
2. Si le code html renvoyé par ajax contient un script, l'insertion directe de innerHTML dans le dom ne fera pas fonctionner le script dans le html. Après un rapide examen du code original de jQuery().html(html), jQuery analyse également d'abord les paramètres entrants, supprime le code du script et crée dynamiquement des balises de script. La méthode html jQuery est utilisée pour ajouter le code HTML dans le fichier. dom s'il contient un script est exécutable. Tels que :

jQuery("#content").html("<script>alert(&#39;aa&#39;);<\/script>");

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!