prototype.js

今日JavaScriptでハマりました。自分はPerlが一番書けるので、他の言語を書くときにもPerlの文法を無意識のうちに使っていたりします。今日はJavaScriptをせっせと書いていたところ下記のようなミスをしました。

    new Ajax.Request('/modify?id=' + this.id, {
      parameters: Form.serialize(form),
      onLoading: function(request){
        div.innerHTML = 'now changing...';
      },
      onComplete: function(request){
        var res  = request.responseXML;
        var id = res.getElementsByTagName('id')[0].firstChild.data;
        var content = res.getElementsByTagName('content')[0].firstChild.data;
        div.innerHTML = content;
      },
    } );

どこがミスだかわかりますか？

それは、下から2行目の }, の「,」です。
perlだと、配列やハッシュの要素の後ろにカンマを付けても問題ないのですが、JavaScriptだと、そこでコケるようです。にぽたん研究所な人に聞いて初めて気付きました…。Perl使いにはありがちのミスでした(笑)

ちなみに上記コードで使用されているAjax.Requestという関数は、prototype.jsに定義されているAjaxクラスを使ってます。このprototype.jsは、Ruby on Railsのプロジェクトや、Catalystでもインプリメントされているjsのライブラリで、Ajaxの一連の動作を1つの関数にまとめてくれているため、その関数を呼び出すだけでサーバと簡単に通信できるようになっています。

Ajax.Requestの他にもAjax.Updaterという関数もあるのですが、こちらはリクエスト投げたあとに、呼び出し元のフォームとかを自動でごにょごにょしたいときなどに使うのですが、そんな余計なことは今のところしないので、もっぱらAjax.Requestを使ってます。

Ajax.Reqeustの関数の使い方は

Ajax.Request(URL, OPTION);

です。OPTIONの中はPerlで言うところのハッシュのような感じで、下記のオプションを設定できます。(どのように指定するかは先に書いたコードを参照してください。)

parameters
asynchronous
method
onUninitialized onLoading onLoaded onInteractive onComplete

これらが指定できるようです。あと、クロスブラウザ対応については、あんま細かくは見ていない模様。単純にブラウザ毎のxmlhttprequestオブジェクトを生成させてみて、だめだったら次、だめだったら次みたいな感じになってます。

  getTransport: function() {
    return Try.these(
      function() {return new ActiveXObject('Msxml2.XMLHTTP')},
      function() {return new ActiveXObject('Microsoft.XMLHTTP')},
      function() {return new XMLHttpRequest()}
    ) || false;
  },

prototype.jsは、Ajaxの他にもいくつかの機能を提供していたりします。そちらも使い方はソースを見たらなんとなくわかると思います。http://dev.conio.net/repos/prototype/test/　こちらにサンプルがあります。

カテゴリ:

トラックバック(1)

コメント(2)

コメントする

検索

広告

カテゴリ

月別アーカイブ