かるあ のメモ

アクセスカウンタ

help リーダーに追加 RSS JavaScript から ASP.NET Webservice のメソッドを呼び出す。(2)

<<   作成日時 : 2007/03/01 15:55   >>

ブログ気持玉 0 / トラックバック 4 / コメント 3

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 の属性に
<Script.Services.ScriptMethod(ResponseFormat:=Script.Services.ResponseFormat.Xml)> を付加します。
通信内容は次のとおり

<?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/&lt;/WebSiteurl&gt;&lt;/ComuplusMember&gt;
  <ComuplusMember><Id>hara</Id><WebSiteurl>http://www.codeseek.net/&lt;/WebSiteurl&gt;&lt;/ComuplusMember&gt;
  <ComuplusMember><Id>Moo</Id><WebSiteurl>http://moo-asp.net/&lt;/WebSiteurl&gt;&lt;/ComuplusMember&gt;
  <ComuplusMember><Id>om</Id><WebSiteurl>http://blog.livedoor.jp/omssys/&lt;/WebSiteurl&gt;&lt;/ComuplusMember&gt;
  <ComuplusMember><Id>karua</Id><WebSiteurl>http://karua.at.webry.info/&lt;/WebSiteurl&gt;&lt;/ComuplusMember&gt;
  <ComuplusMember><Id>libaty</Id><WebSiteurl>http://cs.gogo-asp.net/blogs/libaty/&lt;/WebSiteurl&gt;&lt;/ComuplusMember&gt;
  <ComuplusMember><Id>FooPah</Id><WebSiteurl>http://www.foopah.com/&lt;/WebSiteurl&gt;&lt;/ComuplusMember&gt;
  <ComuplusMember><Id>kota</Id><WebSiteurl>http://www.teamyg.net/&lt;/WebSiteurl&gt;&lt;/ComuplusMember&gt;
  <ComuplusMember><Id>kota</Id><WebSiteurl>http://www.teamyg.net/&lt;/WebSiteurl&gt;&lt;/ComuplusMember&gt;
  <ComuplusMember><Id>tkinugaw</Id><WebSiteurl>http://blog.tk-engineering.com/&lt;/WebSiteurl&gt;&lt;/ComuplusMember&gt;
  <ComuplusMember><Id>Elfaria</Id><WebSiteurl>http://www.tipsofvb.net/&lt;/WebSiteurl&gt;&lt;/ComuplusMember&gt;
  <ComuplusMember><Id>kkmaegawa</Id><WebSiteurl>http://d.hatena.ne.jp/kkamegawa&lt;/WebSiteurl&gt;&lt;/ComuplusMember&gt;
</ArrayOfComuplusMember>


設定テーマ

関連テーマ 一覧

月別リンク

ブログ気持玉

クリックして気持ちを伝えよう!
ログインしてクリックすれば、自分のブログへのリンクが付きます。
→ログインへ

トラックバック(4件)

タイトル (本文) ブログ名/日時
ASP.NET AJAX で作成された Proxy オブジェクトにコメントをつけてみる。
ASP.NET AJAX で構成された WebService は Microsoft AJAX Library から簡単に呼び出させます。そのあたりはここやここを見てもらうとして、今回は WebService によって作成された Proxy クラスを覗いていてみようと思います。 ...続きを見る
かるあ のメモ
2007/03/01 18:21
JavaScript から ASP.NET Webservice のメソッドを呼び出す。
かるあ のメモ からです。 JavaScript から ASP.NET Webservice のメソッドを呼び出す。 JavaScript から ASP.NET Webservice のメソッドを呼び出す。(2) ...続きを見る
ナオキにASP.NET(仮)
2007/03/02 15:41
Microsoft AJAX Libraly でページを非同期に読み込む
前回は ASP.NET AJAX の WebService が吐き出す Proxy クラスを経由して WebService を呼び出しましたが、今回は Proxy クラスが内部で使用している Sys.Net.WebRequest クラス を使って 非同期にページを読み込んでみたいと思います。 ...続きを見る
かるあ のメモ
2007/03/08 17:02
System.Net.HttpWebRequest を使用して ASP.NET AJax のメソッド
ASP.NET AJax では WebService のメッセージ通信に XML/SOAP の他に JSON が利用されています。 JSON を使用することで XML を使用するよりはメッセージ量を減らすことができます。 ただ、Javascript と WebService は JSON で簡単にやり取りできるのに .NET の世界に来ると未だに XML でのやり取りしか用意されていません。 今回は System.Net.HttpWebRequest を使用して JSON メッセージ... ...続きを見る
かるあ のメモ
2007/05/27 20:30

トラックバック用URL help


自分のブログにトラックバック記事作成(会員用) help

タイトル
本 文

コメント(3件)

内 容 ニックネーム/日時
function GetMembers() {
WebService.GetAllMembers(OnComplete, OnTimeOut, OnError);
}

Webサービスの呼び出しですが
WebService.GetAllMembers(OnComplete, OnError);
では?
niceGuy
2007/03/12 04:59
ご指摘ありがとうございます。
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 になり処理の途中に無視されるだけです。
かるあ
2007/03/14 08:54

コメントする help

ニックネーム
本 文