JavaScript から ASP.NET Webservice のメソッドを呼び出す。(2)

.NET ASP.NET AJAX JavaScript
ASP.NET AJAX Extension では WebService の出力を JSON としてクライアントに返却することが出来ます。
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>


.NET ASP.NET AJAX JavaScript
気持玉(2)
3
4

ブログ気持玉

クリックして気持ちを伝えよう！

ログインしてクリックすれば、自分のブログへのリンクが付きます。

→ログインへ

なるほど（納得、参考になった、ヘー）
驚いた
面白い
ナイス
ガッツ（がんばれ！）
かわいい

気持玉数 ： 2

驚いた
ガッツ（がんばれ！）

この記事へのコメント

niceGuy
2007年03月12日 04:59
function GetMembers() {
WebService.GetAllMembers(OnComplete, OnTimeOut, OnError);
}

Webサービスの呼び出しですが
WebService.GetAllMembers(OnComplete, OnError);
では？
かるあ
2007年03月14日 08:54
ご指摘ありがとうございます。
WebServiceの呼び出しですが定義としては次のようになっています。
GetAllMembers:function(succeededCallback, failedCallback, userContext) {
return this._invoke(WebService.get_path(), 'GetAllMembers',false,{},succeededCallback,failedCallback,userContext); }}

ということなので第三引数は UserContext になります。この部分は僕のとんでもない間違いです。ありがとうございます。
かるあ
2007年03月14日 08:54
で、呼び出しに関しては
WebService.GetAllMembers(OnComplete, OnError, "Context1");
WebService.GetAllMembers(OnComplete, OnError);
WebService.GetAllMembers(OnComplete);
WebService.GetAllMembers();

のどれでも行えます。指定しない引数は undefined になり処理の途中に無視されるだけです。
コメントを書く

この記事へのトラックバック