实现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以前，采用如下代码：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

<!--添加一个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 节点)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<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来调用代码如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38

//简单封装一下： 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来调用代码如下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

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服务的方法，敬请期待，不足之处，欢迎指出，谢谢！