【ASP.NET AJAX】 XML-Scriptを使用したWebサービスの非同期呼び出し - こだかたろうです - Site Home

こんにちは、こだかです。
昨日のクリクリドーナツは1時間40分待ち！、お店のデッキ（並ぶスペース）には人が入りきらなくて、タイムズスクエアに伸びる橋まで行列が出来ていました。（下図）

───────┐       │橋      │
     　         │      │         │
お店          │      │・・・    │
       　       │     │・・・    │
───────┴───┤・・・    │
デッキ                 │・・・   │
行列１　・・・・・・    │行列２│
・・・・・・・・・・・・   │          │
───────────┘          └───────────────

道こだか！

─────────────────────────────────

（ちなみにこの絵を書くのに10分近く掛っています。何をやってるのだか・・・崩れている人、ごめんなさい）
ウォッチャーのこだかとしては、写真を是非撮りたいと思っています。

さて、MicrosoftONでAJAXの話をする為に、色々準備をしていたのですが、
ASP.NET AJAXの情報は比較的多くある割に、XML-Scriptの情報が少ないように感じましたので、今日はXML-Scriptで非同期にWebServiceを呼ぶサンプルを掲載します。
実行すると、現在時刻をStringで返すWebServiceを呼び表示します。それだけのサンプルです。
比較の為、JavaScriptでの呼び出しも同じページに含めています。
（弊社松崎のブログもご確認下さい：http://blogs.msdn.com/tsmatsuz/archive/2007/03/12/xml-script-futures-ctp.aspx）

手順
1 VisualStudio2005を起動して[ファイル]→[新規作成]→[Webサイト]より[ASP.NET AJAX CTP-Enabled WebSite]を選択し新規のWebサイトを作成します。
2 Default.aspxのソースビューに下記を貼り付けます。
3 [Webサイト]→[新しい項目の追加]より[Webサービス]を選択しファイル名を[DateTimeService.asmx]とします。
4 DateTimeService.csに下記のWebサービスを貼り付けます。
これでビルドができるはずです。
(ここまでやるなら、サンプルのプロジェクトをそのままホストすればよかったですね・・・)

JavaScriptでそのまま書くと、"Button2_onclick","function OnComplete"辺りの記述になります。
一方XML-Scriptの同じ部分は <script type="text/xml-script">以下です。
この例だけで一概には言えませんが、XML-Scriptで書くと記述自体は多くなりますが、見た目に分かり易くなりますね。
もちろん、クライアントサイドで、Microsoft AJAX Libraryの組み込みコンポーネントが使用できるのも魅力です。
この例ではLabelコントロールを使用していますが、当然対応するHTMLタグは無いので、spanとして記述をしておきます。
ただクライアントサイドでの実装は、デバッグが面倒なのと、現状では情報が少ないので、ライブラリのソースの追跡は避けて通れません。
この辺りのハードルを下げることが、エバンジェリストの役目だと思います。

Default.aspx------------------------------------------------------------------------------------------------------
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <script language="javascript" type="text/javascript">
    // <!CDATA[
        function Button2_onclick() {
            retVal = DateTimeService.GetTime(OnComplete);
        }

        function OnComplete(value) {
            var projectElement1 = $find("lblJavaScript1");
            projectElement1.set_text("JAVA-Scriptでの更新です");
            projectElement1.get_element().style.backgroundColor="F00000";
            var projectElement2 = $find("lblJavaScript2");
            projectElement2.set_text(value);
        }

    // ]]>
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server">
            <Scripts>
                <asp:ScriptReference Assembly="Microsoft.Web.Preview" Name="PreviewScript.js" />
            </Scripts>
            <Services>
                <asp:ServiceReference Path="DateTimeService.asmx" />
            </Services>
        </asp:ScriptManager>

Webサービス-------------------------------------------------------------------------------------------------
using System;
using System.Web;
using System.Collections;
using System.Web.Services;
using System.Web.Services.Protocols;

/// <summary>
/// DateTimeService の概要の説明です
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class DateTimeService : System.Web.Services.WebService {
    public DateTimeService () {
        //デザインされたコンポーネントを使用する場合、次の行をコメントを解除してください
        //InitializeComponent();
    }

        [WebMethod]
        public string GetTime()
        {
            return DateTime.Now.ToShortTimeString();
        }
}

少し解説を加えると、下記<binding>ですが、それぞれプロパティの説明は以下になります。

dataContext：バインド元、今回の場合はWebサービス
dataPath：バインド元のどの情報を対象にするのか？今回はWebサービスの戻り値
property：バインド先のプロパティ

また、下記<ServiceMethodRequest>ですが、useGetはfalseにする必要があります。
こうしないとJSONのシリアライズがうまくできません。

以上です、間違った事を書いていたらごめんなさい。

こだかたろう