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

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

//IAddService.csnamespace 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.csnamespace 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以前，采用如下代码：

     <%@ ServiceHost Language="C#" Debug="true" Service="WcfService1.AddService" %>
       
         
          
          
          
            
               
                  
                   
                   
                   
                 
              
             
               
                  
                 
              
           
          
            
               
              
           
        
     

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

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

三、在同工程下新增一个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服务的方法，敬请期待，不足之处，欢迎指出，谢谢！