Prototype.jsを使った簡単ファイル読み込み
prototype.jsを使うことで簡単にDOMの操作等を行うことができます。
まずは、Prototype.jsの配布サイトからダウンロードしてきましょう。
今回使用するファイル
- root
- index.html（訂正。つい癖で.phpと書いてました）
- prototype.js
- test.txt
読み込みファイル（.txtでなくても可能。今回はtest.txt）
読み込みに成功しました。
HTML（javascriptファイルを読み込む指定をしておく）
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>prototype.jsで簡単ファイル読み込み</title>
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript">
function IncludeFiles(elements,FileNames) {
new Ajax.Request(FileNames , {
method: 'get', onComplete: displayData });
function displayData(responseHttpObj){
var InSource = responseHttpObj.responseText;
$(elements).innerHTML = InSource;
}
}
</script>
</head>
<body>
<a href="javascript:void(0)" onclick="IncludeFiles('RoadBox','test.txt')">test.txtの読み込み</a>
<div id="RoadBox">test.txtが読み込まれます。</div>
</body>
</html>
javascript
function IncludeFiles(elements,FileNames) {
new Ajax.Request(FileNames , {
method: 'get', onComplete: displayData });
function displayData(responseHttpObj){
var InSource = responseHttpObj.responseText;
$(elements).innerHTML = InSource;
}
}
イベントハンドラに「IncludeFiles('読み込んだデータを書き出すid','ファイルパス（HTMLファイルから）')」このように記述します。
たった数行記述するだけでファイルの読み込みが可能になります。.phpファイル等はサーバー側で処理された後に送られてくるので、サーバー側で処理したデータを表示することが可能です。
これだけでちょっと動的なページが出来上がりますね。
カテゴリ
使えるAjax関連記事
- noobSlideみたいなのをPrototype.jsとScriptaculousで作ってみた。
- Ajaxで使えるローディングアニメーションGIF ジェネレータメモ
- Prototype.jsのよく使う機能を簡単に使えるよう使いやすくまとめみた。
- png画像を使って実現する透過を使ったデザイン＆Ajax
- オンラインで付箋を貼れる「lino」:1日経過してすごいことになった。
- オンラインで付箋を貼れる「lino」
- Prototype.jsだけで実現するオートコンプリートライブラリ「AutoComp.js RC1」
- 新サイトの制作開始02
- 今さらだけどGoogle Map API日本語版マニュアルがでているそうです。
- 簡易Ajax RSS Readerβ2
- 簡易Ajax RSS Readerβ
- prototype.jsでテキストエリアに絵文字式入力
- Prototype.jsで要素の表示・非表示を実現
トラックバック(0)
このブログ記事を参照しているブログ一覧: Prototype.jsを使った簡単ファイル読み込み
このブログ記事に対するトラックバックURL: http://newflow.heteml.jp/mt4/mt-tb.cgi/174
コメントする