实现jquery.ajax及原生的XMLHttpRequest调用WCF服务的方法

废话不多说，直接讲解实现步骤

一、首先我们需定义支持WEB HTTP方法调用的WCF服务契约及实现服务契约类（重点关注各attribute），代码如下：

//IAddService.cs
namespace WcfService1
{
    [ServiceContract]
    public interface IAddService
    {
        [OperationContract]
        [WebInvoke(Method="POST",RequestFormat=WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json,BodyStyle=WebMessageBodyStyle.WrappedRequest)]
        int Add(int a,int b);
    }
}
 
 
//AddService.cs
namespace WcfService1
{
    [AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]
    public class AddService : IAddService
    {
 
        public int Add(int a, int b)
        {
            return a + b;
        }
 
    }
}

二、然后就是创建一个WCF服务缩主的svc文件，方法有两种：

1.在.NET FRAMEWORK 4.0以前，采用如下代码：

<!--添加一个WCF服务文件(如：AddService.svc)，文件内容修改成如下：-->
<%@ ServiceHost Language="C#" Debug="true" Service="WcfService1.AddService" %>
 
 
<!--配置WEB.CONFIG：-->
  <system.serviceModel>
    <serviceHostingEnvironment multipleSiteBindingsEnabled="true" />
    <bindings>
    </bindings>
    <behaviors>
      <serviceBehaviors>
        <behavior>
          <!-- 为避免泄漏元数据信息，请在部署前将以下值设置为 false 并删除上面的元数据终结点 -->
          <serviceMetadata httpGetEnabled="true"/>
          <!-- 要接收故障异常详细信息以进行调试，请将以下值设置为 true。在部署前设置为 false 以避免泄漏异常信息 -->
          <serviceDebug includeExceptionDetailInFaults="true"/>
        </behavior>
      </serviceBehaviors>
      <endpointBehaviors>
        <behavior name="AddServiceBehavior">
          <enableWebScript />
        </behavior>
      </endpointBehaviors>
    </behaviors>
    <services>
      <service name="WcfService1.AddService">
        <endpoint address=""  binding="webHttpBinding" contract="WcfService1.IAddService" behaviorConfiguration="AddServiceBehavior" ></endpoint>
      </service>
    </services>
  </system.serviceModel>

2.在.NET FRAMEWORK 4.0及以后，采用如下代码：(无需创建SVC文件，直接在WEB.CONFIG文件中指定一个地址，重点关注：serviceHostingEnvironment 节点)

<system.serviceModel>
  <bindings>
  </bindings>
  <behaviors>
    <serviceBehaviors>
      <behavior>
        <!-- 为避免泄漏元数据信息，请在部署前将以下值设置为 false 并删除上面的元数据终结点 -->
        <serviceMetadata httpGetEnabled="true"/>
        <!-- 要接收故障异常详细信息以进行调试，请将以下值设置为 true。在部署前设置为 false 以避免泄漏异常信息 -->
        <serviceDebug includeExceptionDetailInFaults="true"/>
      </behavior>
    </serviceBehaviors>
  </behaviors>
  <serviceHostingEnvironment aspNetCompatibilityEnabled="true">
    <serviceActivations>
      <add relativeAddress="AddService.svc" service="WcfService1.AddService" factory="System.ServiceModel.Activation.WebScriptServiceHostFactory"/>
    </serviceActivations>
  </serviceHostingEnvironment>
</system.serviceModel>

创建好后，直接运行该工程，出现如下画面则表示运行成功：

三、在同工程下新增一个WEB页面（格式不限，ASPX,HTML都可以），然后实现WEB客户端调用WCF服务的代码，我这里分为两种方式来完成，一是采用原生的XMLHttpRequest来调用，二是采用jQuery.ajax来调用，其内部原理相同，在此只是为了让大家更清楚一些。

采用原生的XMLHttpRequest来调用代码如下：

//简单封装一下：
var $ = function (id) {
    return document.getElementById(id);
};
 
 
//获取原生的XMLHttpRequest对象
function getXMLHTTPRequest() {
    var req = false;
    try {
        req = new XMLHttpRequest();
    } catch (err) {
        try {
            req = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (err) {
            try {
                req = new ActiveXObject("Microsoft.XMLHTTP");
            } catch (err) {
                req = false;
            }
        }
    }
    return req;
}
 
$("btnGet").onclick = function () {
 
    var xmlhttp = getXMLHTTPRequest();
    xmlhttp.open("POST", "http://localhost:30348/AddService.svc/Add", true);
    xmlhttp.setRequestHeader("Content-type", "application/json");
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            var r = JSON.parse(xmlhttp.responseText);
            $("result").value = r.d;
        }
    };
    xmlhttp.send('{"a":' + $("num1").value + ',"b":' + $("num2").value + '}');
}

采用jQuery.ajax来调用代码如下：

var jq = jQuery.noConflict();
jq("#btnGet").click(function () {
    alert("click");
    jq.ajax("http://localhost:30348/AddService.svc/Add", {
        type: "POST",
        //dataType: "json",
        contentType: "application/json",
        data: '{"a":' + jq("#num1").val() + ',"b":' + jq("#num2").val() + '}',
        //data: 'a=' + jq("#num1").val() + '&b=' + jq("#num2").val(),
        success: function (data) {
            jq("#result").val(data.d);
        },
        error: function (x, textStatus, errorThrown) {
            alert(textStatus);
        }
    });
});