びびすけ さんのページ

7件の日記があります。

あさ (2007/02/09 09:05) 基本データ 0 comment

体重：62.35kg

Ajax で遊ぶ (2007/02/09 09:23) 0 comment

最近は Ajax で遊んでいる
Ajax 用のフレームワークはいろいろ存在するが、まずはデファクトスタンダード的な prototype.js を使ってみることにする
　参照：prototype.js の開発者向けメモ

使い方：
ヘッダ部分に、以下のように記述する
    <script src="./js/prototype.js" type="text/JavaScript"></script>
    <script type="text/javascript"><!--
    ....
    // --></script>
最初の行は prototype.js のインクルード指定。この例では js サブディレクトリを切っているが、同一ディレクトリでもかまわない
次の行以降に JavaScript プログラムを記述する

HTML と JavaScript を分離したい場合は、以下のように記述する
    <script src="./js/prototype.js" type="text/JavaScript"></script>
    <script src="./js/hogehoge.js" type="text/JavaScript"></script>
ファイルを別にすると例示するときにめんどうなので、ここではHTMLファイルに直接記述することにする。
ある程度規模が大きくなったときや、画面デザインとスクリプト記述を分業する場合などはファイルを分ける方がいいだろう

画面書き換え（Ajax） (2007/02/09 10:00) 0 comment

prototype.js では $('id名') で、HTMLドキュメント要素にアクセスすることができる。
$() は頻発する DOM の document.getElementById() 関数へのショートカットである。
要素の innerHTML、value、style プロパティを使って参照・更新することができる

    Event.observe(window, 'load', 初期化);
    function 初期化()
    {
        $('メッセージ領域').innerHTML = "hello, Ajax.";
    }
    ....
    <div id="メッセージ領域"></div>

上の例は、ページロード時、"id=メッセージ領域" の <div></div>で囲まれた部分に "hello, Ajax." という文字列を挿入する。（参照：ページ）
最初から <div id="メッセージ領域">hello, Ajax.</div> と記述したのと何も変わらないではないかと思われるかもしれないが、
このテクニックを使えば、ボタンクリックなどのイベントが発生したときに画面を動的に変更することができるのだ。

イベントによる画面書き換え(Ajax） (2007/02/09 10:11) 0 comment

さて、次はボタンが押されたら画面を更新する方法：
prototype.js では、Event オブジェクトの observe(element, name, observer, useCapture) メソッドにより、
イベントハンドラ（イベントが発生した時にコールされる関数のこと）を登録するとこができる。

element はイベントを発生させるオブジェクトそのものまたはIDを指定
name はイベント名。'click', 'load' など、'on' を除いた文字列で指定
obsever はイベントハンドラ関数
最後の useCapture 引数は省略可能で、true ならcapture 段階でイベントを処理する
（意味がいまいちわからないので、使うときは省略しておくことにする ^^;;;）

    Event.observe(window, 'load', 初期化);
    function 初期化()
    {
        Event.observe('mess2', 'click', メッセージ２を表示);
    }
    function メッセージ２を表示()
    {
        $('メッセージ領域').innerHTML = "message-2";
    }
    ....
    <input type=button id="mess2" value="mess-2"></input>
    <div id="メッセージ領域"></div>

上の例は【mess-2】というボタンを押すと、その下のメッセージ領域に「message-2」と表示するものだ。＞参照
onload でイベントハンドラ（メッセージ２を表示）を登録し、id="mess2" のボタンが押されたら、ハンドラが呼ばれるようにする
ボタンが押されると、"メッセージ２を表示" 関数が呼ばれ、メッセージ領域のHTMLを書き換える、とう寸法だ
ちなみに関数名は上記のように日本語にすることができる
まだ慣れないので違和感がなくもないが、なれるとわかりやすいような気もする

ちなみに、素の JavaScript では以下のように、ボタンに直接イベントハンドラを指定することもできる
<input type=button id="mess1" value="mess-1" onClick="mess1Func()"></input>

イベントを発生させるHTML要素の方でイベントハンドラを指定する方が単純でわかりやすいかもしれない。
しかし、HTML要素とハンドラの関係が固定的なるし、ドキュメントの構成要素（HTML）と動作（JavaScript）を分離していないという短所がある。

サーバからデータを取得して表示… (2007/02/09 13:01) 0 comment

次にサーバからデータを取得し、それを表示する方法

prototype.js にはサーバへHTTPリクエストを出し、返答が帰ってくると指定ハンドラを呼び出す機能がある。
それが Ajax.Request クラスだ
Ajax.Request はクラスなので、new でインスタンス化して使用する。
引数でURL、HTTPメソッド、パラメータ、ハンドラを指定する。
    var myAjax = new Ajax.Request(
                url,
                {
                    method: 'get',
                    parameters: pars,
                    onComplete: showResponse,
                    onFailure: エラー処理
                });
こんな感じだ。
※ 引数がURLとそれ以外に分かれているのは、URL以外は場合によっては省略できるからだ（と思う）
サーバから応答が帰ってくると function showResponse(httpObj) がコールされる
応答はハンドラへ渡される引数 httpObj に入っており、httpObj.responseText で参照することができる

たとえば、以下のように書いておけば応答テキストをそのまま画面に表示することができる
    function showResponse(httpObj)
    {
        $('res').innerHTML = httpObj.responseText;
    }

サーバからのデータ書式(Ajax) (2007/02/09 13:25) 0 comment

サーバから返すデータが単純であれば、プレーンテキストやHTMLそのものでも構わないが、
ある程度複雑な構造を持っている場合は、それらでは取り扱いが難しい
Ajax とは Asyncronous JavaScript + XML の略なので、XML 形式のデータを用いるのが本筋かもしれないが、
JavaScript で操作することを考えると、JSON (JavaScript Object Notation) と呼ばれる、
JavaScript のオブジェクト記述形式（直訳ですな）を用いるのが便利だ

JSON：
オブジェクトは { } で囲み、プロパティ名: 値 をカンマ区切りで列挙する
配列は [ ] で囲み、要素 をカンマ区切り列挙する

たとえば、名前と年齢の組のデータは以下のように記述できる
[ {name:"shin'ji", age:14}, {name:"Rei", age:14}, {name:"Misato", age:29} ]

サーバがJSONのデータを返す場合、eval() 関数を使ってJavaScriptオブジェクトに変換する。
    function showResponse(httpObj)
    {
        var resObj = eval(httpObj.responseText);
        ....
    }
あとは通常のJavaScriptオブジェクトとして参照するなり変更するなり好きにすることができる
先の例であれば、resObj.length で配列要素数を取得、resObj[i] で i 番目の要素、
resObj[i].name、resObj[i].age で i番目の要素の名前、年齢を参照できる

ちなみにXML形式の場合は、
    var resXML = httpObj.responseXML;
で XMLオブジェクトを取り出し、getElementsByTagName() などの DOMメソッドを使ってデータを参照・更新する
これはこれで便利なのかもしれないが、いろいろなDOMのメソッドを覚えなくてはいけない
JSONであれば、JavaScript だけ覚えていればいいので記憶容量の低下したおじさんには楽チンである

状態の保持（Ajax） (2007/02/09 21:06) 0 comment

何らかの値をページとして保持したい場合がある
その方法として以下の３つが考えられる
(1) タグで囲まれた部分に値を記述
(2) タグの value で値を保持
(3) JavaScript 変数で値を保持

(1) は以下のように値を記述しておき、$('ansArea').innerHTML で参照する
<div id="ansArea">0</div>
(2) は以下のように値を記述しておき、$('val').valueL で参照する
<div id="val" value="0" />
(3) は JavaScript のグローバル変数を宣言し、それで値を保持する
var g_val = 0;

保持している値を常に画面に表示するのであれば、(1) が自然な方法である
画面に表示したくないのであれば、(2), (3) がよい。(2) はちょっとトリッキーな感じがするし、
複雑なデータ処理の場合も素直に記述できるので、個人的には (3) がお勧めだ

それぞれの使用例は (1),  (2),  (3) を参照

7件の日記があります。