fukaz55 :: はジャックス（はじめてのAjax）

2006/03/27

晴のち曇

[Diary] はジャックス（はじめてのAjax）

　職場で稼働中のWebシステムの調査をしている時に、とある画面がIISのリモートスクリプティングを利用して『コンボボックスＡで指定された条件を元にコンボボックスＢの選択肢を動的に変更させる』という処理を行っているのを発見したのですが、これって今なら Ajax で実装した方が簡単じゃね？　と思い至ったため、せっかくなのでこの機能を Ajax で置き換える実験をしてみることにしました。はじめての Ajax。

　Ajax する場合、今はprototype.jsという大変にありがたいフレームワークが存在しているので、それを使ってみました。
　サーバ側がコンボボックスの内容（<option>～</option>で括った文字列のリスト）をいきなり出力して、クライアントはそれを Ajax.Updater を使って貼り付ければ良いじゃん？　と思って作ったのがこれ。職場サーバはIISが動いているので、サーバ側の処理はASPで書いています。あと実際のデータの中身には半角カナとかが使われているので、データのやりとりは面倒を避ける意味でShift-JISで行うことに。

サーバ

<%
' 引数が設定されていた場合、引数の値÷10値の数の適当なリストを返す
  arg = Request.QueryString("arg")

  Response.Charset = "Shift-JIS"
  Response.ContentType = "text/plain"

  If arg <> "" Then
    For i = 1 To arg / 10
      val = arg + i
      Response.Write "<option value=""" & val & """>" & val & "個</option>" & vbNewLine
    Next
  End If
%>

クライアント

<HTML>
<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<TITLE>Test Page</TITLE>
<script src="prototype.js" type="text/javascript"></script>
<script>
  function ReCreateList()
  {
    var url = 'server.asp';
    var pars = 'arg=' + $F('arg');
    var myAjax = new Ajax.Updater( 'list', url, { method: 'get', parameters: pars });
  }
</script>
</HEAD>

<BODY>
<FORM name="thisform">
<SELECT id="arg" name="arg" onChange="ReCreateList()">
<OPTION value="" selected></OPTION>
<OPTION value="10">10</OPTION>
<OPTION value="20">20</OPTION>
<OPTION value="30">30</OPTION>
<OPTION value="40">40</OPTION>
<OPTION value="50">50</OPTION>
</SELECT>

<SELECT id="list" name="list">
</SELECT>
</FORM>
</BODY>
</HTML>

　実際に動かしてみたところ、クライアントが Firefox では問題なく動作するのですが、Internet Explorer 6 だとコンボボックスの中身が埋まってくれません。SELECTタグに対するinnerHTMLの動作の違いの問題か何か？（←よく判ってない）
　なので、サーバ側では単にデータのリストを文字列として返し、クライアントでそれを解釈して DHTML でコンボボックスの中身を埋める処理を書く方法に変更してみました。

サーバ

<%
' 引数が設定されていた場合、引数の値÷10値の数の適当なリストを返す
  arg = Request.QueryString("arg")

  Response.Charset = "Shift-JIS"
  Response.ContentType = "text/plain"

  If arg <> "" Then
    For i = 1 To arg / 10
      val = arg + i
      If i > 1 Then Response.Write ","
      Response.Write val & "個"
    Next
  End If
%>

クライアント

（前略）
<script src="prototype.js" type="text/javascript"></script>
<script>
  function ReCreateList() {
    var url = 'server2.asp';
    var pars = 'arg=' + $F('arg');
    var myAjax = new Ajax.Request(url, { method: 'get', parameters: pars, onComplete: showResponse });
  }
  function showResponse(req) {
    var res = req.responseText.split(",");
    for (i=0; i<res.length; ++i) {
      document.thisform.list[i] = new Option(res[i], res[i]);
    }
    $('list').length = res.length;
    $('list').selectIndex = 0;
  }
</script>
（後略）

　これだとIEでも動きました。DOM って今まで馴染みがなかったので大変。
　「Ajax を使った動的なインターフェースの作成」なんてことがよく言われるようになりましたが、どっちかと言うと通信そのものよりも、通信で取得したデータを処理してユーザに見せる部分をDHTMLで作る方が遙かに大変（かつ重要）であることが何となく判りました。

　ただまあ、確かに DHTML は面白いですね。初めて CSS に触った時のような、表現の幅を広げてくれる大きな可能性を感じます。

Posted at 00:00 | WriteBacks (2) | permalink

WriteBacks

まさに

> Internet Explorer 6 だとコンボボックスの中身が埋まってくれません。

これにハマってました．何ででしょうねぇ．
こちらの記事を参考に new Option() で書き直してみました．

サーバからの応答には，独自フォーマットではなく JSON を使うのが良いみたいですね．
http://d.hatena.ne.jp/brazil/20050915/1126717649

Posted by 小杉 at 2006/04/10 (Mon) 16:41:16

[Ajax] IE6のバグ？

またまた、Ajax ハマリました。 Ajax.update() を使って動的に select タグの内容、optionタグのリストを書き換えていたのですが、FireFox では動きますが、IE6では動きませんでした。 googleさんに聞いてみたら、ありました！ → はジャックス（はじめてのAjax）。やっぱ

Posted by yuum3のお仕事日記 at 2006/10/04 (Wed) 15:54:28

TrackBack ping me at

http://fukaz55.main.jp/diary/hjax.trackback

- 本を持って席を立ったら、トイレに行ったと思って下さい（挨拶）

2006/03/27

晴のち曇

[Diary] はジャックス（はじめてのAjax）

サーバ

クライアント

サーバ

クライアント

まさに

[Ajax] IE6のバグ？