JavaScriptからWCF サービスを利用しようとしていますか?
私が目にする最初の問題は、あなたのサービスはまだ JavaScript から利用する準備ができていないということです :(. 次の変更を行う必要があります..
Service1
動作を使用してクラスを構成しAspNetCompatibilityRequirements
ます。
HelloWorld
属性とのインターフェイスでサービス メソッドをマークしWebGet
ます。System.SericeModel.Web
【組み立ての参考書が必要】
2つの変更を行った後..
[ServiceContract]
public interface IService1
{
[OperationContract]
[WebGet(ResponseFormat = WebMessageFormat.Json)]
string HelloWorld(string personName);
}
[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
public class Service1 : IService1
{
public string HelloWorld(string personName)
{
JavaScriptSerializer serializer = new JavaScriptSerializer();
// you are not returning data in proper JSON format, wrap the text in
// an anonymous object before serializing.
return serializer.Serialize(new { text = "Hello " + personName });
}
}
次..
サービスを構成webHttpBinding
します (サービス名とコントラクト名を必ず変更してください!)。
<system.serviceModel>
<behaviors>
<endpointBehaviors>
<behavior name="webHttpBehavior">
<webHttp />
</behavior>
</endpointBehaviors>
</behaviors>
<bindings>
<webHttpBinding>
<binding name="webHttpBindingWithJsonP" />
</webHttpBinding>
</bindings>
<services>
<service name="MvcApplication3.Service1">
<endpoint address="" binding="webHttpBinding"
bindingConfiguration="webHttpBindingWithJsonP"
contract="MvcApplication3.IService1"
behaviorConfiguration="webHttpBehavior"/>
</service>
</services>
</system.serviceModel>
これでサービスの準備が整いました!
クライアント側で変更を行いましょう (サービスからデータを取得しているのに、なぜPOSTなのですか?)
<script type="text/javascript">
var personName = "John";
var dataIn = '{' + '"input":"' + personName + '"}';
$.ajax({
url: "http://localhost:50623/Service1.svc/HelloWorld",
type: "GET",
contentType: "application/json; charset=utf-8",
data: dataIn,
dataType: "json",
success: function (data) {
var jsonData = JSON.parse(data);
$("#response").html(jsonData.text);
},
error: function (error) {
alert("Error: " + error);
}
});
</script>
ここまでは、WCF サービスと MVC アプリの両方が同じドメインで実行されていると想定してきました。
しかし、そうでない場合は、CROSS-DOMAIN BARRIERが原因で405
(Method Not Allowed)エラーが発生します。
この問題を解決するには、さまざまな方法があります。
1.JSONP を使用する
この場合、バインディングでcrossDomainScriptAccessEnabled
プロパティを設定するtrue
必要があり、jQuery から JSONP 呼び出しを行う必要があります。
<binding name="webHttpBindingWithJsonP" crossDomainScriptAccessEnabled="true" />
次に、メソッドでdataType
from"json"
を "に変更します。jsonp"
$.ajax
<script type="text/javascript">
var personName = "John";
var dataIn = '{' + '"input":"' + personName + '"}';
$.ajax({
...
dataType: "jsonp",
...
});
</script>
2. CORS の使用
これを参照してください..
http://www.w3.org/TR/cors/
https://developer.mozilla.org/en/http_access_control