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数据,而且支持跨域。

 

 

posted @ 2013-11-14 15:46 音乐啤酒 阅读(...) 评论(...) 编辑 收藏