ajaxを利用したスクリプトファイル読み込みの使用例を詳しく解説

ajax を使用してスクリプト ファイルのコードをバックグラウンドからフォアグラウンドにロードし、ロードされたコンテンツに対して eval() を通じてコードを実行します。 2 つ目は、script タグを動的に作成し、その src 属性を設定し、script タグをページの先頭に挿入して js をロードする方法です。これは、cf63513d015db02810a3e91eb1a17796d2db4f16871aac782f110be8a81f4497 ですが、このスクリプト タグは js を使用して動的に作成されます
たとえば、callbakc.js を動的にロードしたい場合は、そのようなスクリプト タグが必要です:

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

次のコードは、これを作成する方法です。 js を介したタグ (ヘッドに追加):

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

call.js がロードされたら、その中のメソッドを呼び出す必要があります。ただし、header.appendChild(script) の直後に js を呼び出すことはできません。ブラウザーはこの js を非同期的に読み込むため、いつ読み込みが完了するかわかりません。ただし、イベントをリッスンすることで、helper.js が読み込まれているかどうかを判断できます。 (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);

ieではonreadystatechangeが使われており、gecko、webkitブラウザ、operaはすべてonloadをサポートしているため、イベントリスニング関数を2つ設定します。実際、 this.readyState == 'complete' は、理論的には、状態の変化は次のようになります。

0 uninitialized 
1 loading 
2 loaded 
3 interactive 
4 complete

ただし、一部の状態はスキップされます。経験上、IE7 では、loaded と completed のどちらか一方のみが取得でき、両方は取得できません。その理由は、状態の変化がキャッシュからの読み取りに影響するか、または他の理由である可能性があります。判定条件を this.readyState == 'loaded' || this.readyState == 'complete' に変更するのが最善です
jQuery の実装を参照して、最終的に次のように実装しました:

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

もう 1 つの簡単な状況は次のとおりです。 put help() は helper.js の最後に記述されているため、helper.js がロードされた後に help() が自動的に呼び出せることが保証されます。 もちろん、最終的には、それを確認できる必要もあります。これはあなたのアプリケーションに適しています。

さらに、次の点にも注意してください:

1. script タグの src はドメインを越えてリソースにアクセスできるため、このメソッドは ajax をシミュレートし、ajax のクロスドメイン アクセスの問題を解決できます。
2. ajax から返された HTML コードにスクリプトが含まれている場合、innerHTML を dom に直接挿入しても、HTML 内のスクリプトは機能しません。 jQuery().html(html) の元のコードをざっと確認すると、jQuery は最初に受信パラメータを解析し、スクリプト コードを取り除き、jQuery html メソッドを使用して HTML を追加します。スクリプトが含まれている場合は dom が実行可能になります。例:

rree

以上がajaxを利用したスクリプトファイル読み込みの使用例を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。