jQueryとASP.NET MVCで非同期通信 その２

前回は非同期通信のサーバサイドをControllerクラスとしたけれど、今回はWeb Serviceをサーバサイドとして場合を解説する。

まずコメントを入力するtextareaと保存ボタンを用意する。

-details.aspx-
<div>
  <div>
    <textarea id="commentArea"></textarea>
  </div>
  <input id="saveButton" type="button" value="Save"/>
</div>

ついで、JavaScriptでsaveButtonのClickイベントをハンドルし、jQueryのajaxメソッドでサーバサイドと非同期通信を行う。ここまでは前回同様だが今回は接続先のurlが異なる。

-JavaScript-

$(document).ready(function() {
 $('#saveButton').click(function(){
  try {
   $.ajax({
              type: "POST",
              url: "http://www.my-clip.net/WebServices/Clip.asmx/Comment",
              data: { clipId: _clipId, commentText: $('#commentArea').val() },
              contentType: "application/json",
              dataType: "json",
              success: function(msg) {
                  // code here...
              },
              error: function(e) {
                  // code here...
              }
          });
  }
  catch (e) {
   // code here...
  }
 });
});

ここでUrlを指定する場合に注意が必要だ。上記の例はMyClipアプリケーションと同一ドメイン上にWeb Serviceを設置しているので正常に動作する。しかし、異なるドメイン（例：http://www.yahoo.co.jp/）へのリクエストはスクリプト上からはできない。これはほとんどのブラウザでドメインをまたいだリクエストが禁止されているからである。対処として、上記の例のようにWeb Serviceを同一ドメイン上に設置するか、またはいったん同一ドメインへリクエストをし、その後リクエストされた先から外部ドメインへリクエストする（ブリッジする、という）という手法があげられる。ちなみに、リクエスト先のWeb Serviceを運用しているアプリケーション上に設置すれば、http://www.my-clip.net/の部分は必要なく、/WebServices/Clip.asmx/Commentの部分のみでリクエストできる。

もう一点、ContentTypeをjsonに変更している。これはWeb Serviceのメソッドを記述する際にResponseFormatをJsonで指定しているからである。Web Serviceのメソッドは以下の通りだ。

-Clip.asmx-

[WebMethod(CacheDuration = 10)]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public CommentModel Comment(
  int clipId, 
  string commentText)
{
  // code here...
}

以上で一連の流れは終了だ。サーバサイドとしてWeb Serviceを使用してもクライアント側のコードにほぼ違いは無い。ただWeb Serviceを使用する場合は設置場所に注意が必要だ。