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

时间:2022-09-13 20:53:13

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

一、首先我们需定义支持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>

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

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

三、在同工程下新增一个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);
}
});
});

最终实现效果如下:

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

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

实现jquery.ajax及原生的XMLHttpRequest调用WCF服务的方法的更多相关文章

  1. 实现jquery&period;ajax及原生的XMLHttpRequest跨域调用WCF服务的方法

    关于ajax跨域调用WCF服务的方法很多,经过我反复的代码测试,认为如下方法是最为简便的,当然也不能说别人的方法是错误的,下面就来上代码,WCF服务定义还是延用上次的,如: namespace Wcf ...

  2. jquery或者JavaScript调用WCF服务的方法

    /****************************************************************** * Copyright (C): 一心堂集团 * CLR版本: ...

  3. 实现在GET请求下调用WCF服务时传递对象(复合类型)参数

    WCF实现RESETFUL架构很容易,说白了,就是使WCF能够响应HTTP请求并返回所需的资源,如果有人不知道如何实现WCF支持HTTP请求的,可参见我之前的文章<实现jquery.ajax及原 ...

  4. ajax内调用WCF服务

    WCF可以当作WebService一样被调用,在html内通过ajax调用WCF服务的方法如下: 1.新建一个WCF服务的网站项目: 2.在项目内增加一个新项:启用了ajax的WCF服务: 3.在对应 ...

  5. JQuery&period;Ajax &plus; 跨域 &lpar;crossDomain&rpar; &plus; POST &plus; JSON &plus; WCF RESTful&comma; 5大陷阱和解决方案

    JQuery.Ajax + 跨域 (crossDomain) + POST + JSON + WCF RESTful, 5大陷阱和解决方案 最近在开发WSS RESTful服务的时候, 碰到了这些个纠 ...

  6. VS2010中使用Jquery调用Wcf服务读取数据库记录

    VS2010中使用Jquery调用Wcf服务读取数据库记录 开发环境:Window Servere 2008 +SQL SERVE 2008 R2+ IIS7 +VS2010+Jquery1.3.2 ...

  7. 学习调用WCF服务的各种方法

    1.开发工具调用WCF 这中方法很方便也很简单,很多工作VS就帮我们完成了.相信大家也不会对这种方法陌生.这里简单提一下.打开VS,在项目中添加服务引用: 在config中自动声明了有关服务的节点信息 ...

  8. &lbrack;转&rsqb;学习 WCF &lpar;6&rpar;--学习调用WCF服务的各种方法

    转自:http://www.cnblogs.com/gaoweipeng/archive/2009/07/26/1528263.html 作者这篇博文写得很全面. 根据不同的情况,我们可以用不同的方法 ...

  9. JavaScript调用wcf服务,并且处理返回的字典集合

    1.第一步创建wcf服务的方法 using System;using System.Collections.Generic;using System.Linq;using System.Runtime ...

随机推荐

  1. ASP&period;NET连接数据库时,提示&OpenCurlyDoubleQuote;用户 &&num;39&semi;sa&&num;39&semi; 登录失败原因&colon; 未与信任 SQL Server 连接相关联

    用ASP.NET连接数据库时,提示"用户 'sa' 登录失败.原因: 未与信任 SQL Server 连接相关联.".解决方法:首先检查是不是web.config文件内的用户名密码 ...

  2. blog已搬迁

    All blogs are moved to my currently-used site: http://jianlu.github.io/

  3. How to install OpenResty

    How to install OpenResty 15 January 2014, 6:18 am   OpenResty, also called “ngx_openresty”, is a web ...

  4. HDU5697 刷题计划 dp&plus;最小乘积生成树

    分析:就是不断递归寻找靠近边界的最优解 学习博客(必须先看这个): 1:http://www.cnblogs.com/autsky-jadek/p/3959446.html 2:http://blog ...

  5. Angularjs 通过WebApi 下载excel

    如果想知道 AngularJs 通过WebAPI 下载Excel.请看下文,这里仅提供了一种方案. 服务器端代码如下: protected HttpResponseMessage GenereateE ...

  6. Java IO3:字符流

    字符流 字节流提供了处理任何类型输入/输出操作的功能(对于计算机而言,一切都是0 和1,只需把数据以字节形式表示就够了),但它们不可以直接操作Unicode字符,一个Unicode字符占用2个字节,而 ...

  7. Android px、dp和sp单位区别

    [转]http://www.cnblogs.com/bjzhanghao/archive/2012/11/06/2757300.html 在调整布局的时候,某些控件的大小需要设置单位: px: 即像素 ...

  8. JS对象与原型链

    每个函数都存在一个prototype的属性,然后这个属性值为一个对象,我们称之为原型对象 每个对象都存在着一个隐藏的属性"__proto__" 这个属性引用了创建这个对象的函数的p ...

  9. ubuntu安装yaf

    ubuntu 下PHP安装yaf扩展,需要先安装其他软件 sudo apt-get install libncurses5-dev libpcre3-dev pcre-devel -y 然后再执行 p ...

  10. 20175312 2018-2019-2 《Java程序设计》第3周学习总结

    20175312 2018-2019-2 <Java程序设计>第3周学习总结 教材学习内容总结 已依照蓝墨云班课的要求完成了第四章的学习,主要的学习渠道是PPT,和书的课后习题. 总结如下 ...