今回作ったアプリケーション(Eclipse WTP Project) > fileExamWebService.zip

インターネットからアクセスできます > http://hondou.homedns.org/ExamWebService/
(Mac版Firefox 3.0 / Vista版IE7.0 で動作確認しています)

はじめに

ライブラリの準備

ライセンスの確認

ダウンロード時の、License Agreement を逐語訳してみた。
商用にそのまま使う場合には、専門家の判断を仰いだ方が無難かな。
個人が非商用で使う分には問題ないでしょう。

 

Javascrptオブジェクトの階層構造が全然わかんない・・・

Firefox の Firebug Plugin で、break point を設定して Javascript を実行すると分かる

httpfox.png

HTTPを監視したい

Firefox の Http Fox Plugin で監視可能

firebug.png
 
firebug2.png

Webサービスクライアントの作成

<html>
<head>
<script type="text/javascript" src="scripts/prototype.js"></script>
<script type="text/javascript" src="scripts/ws.js"></script>
<script type="text/javascript">
  function suggestColor(inpRed, inpGreen, inpBlue, container) {
    var call = new WS.Call('/ExamWebService/services/ColorSuggestionWebService');
    var nsuri = 'http://exam.snail.com';
    var qn_op = new WS.QName('suggestColor', nsuri);
    call.invoke_rpc(qn_op, [ {
      name :'red',
      value :inpRed
    }, {
      name :'green',
      value :inpGreen
    }, {
      name :'blue',
      value :inpBlue
    } ], null, function(call, envelope) {
      var colors = envelope.get_body().get_all_children()[0].get_all_children();

      var ret = "<table border=\"1\"><tr><th>#</th><th>Color</th><th>R</th><th>G</th><th>B</th></tr>";
      for ( var colorNo = 0; colorNo < colors.length; colorNo++) {
        var color = colors[colorNo].get_all_children();

        var red = undefined;
        var green = undefined;
        var blue = undefined;
        var colorName = undefined;

        for ( var elemNo = 0; elemNo < color.length; elemNo++) {
          var name = color[elemNo].element.tagName;
          var value = color[elemNo].get_value();

          if (name == "red") {
            red = new Number(value);
          } else if (name == "green") {
            green = new Number(value);
          } else if (name == "blue") {
            blue = new Number(value);
          } else if (name == "name") {
            colorName = value;
          }
        }

        var bgcolor = "#" + red.toColorPart() + green.toColorPart() + blue.toColorPart();
        ret = ret
          + "<tr><td bgcolor=\"" + bgcolor + "\">" 
          + colorNo + "</td><td>"
          + "<a href=\"#\" onClick=\"suggestColor('"+red+"','"+green+"','"+blue+"',$('result'))\">"
          + colorName + "</a></td><td>" 
          + red + "</td><td>" 
          + green + "</td><td>"
          + blue + "</td></tr>";
      }
      ret = ret + "</table>";

      container.innerHTML = ret;
      $('soap').innerHTML = arguments[2].escapeHTML();
    });
  }
// -->
</script>
<style type="text/css">
body {
  font-family: verdana;
}

#container {
  margin: 10pt;
  border: 1pt solid black;
  padding: 2pt;
}

#result {
  padding: 5pt;
  background-color: #eeeeee;
}

#soap {
  padding: 5pt;
  background-color: #eeeeee;
  font-size: 10pt;
}
</style>
</head>
<body>
R<input id="inpRed" name="inpRed" value="88" />
G<input id="inpGreen" name="inpGreen" value="88" />
B<input id="inpBlue" name="inpBlue" value="88" />
<input value="Invoke the Web Service" type="button"
  onclick="suggestColor($('inpRed').value,$('inpGreen').value,$('inpBlue').value,$('result'))" />
<br />
<div id="container">Result:
<div id="result"></div>
<div id="soap"></div>
</div>
</body>
</html>

Webサービスの呼び出し方

var call = new WS.Call( url );
var qn_op = new WS.QName( channel , xlsnamespace );
call.invoke_rpc(qn_op, arg, encoding style, call_back_func());
設定値意味
urlWebサービスのURL (クラス名)
channelWebサービスのチャンネル (メソッド名)
xlsnamespacenamespace
argWebサービスの引数(cf.引数の指定の仕方)
encoding style?(nullで良いみたい)
call_back_func()Webサービスの処理結果を処理する関数(cf.コールバック関数)

引数の指定の仕方

コールバック関数(Response XMLの解釈)について

こんな感じのWebアプリができた

screenshot.png
 

Ajaxのぐりぐり

例外処理

error.png

prototype.js 1.6.0対応

参考文献


Java#AJAX


添付ファイル: filehttpfox.png 2513件 [詳細] filescreenshot.png 2388件 [詳細] filerepair1.png 2392件 [詳細] filefirebug.png 2358件 [詳細] filerepair2.png 2241件 [詳細] filerepair3.png 2319件 [詳細] filefirebug2.png 2454件 [詳細] fileerrorPage.png 2703件 [詳細] fileerror.png 2536件 [詳細] fileproject.png 2284件 [詳細] fileajax-loader.gif 2589件 [詳細] fileExamWebService.zip 2717件 [詳細]

トップ   編集 凍結 差分 バックアップ 添付 複製 名前変更 リロード   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS   sitemap
Last-modified: 2009-03-22 (日) 00:05:36 (5741d)
Short-URL: http://at-sushi.com/pukiwiki/index.php?cmd=s&k=1f919c1b68
ISBN10
ISBN13
9784061426061