成峰

学以致用,实践中学习,学习后实践……
  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

JavaScript调用WCFService方法

Posted on 2008-12-12 20:16  成峰  阅读(3688)  评论(0编辑  收藏  举报

这段时间一直在“研究”(不太好意思用这个词)WCFService,觉得挺好玩的。下面把一个用JavaScript调用WCFService的实例分享给大家。

注:为贪图省事,WCFService与调用者均在一个网站项目里。HostService方式也采用了最普通的IIS承载。

1、新建一个接口,用于约束服务提供的方法。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.Text;
using System.ServiceModel.Web;

// NOTE: If you change the interface name "IAjaxWCFService" here, you must also update the reference to "IAjaxWCFService" in Web.config.
[ServiceContract(Namespace = "SampleAjaxService")]
public interface IAjaxWCFService
{
    [OperationContract]
    [WebGet]
    
string GetMessage();//简单返回提示信息
}

 

2、新建一个类,实现上述接口


using System;
using System.Collections.Generic;
using System.Linq;
using System.Runtime.Serialization;
using System.ServiceModel;
using System.Text;
using System.ServiceModel.Web;

public class AjaxWCFService : IAjaxWCFService
{

    
#region IAjaxWCFService Members

    
public string GetMessage()
    {
        
return "Hello,welcome to wcf Service!";
    }

    
#endregion
}

 

 到此为目ServiceClass算是做好了,剩下的就是:承载Service。

3、新建AjaxWCFService.svc 文件

 

文件内容
<%@ ServiceHost Language="C#" Debug="true" Service="AjaxWCFService" CodeBehind="~/App_Code/AjaxWCFService.cs" %>

 

4、配置Service

<system.serviceModel>
        
<behaviors>
          
<endpointBehaviors>
            
<behavior name="ajaxServiceBehavior">
              
<enableWebScript />
            
</behavior>
          
</endpointBehaviors>
        
</behaviors>
        
<services>
          
<service name="AjaxWCFService">
            
<endpoint address="" behaviorConfiguration="ajaxServiceBehavior"
                
binding="webHttpBinding" contract="IAjaxWCFService" />
          
</service>

        </services>

</system.serviceModel> 

配置时注意:高亮显示部分    

到此为止服务也算是承载起来了,可以在浏览器中查看一下效果。(先庆祝一下)

4、添加 .aspx页面调用已经搭建好的WCF Service

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    
<title>Simple AJAX Service Client Page</title>
    
<script type="text/javascript">
        
// This function creates an asynchronous call to the service
        function Call(operation) {
            
// Instantiate a service proxy
            var proxy = new SampleAjaxService.IAjaxWCFService();
            proxy.GetMessage(onSuccess, onFail, 
null);
        }

        
// This function is called when the result from the service call is received
        function onSuccess(mathResult) {
            document.getElementById(
"divMessage").innerText = mathResult;
        }

        
// This function is called if the service call fails
        function onFail() {
            document.getElementById(
"divMessage").innerText = "Error";
        }
    
</script>
</head>
<body>
    
<h1>
        Simple AJAX Service Client Page
</h1>
    
<br />
    
<br />
    
<input id="btnGetMessage" type="button" onclick="return Call();" value="GetMessage" />
    
<br />
    Result:
    
<div id="divMessage" style="color: Red;">
    
</div>
    
<form id="mathForm" action="" runat="server">
    
<asp:ScriptManager ID="ScriptManager" runat="server">
        
<Services>
            
<asp:ServiceReference Path="AjaxWCFService.svc" />
        
</Services>
    
</asp:ScriptManager>
    
</form>
</body>
</html>

5、运行页面,查看效果。

如果得到以下效果,你就成功了。 

 

运行结果Result:
Hello,welcome to wcf Service!