最近生活が gdgd な issm です．

既出そうな小ネタですが．．．Ajax を使ってソースを読み込む処理を，ひとクラスにまとめてみました．要 prototype.js です．

使い方

AjaxSourceLoader.js を読み込んで次のように記述することでソースコードを表示します．

new AjaxSourceLoader( 'ソースコードのURL', '表示対象要素のID' );

後述の 「表示例」 の部分では

<div id="source-342-1"></div>

という div 要素を用意した後に

new AjaxSourceLoader( '/js/lib/AjaxSourceLoader.js', 'source-342-1' );

を実行しています．

ソースコードの格納先

pre 要素を生成し，この中に読み込んだソースコードを放り込んでいます．で，表示対象要素.appendChild( このpre要素 ) しています．

また，この pre 要素には，ajaxsourceloader というクラス名をつけてますので，pre.ajaxsourceloader { ... } などとしてスタイルを指定することもできます．

実行後の構造をタグで書くとこんな感じです．（改行は便宜上．）

<div id="hogehoge">
<pre class="ajaxsourceloader">
...
ソースコード
...
</pre>
</div>

表示例

以下，本 js を使って，本 js のソースコードを表示してみます．大したことはしていません．