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方式

示例代碼下載：