原创地址:http://www.cnblogs.com/jfzhu/p/4039604.html
转载请注明出处
前面介绍过《Step by Step 创建一个WCF Service》和《使用WCF的Trace与Message Log功能》,本文介绍一下如何用JavaScript来调用WCF Service。
WCF Service的代码如下:
IHelloService.cs
using System.ServiceModel; using System.ServiceModel.Activation; using System.ServiceModel.Web; namespace HelloService { [ServiceContract(Name = "IHelloService")] public interface IHelloService { [OperationContract(Name="GetMessage")] string GetMessage(string name); [OperationContract] Employee GetEmployee(int id); } }
HelloService.cs
using System; namespace HelloService { public class HelloService : IHelloService { public string GetMessage(string name) { return "Hello " + name; } public Employee GetEmployee(int id) { return new Employee() { Id = id, Name="Neil Klugman", Birthdate=new DateTime(1930, 1, 31)}; } } }
web.config文件,注意高亮部分:
<?xml version="1.0" encoding="utf-8" ?> <configuration> <system.serviceModel> <serviceHostingEnvironment multipleSiteBindingsEnabled="true" /> <services> <service name="HelloService.HelloService" behaviorConfiguration="metaBehavior"> <endpoint address="" binding="webHttpBinding" contract="HelloService.IHelloService" behaviorConfiguration="ajaxServiceBehavior"></endpoint> <endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange"></endpoint> <host> <baseAddresses> <add baseAddress="http://localhost:8080"/> </baseAddresses> </host> </service> </services> <behaviors> <endpointBehaviors> <behavior name="ajaxServiceBehavior"> <enableWebScript/> </behavior> </endpointBehaviors> <serviceBehaviors> <behavior name="metaBehavior"> <serviceDebug includeExceptionDetailInFaults="true" /> <serviceMetadata httpGetEnabled="true" /> </behavior> <behavior name=""> <serviceMetadata httpGetEnabled="true" /> <serviceDebug includeExceptionDetailInFaults="false" /> </behavior> </serviceBehaviors> </behaviors> </system.serviceModel> </configuration>
创建一个客户端web application,添加一个web form,WebForm1.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="HelloWebClient.WebForm1" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>AJAX Service Client Page</title> </head> <body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager" runat="server"> <Services> <asp:ServiceReference Path="http://192.168.6.47:8080/HelloService.svc" /> </Services> </asp:ScriptManager> <script lang="javascript" type="text/javascript"> function GetValueFromServer() { var name = document.getElementById('txtValueContainer').value; tempuri.org.IHelloService.GetMessage(name, onSuccess, onFailure, null); } function onSuccess(result) { document.getElementById('labelResult').value = result; } function onFailure(result) { window.alert(result); } </script> <div> <input id="btnServiceCaller" type="button" value="Get Value" onclick="GetValueFromServer()"; /> <input id="txtValueContainer" type="text" value="" /> <input id="labelResult" type="text" value="" /> </div> </form> </body> </html>
用浏览器打开WebForm1.aspx,使用Fiddler查看,因为代码里有了对WCF Service的引用
<asp:ServiceReference Path="http://192.168.6.47:8080/HelloService.svc" />
所以页面加载了JavaScript
加载的JavaScript代码为:
Type.registerNamespace('tempuri.org'); tempuri.org.IHelloService = function () { tempuri.org.IHelloService.initializeBase(this); this._timeout = 0; this._userContext = null; this._succeeded = null; this._failed = null; } tempuri.org.IHelloService.prototype = { _get_path: function () { var p = this.get_path(); if (p) return p; else return tempuri.org.IHelloService._staticInstance.get_path(); }, GetMessage: function (name, succeededCallback, failedCallback, userContext) { /// <param name="name" type="String">System.String</param> /// <param name="succeededCallback" type="Function" optional="true" mayBeNull="true"></param> /// <param name="failedCallback" type="Function" optional="true" mayBeNull="true"></param> /// <param name="userContext" optional="true" mayBeNull="true"></param> return this._invoke(this._get_path(), 'GetMessage', false, { name: name }, succeededCallback, failedCallback, userContext); }, GetEmployee: function (id, succeededCallback, failedCallback, userContext) { /// <param name="id" type="Number">System.Int32</param> /// <param name="succeededCallback" type="Function" optional="true" mayBeNull="true"></param> /// <param name="failedCallback" type="Function" optional="true" mayBeNull="true"></param> /// <param name="userContext" optional="true" mayBeNull="true"></param> return this._invoke(this._get_path(), 'GetEmployee', false, { id: id }, succeededCallback, failedCallback, userContext); } } tempuri.org.IHelloService.registerClass('tempuri.org.IHelloService', Sys.Net.WebServiceProxy); tempuri.org.IHelloService._staticInstance = new tempuri.org.IHelloService(); tempuri.org.IHelloService.set_path = function (value) { tempuri.org.IHelloService._staticInstance.set_path(value); } tempuri.org.IHelloService.get_path = function () { /// <value type="String" mayBeNull="true">The service url.</value> return tempuri.org.IHelloService._staticInstance.get_path(); } tempuri.org.IHelloService.set_timeout = function (value) { tempuri.org.IHelloService._staticInstance.set_timeout(value); } tempuri.org.IHelloService.get_timeout = function () { /// <value type="Number">The service timeout.</value> return tempuri.org.IHelloService._staticInstance.get_timeout(); } tempuri.org.IHelloService.set_defaultUserContext = function (value) { tempuri.org.IHelloService._staticInstance.set_defaultUserContext(value); } tempuri.org.IHelloService.get_defaultUserContext = function () { /// <value mayBeNull="true">The service default user context.</value> return tempuri.org.IHelloService._staticInstance.get_defaultUserContext(); } tempuri.org.IHelloService.set_defaultSucceededCallback = function (value) { tempuri.org.IHelloService._staticInstance.set_defaultSucceededCallback(value); } tempuri.org.IHelloService.get_defaultSucceededCallback = function () { /// <value type="Function" mayBeNull="true">The service default succeeded callback.</value> return tempuri.org.IHelloService._staticInstance.get_defaultSucceededCallback(); } tempuri.org.IHelloService.set_defaultFailedCallback = function (value) { tempuri.org.IHelloService._staticInstance.set_defaultFailedCallback(value); } tempuri.org.IHelloService.get_defaultFailedCallback = function () { /// <value type="Function" mayBeNull="true">The service default failed callback.</value> return tempuri.org.IHelloService._staticInstance.get_defaultFailedCallback(); } tempuri.org.IHelloService.set_enableJsonp = function (value) { tempuri.org.IHelloService._staticInstance.set_enableJsonp(value); } tempuri.org.IHelloService.get_enableJsonp = function () { /// <value type="Boolean">Specifies whether the service supports JSONP for cross domain calling.</value> return tempuri.org.IHelloService._staticInstance.get_enableJsonp(); } tempuri.org.IHelloService.set_jsonpCallbackParameter = function (value) { tempuri.org.IHelloService._staticInstance.set_jsonpCallbackParameter(value); } tempuri.org.IHelloService.get_jsonpCallbackParameter = function () { /// <value type="String">Specifies the parameter name that contains the callback function name for a JSONP request.</value> return tempuri.org.IHelloService._staticInstance.get_jsonpCallbackParameter(); } tempuri.org.IHelloService.set_path("http://192.168.6.47:8080/HelloService.svc"); tempuri.org.IHelloService.GetMessage = function (name, onSuccess, onFailed, userContext) { /// <param name="name" type="String">System.String</param> /// <param name="succeededCallback" type="Function" optional="true" mayBeNull="true"></param> /// <param name="failedCallback" type="Function" optional="true" mayBeNull="true"></param> /// <param name="userContext" optional="true" mayBeNull="true"></param> tempuri.org.IHelloService._staticInstance.GetMessage(name, onSuccess, onFailed, userContext); } tempuri.org.IHelloService.GetEmployee = function (id, onSuccess, onFailed, userContext) { /// <param name="id" type="Number">System.Int32</param> /// <param name="succeededCallback" type="Function" optional="true" mayBeNull="true"></param> /// <param name="failedCallback" type="Function" optional="true" mayBeNull="true"></param> /// <param name="userContext" optional="true" mayBeNull="true"></param> tempuri.org.IHelloService._staticInstance.GetEmployee(id, onSuccess, onFailed, userContext); } var gtc = Sys.Net.WebServiceProxy._generateTypedConstructor; Type.registerNamespace('jfzhu.com._2014._10._16.Employee'); if (typeof (jfzhu.com._2014._10._16.Employee.Employee) === 'undefined') { jfzhu.com._2014._10._16.Employee.Employee = gtc("Employee:http://jfzhu.com/2014/10/16/Employee"); jfzhu.com._2014._10._16.Employee.Employee.registerClass('jfzhu.com._2014._10._16.Employee.Employee'); }View Code
点击Get Value按钮:
使用Microsoft Service Trace Viewer查看Message Log Trace:
总结:WCF Service的配置文件中的endpoint的binding要使用webHttpBinding,endpointBehavior要设置成enableWebScript。
WebForm中要在ScriptManager中添加WCF Service的引用。