Ajax请求WCF服务以及跨域的问题解决

Ajax请求WCF服务以及跨域的问题解决

 

这两天准备重构一下项目，准备用纯html+js做前台，然后通过ajax+WCF的方式来传递数据，所以就先研究了一下ajax访问的wcf的问题，还想到还折腾了一天才明白

 

首先由个问题要先知道一下，ajax访问url或者服务的时候，会碰见跨域的问题，这个跨域不是主域名不一样 才是跨域，而是二级域名或者同域名的不同端口，都算跨域访问

比如a.xx.com,b.xx.com这都算跨域。或者xx.com:80,xx.com:90

ajax支持跨域的解决方案目前就是Jsonp，jquery是支持这个方案的

关于ajax跨域，jsonp的原理请参考这个文章http://www.cnblogs.com/chopper/archive/2012/03/24/2403945.html

我半天的折腾就是没明白这个，以为跨域的逻辑和cookie一样，主域名相同就行，其实不是！！！

 

1.建立可以Http，Url访问的WCF访问

一般WCF只是公开地址和服务，然后通过的VS的添加服务功能才能访问，如果要想让ajax访问wcf，那么wcf必须做些改变，支持ajax直接访问，ajax只能访问普通形式的url地址。

在vs中建立wcf项目模板，然后添加一个启用ajax的WCF服务

 

添加成功以后，web.config会发生些变化，这些变化才能支持ajax访问。无需其他设置config就可以访问了

其中有几个重点：

  <serviceHostingEnvironment aspNetCompatibilityEnabled="true"      multipleSiteBindingsEnabled="true" />

  <services>
      <service name="WcfService1.Service2">
        <endpoint address="" behaviorConfiguration="WcfService1.Service2AspNetAjaxBehavior"
          binding="webHttpBinding" contract="WcfService1.Service2" bindingConfiguration="Bind1"  />
      </service>

 

建立的svc代码如下，一定要注意以下的属性签名

  [ServiceContract]
    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    public class Service2 : IService2
    {
        // 要使用 HTTP GET，请添加 [WebGet] 特性。(默认 ResponseFormat 为 WebMessageFormat.Json)
        // 要创建返回 XML 的操作，
        //     请添加 [WebGet(ResponseFormat=WebMessageFormat.Xml)]，
        //     并在操作正文中包括以下行:
        //         WebOperationContext.Current.OutgoingResponse.ContentType = "text/xml";
        [OperationContract]
        [WebGet(ResponseFormat = WebMessageFormat.Json)]
        public Person DoWork()
        {

            return new Person() {  ID=1, Name="Hello World"};
        }

        // 在此处添加更多操作并使用 [OperationContract] 标记它们
    }

然后再IIS中发布，配置host，设置一个域名，就可以直接访问到这个服务的具体方法DoWork的页面，效果如下：

2.建立Web项目，在Html中使用ajax访问wcf服务

在IIS中建设Web网站，配置测试域名，要和wcf的域名不一样。

然后主要就是JS的ajax访问，这里使用的Jquery

(function($, window, undefined) {
    $(function () {
        var RootDom = $("body");

        RootDom.delegate("#test", "click", function () {
            $.ajax({
                url: 'http://wcftest.xxx.com/Service2.svc/DoWork?callback=?',
                cache: false,
                dataType: "jsonp",
                jsonpCallback:"person22",
                success: function (data) {
                    alert(data.ID);
                    alert(data);

                },
                fail: function (data) {
                    alert(data);
                }
            });
            //这个方法更简单。
            $.getJSON("http://wcftest.xxx.com/Service2.svc/DoWork?callback=?", function (data) {
                alert(data.Name);
            })
        });

      
    })
})(jQuery, window)

//其中需要的注意的是callback=?，使用这个代码，表示通知wcf服务，我是在请求jsonp数据，而且支持跨域。