ajax从asp.net mvc调用wcf

Question

我有两个应用程序.第一个是WCF服务,第二个是asp.net MVC 3应用程序.
在WCF应用程序中,我有一个界面:

    [ServiceContract]
    public interface IService1
    {
        [OperationContract]
        string HelloWorld(string personName);
    }

一节课:

public class Service1 : IService1
    {
        public string HelloWorld(string personName)
        {
            JavaScriptSerializer serializer = new JavaScriptSerializer();
            return serializer.Serialize("Hello " + personName);
        }
    }

现在,在asp.net mvc应用程序中,我想通过Ajax调用此方法:

<script type="text/javascript">
    var personName = "John";
    var dataIn = '{' + '"input":"' + personName + '"}';
    $.ajax({
        url: "http://localhost:7215/Service1.svc/HelloWorld",
        type: "POST",
        contentType: "application/json; charset=utf-8",
        data: dataIn,
        dataType: "json",
        success: function (data) {
            var object = JSON.parse(data.d);
            if (object.Error == '') {
                $("#response").html(object);
            }
        },
        error: function (error) {
            alert("Error: " + error);
        }
    });
    </script>

但是在Firebug中我得到了错误:400 Bad Request.
如何HelloWorld正确调用方法？谢谢.

Answer 1

所以你试图从JavaScript中使用WCF服务？

我看到的第一个问题是,您的服务尚未准备好从JavaScript中使用:(.您必须进行以下更改..

1. Service1使用AspNetCompatibilityRequirements行为配置类.

2. HelloWorld在与WebGet属性的接口中标记服务方法.[你需要参考System.SericeModel.Web装配]

做了两个改变之后..

[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 });
  }
}

下一个..

1. 配置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" />

然后将dataTypefrom "json"改为" jsonp"in the $.ajaxmethod.

  <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