AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2017-11-15 895
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

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

一、首先我们需定义支持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  ，如需转载请自行联系原作者

文章标签：
Web App开发
数据格式
JSON
关键词：
jQuery方法
ajax方法
jQuery原生
ajax原生
ajax xmlhttprequest
技术小牛人
目录
相关文章
二二*一一
|
1月前
|
前端开发 JavaScript
jQuery - AJAX load() 方法
jQuery load() 方法是简单但强大的 AJAX 方法。
二二*一一
43 6
听白
|
2月前
|
JSON 前端开发 JavaScript
jQuery AJAX 方法
jQuery AJAX 方法
听白
30 1
听白
|
2月前
|
JavaScript 前端开发
jQuery - AJAX load() 方法
jQuery - AJAX load() 方法
听白
20 2
听白
|
2月前
|
XML JavaScript 前端开发
jQuery - AJAX get() 和 post() 方法
jQuery - AJAX get() 和 post() 方法
听白
25 6
听白
|
2月前
|
缓存 JavaScript 前端开发
jQuery - AJAX get() 和 post() 方法
jQuery - AJAX get() 和 post() 方法
听白
22 4
听白
|
2月前
|
JSON 前端开发 JavaScript
jQuery AJAX 方法
jQuery AJAX 方法
听白
20 1
听白
|
2月前
|
缓存 JavaScript 前端开发
jQuery - AJAX get() 和 post() 方法
jQuery - AJAX get() 和 post() 方法
听白
26 0
N..
|
6月前
|
XML JSON 前端开发
jQuery实现Ajax
jQuery实现Ajax
N..
64 1
天玄TX
|
6月前
|
XML 前端开发 JavaScript
jQuery中ajax如何使用
jQuery中ajax如何使用
天玄TX
64 0
杨校
|
5月前
|
前端开发 JavaScript
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]
杨校
44 0
杨校老师课堂之基于Servlet整合JQuery中的Ajax进行表单提交[基于IDEA]