实现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);
                }
            });
        });

最终实现效果如下：

特别说明，以上实现只支持在同一域名下进行调用，跨域调用则会报错，下次我将分享跨域调用WCF服务的方法，敬请期待，不足之处，欢迎指出，谢谢！