WCF系列之.net(4.0) 在网站使用Js调用Wcf

上一篇，我们介绍使用WCF代替传统的WebService. 那么代替的话 我们客户端用JS也应该可以调用。

.net4.0中我们不仅可以调用，还可以很简单的调用。

代码如下：

服务端：

using System.ServiceModel.Activation; //这个告诉我们是否动态加载ServiceHost宿主


//要以IIS管道运行WCF服务 只需要加上这个特性就可以 运行网站的同时 运行WCF服务 AJAX也可以请求到了
[AspNetCompatibilityRequirements(RequirementsMode=AspNetCompatibilityRequirementsMode.Allowed)]
public class ProductService:IproductService
{
    public static IList<Product> products = new List<Product>()
    {
        new Product{Id="1",Department="IT部门",Name="Yuhao",Grade="软件开发"},
        new Product{Id="2",Department="IT部门",Name="Yuhao1",Grade="前端开发"}
    };

    #region IproductService 成员

    public IEnumerable<Product> GetAll()
    {
        return products;
    }

    public Product Get(string id)
    {
        Product product = products.FirstOrDefault(p => p.Id == id);
        if (null != product)
        {
            return product;
        }
        return null;
    }

    public void Create(Product product)
    {
        products.Add(product);
    }

    public void Update(Product product)
    {
        Product p = this.Get(product.Id);
        if (null != p)
        {
            products.Remove(p);
        }
        products.Add(product);

    }

    public void Detele(string id)
    {
        Product product = this.Get(id);
        if (null != product)
        {
            products.Remove(product);
        }

    }

    #endregion
}

服务接口和服务类，就不贴代码，一样。

客户端web.config配置：

    <!--这里是.NET4.0新特性 只需小小的配置下即可 -->
    <system.serviceModel>
        <serviceHostingEnvironment aspNetCompatibilityEnabled="true">
        <!--aspNetCompatibilityEnabled true 表示是否开启asp.net 管道通信 这里我们要用AJAX去请求 所以要开启-->
            <serviceActivations>
                <add relativeAddress="ProductService.svc" service="ProductService" factory="System.ServiceModel.Activation.WebScriptServiceHostFactory"/>
                <!--factory 是是否支持AJAX的关键-->
            </serviceActivations>
        </serviceHostingEnvironment>
        
        <!--下面是开启元数据的关键 也可以不开启-->
        <behaviors>
            <serviceBehaviors>
                <behavior>
                    <serviceMetadata httpGetEnabled="true"/>
                </behavior>
            </serviceBehaviors>
        </behaviors>
    </system.serviceModel>

客户端JS调用方式：

  <script type="text/javascript">
      function ReturnAjax() {
 
          $.ajaxSettings.contentType = "application/json";
          $.post("ProductService.svc/Getall", '', function (data) {
          //因为返回来的是JSON 所以我们要循环输出
              $.each(data.d, function (i) { $("#list").append("<li>编号:" + data.d[i].Id + "&nbsp; 部门:" + data.d[i].Department + "</li>") })
          });
      }
    </script>

好了 就这么简单，我就可以完全调用自己的WCF服务。

下一篇我们将讲解 JavaScript调用wcf rest方式

示例代码下载：