JavaScriptメモ - jsファイルの動的ロード

右のサイドバーに表示しているLATERY（最近の記事）を拡張するにあたって利用した手法をメモ。

以前までは、条件を指定することで記事タイトルをXML形式で返すスクリプトを設置し、それにXMLHttpRequest（以下AJAX）でアクセスして表示していたが、遅い。非常に遅い。

一番のボトルネックがJavaScript側でのAJAXを利用するための準備とXML解析のようだったので、それを打開すべくscript要素を利用してみることにした。

ちょいとHTMLをかじったことがある人ならわかると思うが

<script src="malor.js">
<!--
alert( "* いしのなか *" );
//-->
</script>

こんな感じでJavaScriptを実行するやつだ。まず重要なのが、srcでJavaScriptを記述したファイルを指定すると、そのコードを実行してくれるということ。この場合は、malor.jsの中に記述されているコードが実行されたあとにalertが表示される。

次に重要なのが、DOMを利用してonloadにメソッドを追加できるということ。#[onload]つまり、上記スクリプトがalertまで全て完了した時に用意しておいた関数を実行することができる。

具体的な流れにすると以下のようになる。

1. 条件を指定してスクリプトをscript要素で呼び出す
2. スクリプトはJavaScript形式で結果を返す
3. 返されたコードを実行する
4. サイドバーに取得した一覧を表示する関数を実行する

あとは表示したタイトルにマウスをポイント時に、同じ要領で1記事1ファイルとして保存しているものを取得すれば高速表示が可能になる、ということだ。

というわけで無事に最新記事の高速表示に成功したんだが、なんでもかんでもAJAXにすりゃいいというわけじゃないわな。これぐらいの小規模スクリプトならscript要素を利用するぐらいで十分だ。POSTメソッドを利用した通信とかXMLデータをどうしても使いたいという時にならAJAXにするべきなんだろう。

Info

投稿日

2005年8月4日

このエントリのURL

このエントリへのリンク（HTMLタグ）

ブックマークに追加する

Navigation

関連のあるエントリ

No related posts.

新しいエントリ（日付順）

QuickTimeとReal形式の動画を専用プレイヤー無しで再生する

古いエントリ（日付順）

サイドバーの最近の記事を拡張

Comment

投稿したコメントは公開されません。サイトオーナーのみが閲覧できます。
返信等を希望する場合は、コメント内に連絡先のメールアドレスかサイトのURLを入力してください。

2005
0804

⇧