![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
|
AJAX The Web Service Javascript Library |
今回作ったアプリケーション(Eclipse WTP Project) > 
ExamWebService.zip
インターネットからアクセスできます > http://hondou.homedns.org/ExamWebService/
(Mac版Firefox 3.0 / Vista版IE7.0 で動作確認しています)
ダウンロード時の、License Agreement を逐語訳してみた。
商用にそのまま使う場合には、専門家の判断を仰いだ方が無難かな。
個人が非商用で使う分には問題ないでしょう。
Firefox の Firebug Plugin で、break point を設定して Javascript を実行すると分かる
Firefox の Http Fox Plugin で監視可能
<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>
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());
| 設定値 | 意味 |
| url | WebサービスのURL (クラス名) |
| channel | Webサービスのチャンネル (メソッド名) |
| xlsnamespace | namespace |
| arg | Webサービスの引数(cf.引数の指定の仕方) |
| encoding style | ?(nullで良いみたい) |
| call_back_func() | Webサービスの処理結果を処理する関数(cf.コールバック関数) |
[ {name :'red' , value :inpRed},
{name :'green' , value :inpGreen},
{name :'blue' , value :inpBlue} ]
name属性 と value属性 を持つ構造体の配列で指定するvar name = color[elemNo].element.tagName; var value = color[elemNo].get_value();の形でタグ名と値を取得できる
envelope.body().get_all_children()[0].get_all_children()などとして構造をたどっていける
+ var MyHandler = Class.create();
+ MyHandler.prototype = (new WS.Handler()).extend({
+ on_reWebquest : function(envelope){
+ // Webサービスを呼び出す直前に呼ばれる
+ container.innterHTML = "<img src=\"ajax-loader.gif\"/>";
+ },
+ on_response : function(envelope){
+ // Webサービスから処理結果が帰ってきた直後に呼ばれる(コールバック関数が呼ばれる直前)
+ container.innterHTML = "";
+ },
+ on_error : function(call,envelope){
+ // コイツはいつ呼ばれるのか不明? (HTTP認証失敗時など?)
+ }
+ });
var call = new WS.Call('/ExamWebService/services/ColorSuggestionWebService');
+ call.add_handler(new MyHandler());
} ], null, function(call, envelope) {
+ var rootTag = envelope.get_body().get_all_children()[0].element.tagName;
+ if(rootTag == 'soapenv:Fault'){
+ var errors = envelope.get_body().get_all_children()[0].get_all_children();
+ container.innerHTML = '<table border=\"1\">'
+ + '<tr><td>fault code</td><td>'
+ + errors[0].get_value()
+ + '</td></tr>'
+ + '<tr><td>fault string</td><td>'
+ + errors[1].get_value()
+ + '</td></tr></table>';
+ }else{
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>";
コールバック関数の先頭で、エラー判定を入れる
var MyHandler = Class.create();
//instead of using .extend (no longer supported)
// MyHandler.prototype = (new WS.Handler()).extend({
//we extend the WS.Handler()
Object.extend(MyHandler.prototype,WS.Handler.prototype);
//and then extend the SOAP.Header interface
Object.extend(MyHandler.prototype,{
on_request : function(envelope){
// alert('on request');
container.innterHTML = "<img src=\"ajax-loader.gif\"/>";
},
on_response : function(envelope){
// alert('on response');
container.innterHTML = "";
},
on_error : function(call,envelope){
alert("ERROR");
}
});
errorPage.png 1947件
[詳細]
screenshot.png 1749件
[詳細]
httpfox.png 1789件
[詳細]
project.png 1641件
[詳細]
error.png 1771件
[詳細]
repair3.png 1634件
[詳細]
repair2.png 1614件
[詳細]
firebug.png 1727件
[詳細]
repair1.png 1736件
[詳細]
firebug2.png 1828件
[詳細]
ajax-loader.gif 1855件
[詳細]
ExamWebService.zip 1913件
[詳細]
