Javascript 调用自宿主WCF(invoke self hosted wcf from js/ajax)

 

Javascript 调用自宿主WCFinvoke self hosted wcf from js/ajax)

ASP.NetMS已经集成了WCF方式的WebService,这样利用Ajax Enabled WCf就可以轻松的实现JS调用WCf功能。

但是在某些特定环境下(例如WebGame后台服务器程序)我们需要利用JS直接调用非IIS宿主的WCF服务,如果你Google过,就会发现在网上找到的大多数方案都是利用ASP.NET充当一个代理(先利用ASP.NET调用一次,再在ASP.NET网站中封装一下,以便JS调用)。这样做的好处是可以解决跨域访问的问题,并且调用起来也挺简单的。

下面,我们通过实例来说明如何利用JS直接调用非IIS宿主的WCFJS调用WCF无非要解决两个问题,1.如何获取JS代理类,2.如何解决跨域问题。今天主要解决第1个问题,关于跨域问题会在后面的文章中加以解决(利用JSONP)。

1.        建立一个自宿主WCFself hosted wcf

建立一个WCf服务器,其中包括一个函数,如下所示:

namespace WCFTest

{

    [ServiceContract]

    public interface IService1

    {

        [OperationContract]

        string GetHello(string uid);

    }

    public class Service1 : IService1

    {

 

        #region IService1 Members

 

        public string GetHello(string uid)

        {

            return "hello " + uid;

        }

 

        #endregion

    }

}

2.        在一个Windows窗口程序中启动该服务器,代码如下:

private void Form1_Load(object sender, EventArgs e)

        {

            ServiceHost host = new ServiceHost(typeof (Service1));

            host.Open();

        }

 

3.        App.config中查看该WCF的网址,并运行主程序

4.        在浏览器打开WCF的网站,如下图所示:

 

 

大家知道,如果在ASP.NET中添加WCF模板,IDE会自动为我们生成一个svc文件,而JS的代理类正是通过这个SVC文件得到的,但是在刚才生成的WCF中是无法得到SVC文件以及JS的代理类的,这样就无法被JS所调用,如何解决呢?让我们先来看一下在ASP.NET中添加了一个WCF后,Web.Config是如何配置的,如下所示:

<system.serviceModel>

        <behaviors>

            <endpointBehaviors>

                <behavior name="ServiceAspNetAjaxBehavior">

                    <enableWebScript />

                behavior>

            endpointBehaviors>

        behaviors>

        <serviceHostingEnvironment aspNetCompatibilityEnabled="true"

            multipleSiteBindingsEnabled="true" />

        <services>

            <service name="Service">

                <endpoint address="" behaviorConfiguration="ServiceAspNetAjaxBehavior"

                    binding="webHttpBinding" contract="Service" />

            service>

        services>

    system.serviceModel>

关键就在于该服务绑定了webHttpBinding,并且在其行为中(ServiceAspNetAjaxBehavior启用了EnableWebScript

再看一下刚才那个WCF程序的App.Config文件,如下所示:

<system.serviceModel>

        <behaviors>

            <serviceBehaviors>

                <behavior name="">

                    <serviceMetadata httpGetEnabled="true" />

                    <serviceDebug includeExceptionDetailInFaults="false" />

                behavior>

            serviceBehaviors>

        behaviors>

        <services>

            <service name="WCFTest.Service1">

                <endpoint address="" binding="wsHttpBinding" contract="WCFTest.IService1">

                    <identity>

                        <dns value="localhost" />

                    identity>

                endpoint>

                <endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange" />

                <host>

                    <baseAddresses>

                        <add baseAddress="http://localhost:8732/Design_Time_Addresses/WCFTest/Service1/" />

                    baseAddresses>

                host>

            service>

        services>

    system.serviceModel>

并不难发现该WCF服务使用的是wsHttpBinding, 参照ASP.NET中的WCf将该WCF的配置文件进行修改,修改后如下所示:

<system.serviceModel>

        <behaviors>

          <endpointBehaviors  >

            <behavior name ="MyBehavior">

              <enableWebScript/>

            behavior>

          endpointBehaviors>

            <serviceBehaviors>

                <behavior name="">

                    <serviceMetadata httpGetEnabled="true" />

                    <serviceDebug includeExceptionDetailInFaults="false" />

                behavior>

            serviceBehaviors>

        behaviors>

        <services>

            <service name="WCFTest.Service1">

                <endpoint address="" binding="wsHttpBinding" contract="WCFTest.IService1">

                    <identity>

                        <dns value="localhost" />

                    identity>

                endpoint>

            < contract="WCFTest.IService1" binding="webHttpBinding">

                        address ="http://localhost/WCFTest"

                         behaviorConfiguration ="MyBehavior"

                        >

                <endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange" />

                <host>

                    <baseAddresses>

                        <add baseAddress="http://localhost:8732/Design_Time_Addresses/WCFTest/Service1/" />

                    baseAddresses>

                host>

            service>

        services>

注意,这里是添加了一个EndPoint,并将其使用的协议设置为WebHttpBinding(如加粗位置所示),当然这里也体现出WCF可以多协议绑定的方便之处。

现在可以尝试启动该WCF服务了,启动之后,输入如下网址:http://localhost/WCFTest/js,浏览器便会提示下载一个JS文件(没有扩展名的),如下图所示:

 

 

有了前面的准备,我们就可以在相同的域内(IP相同,端口也要相同)访问非IISWCF了。过程如下:

1.        寻立一个ASP.NET网站

2.        在页面中添加一个ScriptManager,基代码如下:

<asp:ScriptManager ID="ScriptManager1" runat="server">

            <Scripts>

                <asp:ScriptReference Path="http://localhost/WCFTest/js" />

            Scripts>

        asp:ScriptManager>

3.        添加JS代码以及HTML代码来完善功能

页面代码如下所示:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

 

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title> title>

    <script language="javascript" type="text/javascript">

// </font></font></font></p> <p style="margin: 0pt">&nbsp;</p> <p style="margin: 0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <font face="nsimsun"><font color="#0000ff"><font size="2">function</font></font></font><font face="nsimsun"><font size="2"> Button1_onclick() {</font></font></p> <p style="margin: 0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <font face="nsimsun"><font color="#0000ff"><font size="2">var</font></font></font><font face="nsimsun"><font size="2"> userName = $get(</font></font><font face="nsimsun"><font color="#800000"><font size="2">"Text1"</font></font></font><font face="nsimsun"><font size="2">).value;</font></font></p> <p style="margin: 0pt"><font face="nsimsun"><font size="2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; tempuri.org.IService1.GetHello(userName, </font></font><font face="nsimsun"><font color="#0000ff"><font size="2">function</font></font></font><font face="nsimsun"><font size="2"> (result) {</font></font></p> <p style="margin: 0pt"><font face="nsimsun"><font size="2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; alert(result );</font></font></p> <p style="margin: 0pt"><font face="nsimsun"><font size="2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; });</font></font></p> <p style="margin: 0pt"><font face="nsimsun"><font size="2">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }</font></font></p> <p style="margin: 0pt">&nbsp;</p> <p style="margin: 0pt"><font face="nsimsun"><font color="#006400"><font size="2">// ]]&gt;</font></font></font></p> <p style="margin: 0pt">&nbsp;&nbsp;&nbsp; <font face="nsimsun"><font color="#0000ff"><font size="2"></< font></font></font><font face="nsimsun"><font color="#800000"><font size="2">script</font></font></font><font face="nsimsun"><font color="#0000ff"><font size="2">&gt;</font></font></font></p> <p style="margin: 0pt"><font face="nsimsun"><font color="#0000ff"><font size="2"></< font></font></font><font face="nsimsun"><font color="#800000"><font size="2">head</font></font></font><font face="nsimsun"><font color="#0000ff"><font size="2">&gt;</font></font></font></p> <p style="margin: 0pt"><font face="nsimsun"><font color="#0000ff"><font size="2">&lt;</font></font></font><font face="nsimsun"><font color="#800000"><font size="2">body</font></font></font><font face="nsimsun"><font color="#0000ff"><font size="2">&gt;</font></font></font></p> <p style="margin: 0pt">&nbsp;&nbsp;&nbsp; <font face="nsimsun"><font color="#0000ff"><font size="2">&lt;</font></font></font><font face="nsimsun"><font color="#800000"><font size="2">form</font></font></font> <font face="nsimsun"><font color="#ff0000"><font size="2">id</font></font></font><font face="nsimsun"><font color="#0000ff"><font size="2">="form1"</font></font></font> <font face="nsimsun"><font color="#ff0000"><font size="2">runat</font></font></font><font face="nsimsun"><font color="#0000ff"><font size="2">="server"&gt;</font></font></font></p> <p style="margin: 0pt">&nbsp;&nbsp;&nbsp; <font face="nsimsun"><font color="#0000ff"><font size="2">&lt;</font></font></font><font face="nsimsun"><font color="#800000"><font size="2">div</font></font></font><font face="nsimsun"><font color="#0000ff"><font size="2">&gt;</font></font></font></p> <p style="margin: 0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <font face="nsimsun"><font color="#0000ff"><font size="2">&lt;</font></font></font><font face="nsimsun"><font color="#800000"><font size="2">asp</font></font></font><font face="nsimsun"><font color="#0000ff"><font size="2">:</font></font></font><font face="nsimsun"><font color="#800000"><font size="2">ScriptManager</font></font></font> <font face="nsimsun"><font color="#ff0000"><font size="2">ID</font></font></font><font face="nsimsun"><font color="#0000ff"><font size="2">="ScriptManager1"</font></font></font> <font face="nsimsun"><font color="#ff0000"><font size="2">runat</font></font></font><font face="nsimsun"><font color="#0000ff"><font size="2">="server"&gt;</font></font></font></p> <p style="margin: 0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <font face="nsimsun"><font color="#0000ff"><font size="2">&lt;</font></font></font><font face="nsimsun"><font color="#800000"><font size="2">Scripts</font></font></font><font face="nsimsun"><font color="#0000ff"><font size="2">&gt;</font></font></font></p> <p style="margin: 0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <font face="nsimsun"><font color="#0000ff"><font size="2">&lt;</font></font></font><font face="nsimsun"><font color="#800000"><font size="2">asp</font></font></font><font face="nsimsun"><font color="#0000ff"><font size="2">:</font></font></font><font face="nsimsun"><font color="#800000"><font size="2">ScriptReference</font></font></font> <font face="nsimsun"><font color="#ff0000"><font size="2">Path</font></font></font><font face="nsimsun"><font color="#0000ff"><font size="2">="http://localhost/WCFTest/js"</font></font></font> <font face="nsimsun"><font color="#0000ff"><font size="2">/&gt;</font></font></font></p> <p style="margin: 0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <font face="nsimsun"><font color="#0000ff"><font size="2"></< font></font></font><font face="nsimsun"><font color="#800000"><font size="2">Scripts</font></font></font><font face="nsimsun"><font color="#0000ff"><font size="2">&gt;</font></font></font></p> <p style="margin: 0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <font face="nsimsun"><font color="#0000ff"><font size="2"></< font></font></font><font face="nsimsun"><font color="#800000"><font size="2">asp</font></font></font><font face="nsimsun"><font color="#0000ff"><font size="2">:</font></font></font><font face="nsimsun"><font color="#800000"><font size="2">ScriptManager</font></font></font><font face="nsimsun"><font color="#0000ff"><font size="2">&gt;</font></font></font></p> <p style="margin: 0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <font face="nsimsun"><font color="#0000ff"><font size="2">&lt;</font></font></font><font face="nsimsun"><font color="#800000"><font size="2">input</font></font></font> <font face="nsimsun"><font color="#ff0000"><font size="2">id</font></font></font><font face="nsimsun"><font color="#0000ff"><font size="2">="Text1"</font></font></font> <font face="nsimsun"><font color="#ff0000"><font size="2">type</font></font></font><font face="nsimsun"><font color="#0000ff"><font size="2">="text"</font></font></font> <font face="nsimsun"><font color="#0000ff"><font size="2">/&gt;&lt;</font></font></font><font face="nsimsun"><font color="#800000"><font size="2">input</font></font></font> <font face="nsimsun"><font color="#ff0000"><font size="2">id</font></font></font><font face="nsimsun"><font color="#0000ff"><font size="2">="Button1"</font></font></font> <font face="nsimsun"><font color="#ff0000"><font size="2">type</font></font></font><font face="nsimsun"><font color="#0000ff"><font size="2">="button"</font></font></font></p> <p style="margin: 0pt">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <font face="nsimsun"><font color="#ff0000"><font size="2">value</font></font></font><font face="nsimsun"><font color="#0000ff"><font size="2">="button"</font></font></font> <font face="nsimsun"><font color="#ff0000"><font size="2">onclick</font></font></font><font face="nsimsun"><font color="#0000ff"><font size="2">="return Button1_onclick()"</font></font></font> <font face="nsimsun"><font color="#0000ff"><font size="2">/&gt;</< font></font></font><font face="nsimsun"><font color="#800000"><font size="2">div</font></font></font><font face="nsimsun"><font color="#0000ff"><font size="2">&gt;</font></font></font></p> <p style="margin: 0pt">&nbsp;&nbsp;&nbsp; <font face="nsimsun"><font color="#0000ff"><font size="2"></< font></font></font><font face="nsimsun"><font color="#800000"><font size="2">form</font></font></font><font face="nsimsun"><font color="#0000ff"><font size="2">&gt;</font></font></font></p> <p style="margin: 0pt"><font face="nsimsun"><font color="#0000ff"><font size="2"></< font></font></font><font face="nsimsun"><font color="#800000"><font size="2">body</font></font></font><font face="nsimsun"><font color="#0000ff"><font size="2">&gt;</font></font></font></p> <p style="margin: 0pt"><font face="nsimsun"><font color="#0000ff"><font size="2"></< font></font></font><font face="nsimsun"><font color="#800000"><font size="2">html</font></font></font><font face="nsimsun"><font color="#0000ff"><font size="2">&gt;</font></font></font></p> <p style="margin: 0pt">&nbsp;</p> <p style="text-align: justify; margin: 0pt 0pt 0pt 39pt"><font face="'times new roman'"><font size="3">4.</font></font>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <font face="'times new roman'"><font size="3">运行结果,如下所示:</font></font></p> <p style="text-align: justify; margin: 0pt 0pt 0pt 39pt">&nbsp;</p> <p style="text-align: center; margin: 0pt 0pt 0pt 39pt"><img alt="height=302" src="http://docs.google.com/File?id=dgsr497v_117c7rwphg9_b" width="336"></p></div><div id="MySignature"></div> <div class="clear"></div> <div id="blog_post_info_block"> <div id="BlogPostCategory"></div> <div id="EntryTag"></div> <div id="blog_post_info"> </div> <div class="clear"></div> <div id="post_next_prev"></div> </div> </div> <div class="postfoot"> posted on <span id="post-date">2010-03-07 19:45</span> <a href='http://www.cnblogs.com/warensoft/'>王宇 warensoft</a> 阅读(<span id="post_view_count">...</span>) 评论(<span id="post_comment_count">...</span>) <a href ="http://i.cnblogs.com/EditPosts.aspx?postid=1680313" rel="nofollow">编辑</a> <a href="#" onclick="AddToWz(1680313);return false;">收藏</a> </div> </div> <script type="text/javascript">var allowComments=true,isLogined=false,cb_blogId=67387,cb_entryId=1680313,cb_blogApp=currentBlogApp,cb_blogUserGuid='914be4c6-c6ee-de11-ba8f-001cf0cd104b',cb_entryCreatedDate='2010/3/7 19:45:00';loadViewCount(cb_entryId);</script> </div><a name="!comments"></a><div id="blog-comments-placeholder"></div><script type="text/javascript">var commentManager = new blogCommentManager();commentManager.renderComments(0);</script> <div id="comment_form" class="commentform"> <a name="commentform"></a> <div id="divCommentShow"></div> <div id="comment_nav"><span id="span_refresh_tips"></span><a href="javascript:void(0);" id="lnk_RefreshComments" onclick="return RefreshCommentList();">刷新评论</a><a href="#" onclick="return RefreshPage();">刷新页面</a><a href="#top">返回顶部</a></div> <div id="comment_form_container"></div> <div class="ad_text_commentbox" id="ad_text_under_commentbox"></div> <div id="site_nav_under"><a href="http://www.cnblogs.com/" target="_blank" title="开发者的网上家园">博客园首页</a><a href="http://q.cnblogs.com/" target="_blank" title="程序员问答社区">博问</a><a href="http://news.cnblogs.com/" target="_blank" title="IT新闻">新闻</a><a href="http://home.cnblogs.com/ing/" target="_blank">闪存</a><a href="http://job.cnblogs.com/" target="_blank">程序员招聘</a><a href="http://kb.cnblogs.com/" target="_blank">知识库</a></div> <div id="opt_under_post"></div> <script type="text/javascript"> var enableGoogleAd = canShowAdsense(); fixPostBodyFormat(); </script> <script type='text/javascript'> var googletag = googletag || {}; googletag.cmd = googletag.cmd || []; (function () { if (enableGoogleAd) { var gads = document.createElement('script'); gads.async = true; gads.type = 'text/javascript'; var useSSL = 'https:' == document.location.protocol; gads.src = (useSSL ? 'https:' : 'http:') + '//www.googletagservices.com/tag/js/gpt.js'; var node = document.getElementsByTagName('script')[0]; node.parentNode.insertBefore(gads, node); } })(); </script> <script type='text/javascript'> try { if (enableGoogleAd) { googletag.cmd.push(function() { googletag.defineSlot('/1090369/cnblogs_blogpost_C2', [468, 60], 'div-gpt-ad-1433581717989-0').addService(googletag.pubads()); googletag.defineSlot('/1090369/cnblogs_blogpost_C1_sitehome', [300, 250], 'div-gpt-ad-1433581717989-1').addService(googletag.pubads()); googletag.pubads().enableSingleRequest(); googletag.pubads().collapseEmptyDivs(); googletag.enableServices(); }); }; } catch (e) { } </script> <div id="google_ad_c1" class="c_ad_block"> <div id='div-gpt-ad-1433581717989-1' style='height:250px; width:300px;'> <script type='text/javascript'> try { if (enableGoogleAd) { googletag.cmd.push(function () { googletag.display('div-gpt-ad-1433581717989-1'); }); } else { $('#div-gpt-ad-1433581717989-1').hide(); } } catch (e) { } </script> </div> </div> <div id="under_post_news"></div> <div id="google_ad_c2" class="c_ad_block"> <div id='div-gpt-ad-1433581717989-0' style='height:60px; width:468px;'> <script type='text/javascript'> try { if (enableGoogleAd) { googletag.cmd.push(function () { googletag.display('div-gpt-ad-1433581717989-0'); }); } else { $('#div-gpt-ad-1433581717989-0').hide(); } } catch (e) { } </script> </div> </div> <div id="under_post_kb"></div> <div id="HistoryToday" class="c_ad_block"></div> <script type="text/javascript"> $(function () { loadNewsAndKb(); loadBlogSignature(); LoadPostInfoBlock(cb_blogId, cb_entryId, cb_blogApp, cb_blogUserGuid); GetPrevNextPost(cb_entryId, cb_blogId, cb_entryCreatedDate); loadOptUnderPost(); GetHistoryToday(cb_blogId, cb_blogApp, cb_entryCreatedDate); setTimeout(function () { incrementViewCount(cb_entryId); }, 200); }); </script> </div> </div> <div class="footer"> <p id="footer"> Powered by: <br /> <a id="Footer1_Hyperlink3" NAME="Hyperlink1" href="http://www.cnblogs.com/" style="font-family:Verdana;font-size:12px;">博客园</a> <br /> Copyright &copy; 王宇 warensoft </p> </div> </body> </html>

你可能感兴趣的:(JavaScript)