您的位置：首页 > 产品设计 > UI/UE

如何让WCF服务更好地支持Web Request和AJAX调用

2010-02-28 21:46 489 查看

WCF的确不错，它大大地简化和统一了服务的开发。但也有不少朋友问过我，说是在非.NET客户程序中，有何很好的方法直接调用服务吗？还有就是在AJAX的代码中（js）如何更好地调用WCF服务呢？

我首先比较推荐的是可以通过页面静态方法等方式来转接对WCF的服务。尤其是WCF是属于别的网站的一部分的时候。

但今天我要讲解一下，如果和WCF在一个网站内部，那么js脚本应该如何更好地调用WCF呢？或者说，为了支持js更好地访问，WCF服务在设计的时候应该注意什么呢？

1.创建服务

2.修改接口

为了做演示，我们将默认的那个Operation修改一下

usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Runtime.Serialization;
usingSystem.ServiceModel;
usingSystem.Text;
usingSystem.ServiceModel.Web;
namespaceWebApplication1
{
//注意:如果更改此处的接口名称"INorthwindService"，也必须更新Web.config中对"INorthwindService"的引用。
[ServiceContract]
publicinterfaceINorthwindService
{
[OperationContract]
[WebGet(UriTemplate="HelloWorld")]
stringHelloWorld();
}
}

usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Runtime.Serialization;
usingSystem.ServiceModel;
usingSystem.Text;

namespaceWebApplication1
{
//注意:如果更改此处的类名"NorthwindService"，也必须更新Web.config中对"NorthwindService"的引用。
publicclassNorthwindService:INorthwindService
{

#regionINorthwindService成员

publicstringHelloWorld()
{
return"Hello,world";
}

#endregion
}
}

<system.serviceModel>
<behaviors>
<serviceBehaviors>
<behaviorname="WebApplication1.NorthwindServiceBehavior">
<serviceMetadatahttpGetEnabled="true"/>
<serviceDebugincludeExceptionDetailInFaults="false"/>
</behavior>
</serviceBehaviors>
<endpointBehaviors>
<behaviorname="test">
<webHttp/>
</behavior>
</endpointBehaviors>
</behaviors>
<services>
<servicebehaviorConfiguration="WebApplication1.NorthwindServiceBehavior"
name="WebApplication1.NorthwindService">
<endpointaddress=""binding="webHttpBinding"contract="WebApplication1.INorthwindService"behaviorConfiguration="test">
<identity>
<dnsvalue="localhost"/>
</identity>
</endpoint>
<endpointaddress="mex"binding="mexHttpBinding"contract="IMetadataExchange"/>
</service>
</services>
</system.serviceModel>

usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Runtime.Serialization;
usingSystem.ServiceModel;
usingSystem.Text;
usingSystem.ServiceModel.Web;
namespaceWebApplication1
{
//注意:如果更改此处的接口名称"INorthwindService"，也必须更新Web.config中对"INorthwindService"的引用。
[ServiceContract]
publicinterfaceINorthwindService
{
[OperationContract]
[WebGet(UriTemplate="HelloWorld",ResponseFormat=WebMessageFormat.Json)]
stringHelloWorld();
}
}

<%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="Default.aspx.cs"Inherits="WebApplication1._Default"%>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title></title>

<scriptsrc="jquery-1.3.2-vsdoc.js"type="text/javascript"></script>

<scripttype="text/javascript"language="javascript">
$(function(){
$("#helloWorld").click(function(){
varurl="NorthwindService.svc/HelloWorld";
$.ajax({
url:url,
dataType:"json",
success:function(result){
alert(result);
}
});
});
});
</script>

</head>
<body>
<formid="form1"runat="server">
<inputtype="button"value="HelloWorld"id="helloWorld"/>
</form>
</body>
</html>

usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Runtime.Serialization;
usingSystem.ServiceModel;
usingSystem.Text;
usingSystem.ServiceModel.Web;
namespaceWebApplication1
{
//注意:如果更改此处的接口名称"INorthwindService"，也必须更新Web.config中对"INorthwindService"的引用。
[ServiceContract]
publicinterfaceINorthwindService
{
[OperationContract]
[WebGet(UriTemplate="HelloWorld",ResponseFormat=WebMessageFormat.Json)]
stringHelloWorld();

[OperationContract]
[WebGet(UriTemplate="GetEmployee?id={id}",ResponseFormat=WebMessageFormat.Json)]
EmployeeGetEmployeeInfo(intid);
}

publicclassEmployee{
publicintID{get;set;}
publicstringName{get;set;}
}
}

服务实现

usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Runtime.Serialization;
usingSystem.ServiceModel;
usingSystem.Text;

namespaceWebApplication1
{
//注意:如果更改此处的类名"NorthwindService"，也必须更新Web.config中对"NorthwindService"的引用。
publicclassNorthwindService:INorthwindService
{

#regionINorthwindService成员

publicstringHelloWorld()
{
return"Hello,world";
}

#endregion

#regionINorthwindService成员

publicEmployeeGetEmployeeInfo(intid)
{
returnnewEmployee
{
ID=id,
Name="chenxizhang"
};
}

#endregion
}
}
页面代码

<%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="Default.aspx.cs"Inherits="WebApplication1._Default"%>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title></title>

<scriptsrc="jquery-1.3.2-vsdoc.js"type="text/javascript"></script>

<scripttype="text/javascript"language="javascript">
$(function(){
$("#helloWorld").click(function(){
varurl="NorthwindService.svc/HelloWorld";
$.ajax({
url:url,
dataType:"json",
success:function(result){
alert(result);
}
});
});

$("#getEmployee").click(function(){
varurl="NorthwindService.svc/GetEmployee?id=1";
$.ajax({
url:url,
dataType:"json",
success:function(result){
alert(result.Name);
}
});

});
});
</script>

</head>
<body>
<formid="form1"runat="server">
<inputtype="button"value="HelloWorld"id="helloWorld"/>
<inputtype="button"value="GetEmployee"id="getEmployee"/>
</form>
</body>
</html>

没错，就是这么清晰易懂的代码。

那么，如何实现POST，或者PUT以及DELETE这种请求呢？

9.实现POST或者PUT，DELETE请求

服务合约

usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Runtime.Serialization;
usingSystem.ServiceModel;
usingSystem.Text;
usingSystem.ServiceModel.Web;
namespaceWebApplication1
{
//注意:如果更改此处的接口名称"INorthwindService"，也必须更新Web.config中对"INorthwindService"的引用。
[ServiceContract]
publicinterfaceINorthwindService
{
[OperationContract]
[WebGet(UriTemplate="HelloWorld",ResponseFormat=WebMessageFormat.Json)]
stringHelloWorld();

[OperationContract]
[WebGet(UriTemplate="GetEmployee?id={id}",ResponseFormat=WebMessageFormat.Json)]
EmployeeGetEmployeeInfo(intid);

[OperationContract]
[WebInvoke(UriTemplate="SubmitEmployee?id={id}&Name={name}",ResponseFormat=WebMessageFormat.Json)]
ActionResultSubmitEmployee(intid,stringname);
}

publicclassEmployee{
publicintID{get;set;}
publicstringName{get;set;}
}

publicclassActionResult{
publicintCode{get;set;}
publicstringMessage{get;set;}
}
}

实现服务

usingSystem;
usingSystem.Collections.Generic;
usingSystem.Linq;
usingSystem.Runtime.Serialization;
usingSystem.ServiceModel;
usingSystem.Text;

namespaceWebApplication1
{
//注意:如果更改此处的类名"NorthwindService"，也必须更新Web.config中对"NorthwindService"的引用。
publicclassNorthwindService:INorthwindService
{

#regionINorthwindService成员

publicstringHelloWorld()
{
return"Hello,world";
}

#endregion

#regionINorthwindService成员

publicEmployeeGetEmployeeInfo(intid)
{
returnnewEmployee
{
ID=id,
Name="chenxizhang"
};
}

#endregion

#regionINorthwindService成员

publicActionResultSubmitEmployee(intid,stringname)
{
//这里可以将该员工提交到数据库，并且根据结果返回相应的ActionResult
//作为演示，直接返回

returnnewActionResult
{
Code=200,
Message=string.Format("你提交了一个员工，编号为:{0},姓名为:{1}",id,name)
};
}

#endregion
}
}

页面代码

<%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="Default.aspx.cs"Inherits="WebApplication1._Default"%>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title></title>

<scriptsrc="jquery-1.3.2-vsdoc.js"type="text/javascript"></script>

<scripttype="text/javascript"language="javascript">
$(function(){
$("#helloWorld").click(function(){
varurl="NorthwindService.svc/HelloWorld";
$.ajax({
url:url,
dataType:"json",
success:function(result){
alert(result);
}
});
});

$("#getEmployee").click(function(){
varurl="NorthwindService.svc/GetEmployee?id=1";
$.ajax({
url:url,
dataType:"json",
success:function(result){
alert(result.Name);
}
});

});

$("#submitEmployee").click(function(){
varurl="NorthwindService.svc/SubmitEmployee?id=1&Name=chenxizhang";
$.ajax({
type:"POST",
url:url,
dataType:"json",
success:function(result){
alert(result.Code+","+result.Message);
}
});
});
});
</script>

</head>
<body>
<formid="form1"runat="server">
<inputtype="button"value="HelloWorld"id="helloWorld"/>
<inputtype="button"value="GetEmployee"id="getEmployee"/>
<inputtype="button"value="SubmitEmployee"id="submitEmployee"/>
</form>
</body>
</html>

.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{margin:0em;}
.csharpcode.rem{color:#008000;}
.csharpcode.kwrd{color:#0000ff;}
.csharpcode.str{color:#006080;}
.csharpcode.op{color:#0000c0;}
.csharpcode.preproc{color:#cc6633;}
.csharpcode.asp{background-color:#ffff00;}
.csharpcode.html{color:#800000;}
.csharpcode.attr{color:#ff0000;}
.csharpcode.alt
{
background-color:#f4f4f4;
width:100%;
margin:0em;
}
.csharpcode.lnum{color:#606060;}

.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{margin:0em;}
.csharpcode.rem{color:#008000;}
.csharpcode.kwrd{color:#0000ff;}
.csharpcode.str{color:#006080;}
.csharpcode.op{color:#0000c0;}
.csharpcode.preproc{color:#cc6633;}
.csharpcode.asp{background-color:#ffff00;}
.csharpcode.html{color:#800000;}
.csharpcode.attr{color:#ff0000;}
.csharpcode.alt
{
background-color:#f4f4f4;
width:100%;
margin:0em;
}
.csharpcode.lnum{color:#606060;}

.csharpcode,.csharpcodepre
{
font-size:small;
color:black;
font-family:consolas,"CourierNew",courier,monospace;
background-color:#ffffff;
/*white-space:pre;*/
}
.csharpcodepre{margin:0em;}
.csharpcode.rem{color:#008000;}
.csharpcode.kwrd{color:#0000ff;}
.csharpcode.str{color:#006080;}
.csharpcode.op{color:#0000c0;}
.csharpcode.preproc{color:#cc6633;}
.csharpcode.asp{background-color:#ffff00;}
.csharpcode.html{color:#800000;}
.csharpcode.attr{color:#ff0000;}
.csharpcode.alt
{
background-color:#f4f4f4;
width:100%;
margin:0em;
}
.csharpcode.lnum{color:#606060;}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航