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

简介:

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

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

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


本文转自 梦在旅途 博客园博客,原文链接:http://www.cnblogs.com/zuowj/p/4817311.html  ,如需转载请自行联系原作者

相关文章
|
5天前
|
JavaScript CDN
jQuery方法小记
jQuery方法小记
21 0
|
5天前
|
JavaScript 前端开发 容器
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
21 0
|
5天前
|
JavaScript Serverless
jquery attr()方法
jquery attr()方法
16 0
|
3天前
|
JavaScript 索引
|
3天前
|
JavaScript 索引
jQuery 实现 图片框切换【与原生 JS 对比】
jQuery 实现 图片框切换【与原生 JS 对比】
|
5天前
|
JavaScript
jquery获取子元素的一些方法
jquery获取子元素的一些方法
9 0
|
5天前
|
JavaScript 前端开发 API
jquery的一些方法
jquery的一些方法
7 1
|
5天前
|
JavaScript
jquery获取子元素的一些方法
jquery获取子元素的一些方法
|
5天前
|
JavaScript
jQuery遍历节点的方法
jQuery遍历节点的方法
10 0
|
5天前
|
JavaScript 前端开发 API
JQuery的attr()属性和JS的属性的方法
JQuery的attr()属性和JS的属性的方法
10 0