AJAX

JavaScript から直接<script>～</script>タグを書いてしまう。

'<script type="text/javascript" charset="Shift_JIS" src="<strong>yourscript.js</strong>"></script>'

スクリプト間でまたがる変数や関数を使いたい場合は、以下のようにする。

筆者が AJAX に触れたのはもう1年くらい前であって、そのあとはしばし AJAX から離れていた。それから最近また AJAX する機会があって、この PerlTips を見ながらコードを書いているが、苦労した点というのは1年も経つとやはり忘れてしまうらしい。それでもこの PerlTips を眺めていたら解決できたこともあったのでそれを注意点としてまとめてみた。おそらく誰もが陥りやすいワナだろう。

AJAX で画面をライブアップデートして、地図の上の画像の位置が逐次変化するようなユースケースを考える。画像（image）を動的に生成して処理するには、

として、

の icons コレクションの中に追加すればよい。そして icons オブジェクトは HTML 中に宣言してある

しかしこれをずっと繰り返すと古い画像が地図の上に残ったままになる。そこで update メソッドの最初の方で

という処理を入れて、icons ノードに含まれる個々の icon オブジェクト（image オブジェクト）を削除してあげればよい。

先のエントリーAJAX で、動的にテーブルを作る方法（初級）では、感じをつかむために、ベタにテーブルを作成していたため、重複するロジック／コードが多かった。ここではそれをフレームワークっぽくした。こういう軽量なコードを理解した上で、ひな型として自分で持っておくと見通しがよくてよいと思う。

この JavaScript ではできるだけ Java のアプレットにならった構造やメソッド名に近づけた。つまり、

AJAX でサーバから XML データを読み込んでそこからテーブルを作る。今回は列（カラム）の個数とその名前は決め打ちとする。まずは HTML を次のようにしておいて、

2007/01/10 追記：

IE では、DIVタグに付けた ID を JavaScript から利用する場合は、JavaScript の前に DIV を宣言しなければならないらしい。document.getElementByID(...) is null or not an object というエラーが出る。Firefox だとその順番は関係がない。
また、document.getElementByID(DIV_DATA).insertBefore(table, null); は、IE だと table オブジェクトに tbody オブジェクトを追加してからでないとダメらしい。

まずは以下のような XML データを考える。

<book>
    <title>初めての AJAX</title>
    <author>AJAX 編集部</author>
    <publisher>AJAX 社</publisher>
</book>
<book>
    <title>初めての Perl</title>
    <author>Perl 編集部</author>
    <publisher>Perl 出版</publisher>
</book>
<book>
    <title>初めての PHP</title>
    <author>PHP 編集部</author>
    <publisher>PHP 工房</publisher>
</book>

最終的に値を取り出したいわけだが、childNodes.item(0) ＝ childNodes[0] ＝ firstChild は同じ意味であることを知っておくとよいと思う。

まず、モジュール化（ライブラリ化）したい（といっても別ファイルに保存するだけ） JavaScript を以下のように記述する。

そして上の内容を例えば your_javascript.js といったファイル名で保存して、<script src="..." type="text/javascript"></script> から呼び出す。

AJAX が使われているサービスを挙げてみよう。

Updated: 2006/10/31
Updated: 2006/08/22
Updated: 2006/08/17
Original: 2006/02/25 00:00:01

これは、Perl で、Goolge Maps からルートを検索する方法 に対するブラウザ側の処理の例である。以下のコードを参考にして欲しい。repaint メソッドの中でパスを描画している。前提としては以下の通り。

1. このスクリプトは呼び出し元の HTML から your_ajax_script.js としてリンクされている。
2. このスクリプトが呼ばれる HTML には、
   があるとする。
3. init メソッドは、HTML の onLoad から呼ばれるものとする。

your_ajax_script.js の例

var list_html = '';

if(xml) {

    // IE の場合はより厳密にチェックが必要、Firefox は xml だけでよい
    if(xml.documentElement) {

        var path = xml.documentElement.getElementsByTagName('path');

        var points = [];
        for (var i = 0; i < path.length; i++) {
            points.push(new GPoint( path[i].getAttribute('lng'),
                                    path[i].getAttribute('lat')));
        } // End of for

        var route = xml.documentElement.getElementsByTagName('route');
        list_html += route.length > 0 ? '<ol>' : '';
        for (var i = 0; i < route.length; i++) {
            list_html += '<li>' + route[i].getAttribute('description') + '</li>';
        } // End of for
        list_html += route.length > 0 ? '</ol>' : '';
    }
}

// このスクリプトが呼ばれる HTML には、<div id="list"></div> があるとする。
document.getElementById('list').innerHTML =  list_html;
map.addOverlay(new GPolyline(points));

currentPoint = new GPoint(lng, lat);

post(    'do=path'
    +    '&toX=' + lng
    +    '&toY=' + lat);

var xmlHttp = GXmlHttp.create();

xmlHttp.onreadystatechange = function() {

    if (xmlHttp.readyState == 4) {
        var xml = xmlHttp.responseXML;
        repaint(xml);
    }
}

xmlHttp.open('POST', BASE_URL + CGI_FILE, true);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.send(data);