JavaScript から ASP.NET Webservice のメソッドを呼び出す。(2)
ASP.NET AJAX Extension では WebService の出力を JSON としてクライアントに返却することが出来ます。
XML で受け取っていた場合は XML を JavaScript や XSL でパースしてあげる必要もあり、何かとめんどくさいことが多かったのですが、 JSON 形式で受け取れるとなるとこのあたりでかなり楽を出来ます。
実際受け取れているかを確認してみます。
たとえば次のようにメンバ一覧を返すWebServiceを作成します。
呼び出しの JavaScript は次のような感じ
で、これを Wireshark でキャプチャして見ます。
JSON形式で返却されてきましたね。
これをXML形式で受信したい場合は、WebMethod の属性に
を付加します。
通信内容は次のとおり
XML で受け取っていた場合は XML を JavaScript や XSL でパースしてあげる必要もあり、何かとめんどくさいことが多かったのですが、 JSON 形式で受け取れるとなるとこのあたりでかなり楽を出来ます。
実際受け取れているかを確認してみます。
たとえば次のようにメンバ一覧を返すWebServiceを作成します。
<Serializable()> _
Public Class ComuplusMember
Public Sub New()
End Sub
Public Sub New(ByVal id As String, ByVal webSiteUrl As String)
Me.Id = id
Me.WebSiteurl = webSiteUrl
End Sub
Public Id As String
Public WebSiteurl As String
End Class
Private Function GetDataSource() As Generic.List(Of ComuplusMember)
Dim members As New Generic.List(Of ComuplusMember)
members.Add(New ComuplusMember("Fujiwo","http://www.shos.info/"))
members.Add(New ComuplusMember("hara","http://www.codeseek.net/"))
members.Add(New ComuplusMember("Moo","http://moo-asp.net/"))
members.Add(New ComuplusMember("om","http://blog.livedoor.jp/omssys/"))
members.Add(New ComuplusMember("karua","http://karua.at.webry.info/"))
members.Add(New ComuplusMember("libaty","http://cs.gogo-asp.net/blogs/libaty/"))
members.Add(New ComuplusMember("FooPah","http://www.foopah.com/"))
members.Add(New ComuplusMember("kota","http://www.teamyg.net/"))
members.Add(New ComuplusMember("kota","http://www.teamyg.net/"))
members.Add(New ComuplusMember("tkinugaw","http://blog.tk-engineering.com/"))
members.Add(New ComuplusMember("Elfaria","http://www.tipsofvb.net/"))
members.Add(New ComuplusMember("kkmaegawa","http://d.hatena.ne.jp/kkamegawa"))
Return members
End Function
<WebMethod()> _
Public Function GetAllMembers() As ComuplusMember()
Return GetDataSource().ToArray()
End Function
呼び出しの JavaScript は次のような感じ
<html>
<head>
<script type="text/javascript" src="js/MicrosoftAjax.js" ></script>
<script type="text/javascript" src="/AjaxEnabledWebSite/WebService.asmx/js" ></script>
<script type="text/javascript" >
function OnComplete(value) {
$get("status").innerText = String.format("{0}人", value.length);
for (var index = 0; index < value.length; index++) {
alert(value[index].Id);
}
}
//function OnTimeOut(value) {
// $get("status").innerText = "TimeOut" + value.get_message();
//}
function OnError(value) {
$get("status").innerHTML = "Error\n" + value.get_message();
}
function GetMembers() {
// WebService.GetAllMembers(OnComplete, OnTimeOut, OnError);
WebService.GetAllMembers(OnComplete, OnError, "UserContext1);
}
</script>
</head>
<body>
<input type="button" value="メンバーを取得" id="cmdGetMembers" onclick="GetMembers()" /><br />
<div id="status" />
</body>
</html>
で、これを Wireshark でキャプチャして見ます。
s{kIE@<<0'`8tPNQQHTTP/1.0 200 OK
Server: Microsoft-IIS/5.0
Date: Thu, 01 Mar 2007 06:44:01 GMT
X-Powered-By: ASP.NET
X-AspNet-Version: 2.0.50727
Cache-Control: private, max-age=0
Content-Type: application/json; charset=utf-8
Content-Length: 1131
X-Cache: MISS from minos_proxy
Proxy-Connection: keep-alive
[{"__type":"WebService+ComuplusMember","Id":"Fujiwo","WebSiteurl":"http://www.shos.info/"},
{"__type":"WebService+ComuplusMember","Id":"hara","WebSiteurl":"http://www.codeseek.net/"},
{"__type":"WebService+ComuplusMember","Id":"Moo","WebSiteurl":"http://moo-asp.net/"},
{"__type":"WebService+ComuplusMember","Id":"om","WebSiteurl":"http://blog.livedoor.jp/omssys/"},
{"__type":"WebService+ComuplusMember","Id":"karua","WebSiteurl":"http://karua.at.webry.info/"},
{"__type":"WebService+ComuplusMember","Id":"libaty","WebSiteurl":"http://cs.gogo-asp.net/blogs/libaty/"},
{"__type":"WebService+ComuplusMember","Id":"FooPah","WebSiteurl":"http://www.foopah.com/"},
{"__type":"WebService+ComuplusMember","Id":"kota","WebSiteurl":"http://www.teamyg.net/"},
{"__type":"WebService+ComuplusMember","Id":"kota","WebSiteurl":"http://www.teamyg.net/"},
{"__type":"WebService+ComuplusMember","Id":"tkinugaw","WebSiteurl":"http://blog.tk-engineering.com/"},
{"__type":"WebService+ComuplusMember","Id":"Elfaria","WebSiteurl":"http://www.tipsofvb.net/"},
{"__type":"WebService+ComuplusMember","Id":"kkmaegawa","WebSiteurl":"http://d.hatena.ne.jp/kkamegawa"}]
JSON形式で返却されてきましたね。
これをXML形式で受信したい場合は、WebMethod の属性に
通信内容は次のとおり
<?xml version="1.0" encoding="utf-8"?>
<ArrayOfComuplusMember xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
<ComuplusMember><Id>Fujiwo</Id><WebSiteurl>http://www.shos.info/</WebSiteurl></ComuplusMember>
<ComuplusMember><Id>hara</Id><WebSiteurl>http://www.codeseek.net/</WebSiteurl></ComuplusMember>
<ComuplusMember><Id>Moo</Id><WebSiteurl>http://moo-asp.net/</WebSiteurl></ComuplusMember>
<ComuplusMember><Id>om</Id><WebSiteurl>http://blog.livedoor.jp/omssys/</WebSiteurl></ComuplusMember>
<ComuplusMember><Id>karua</Id><WebSiteurl>http://karua.at.webry.info/</WebSiteurl></ComuplusMember>
<ComuplusMember><Id>libaty</Id><WebSiteurl>http://cs.gogo-asp.net/blogs/libaty/</WebSiteurl></ComuplusMember>
<ComuplusMember><Id>FooPah</Id><WebSiteurl>http://www.foopah.com/</WebSiteurl></ComuplusMember>
<ComuplusMember><Id>kota</Id><WebSiteurl>http://www.teamyg.net/</WebSiteurl></ComuplusMember>
<ComuplusMember><Id>kota</Id><WebSiteurl>http://www.teamyg.net/</WebSiteurl></ComuplusMember>
<ComuplusMember><Id>tkinugaw</Id><WebSiteurl>http://blog.tk-engineering.com/</WebSiteurl></ComuplusMember>
<ComuplusMember><Id>Elfaria</Id><WebSiteurl>http://www.tipsofvb.net/</WebSiteurl></ComuplusMember>
<ComuplusMember><Id>kkmaegawa</Id><WebSiteurl>http://d.hatena.ne.jp/kkamegawa</WebSiteurl></ComuplusMember>
</ArrayOfComuplusMember>
この記事へのコメント
WebService.GetAllMembers(OnComplete, OnTimeOut, OnError);
}
Webサービスの呼び出しですが
WebService.GetAllMembers(OnComplete, OnError);
では?
WebServiceの呼び出しですが定義としては次のようになっています。
GetAllMembers:function(succeededCallback, failedCallback, userContext) {
return this._invoke(WebService.get_path(), 'GetAllMembers',false,{},succeededCallback,failedCallback,userContext); }}
ということなので第三引数は UserContext になります。この部分は僕のとんでもない間違いです。ありがとうございます。
WebService.GetAllMembers(OnComplete, OnError, "Context1");
WebService.GetAllMembers(OnComplete, OnError);
WebService.GetAllMembers(OnComplete);
WebService.GetAllMembers();
のどれでも行えます。指定しない引数は undefined になり処理の途中に無視されるだけです。