zoukankan      html  css  js  c++  java
  • [jQuery]在WCF 4中如何用JSONP轻松实现跨域Ajax请求

    WCF 4(based on .NET Framework 4.0) 是我们能够轻松地实现跨域的WCF services访问。接下来我们就一步步讲解如何实现,并说明实现过程中遇到的一些问题和解决方法。

    1,打开Visual Studio 2010,添加一个Web Application或者WCF Service Application,并在项目中添加一个Ajax-enabled WCF service。

    2,修改这个svc文件,如下:

    JSONP.svc
    [ServiceContract(Namespace = "")]
    [AspNetCompatibilityRequirements(RequirementsMode
    = AspNetCompatibilityRequirementsMode.Allowed)]
    //UrlParameterName is the jsonp callback name in the request url.
    [JavascriptCallbackBehavior(UrlParameterName = "jsoncallback")]
    public class JSONP
    {
    [OperationContract]
    [WebGet(ResponseFormat
    = WebMessageFormat.Json)]
    public string JsonPHelloWorld()
    {
    return "Hello World";
    }

    }

    这里有几点需要注意的:

    • 这里的UrlParameterName参数设置为等下jQuery跨域访问时候设置在url中的callback名称。
    • 给需要调用的方法加上WebGet或者WebPost Attribute。如果不加,等下调用会出错的。

    3,打开web.config文件,并作如下修改:

    web.config
    <configuration>
    <system.web>
    <compilation debug="true" targetFramework="4.0" />
    <authentication mode="Forms" />
    </system.web>

    <system.serviceModel>
    <behaviors>

    <endpointBehaviors>
    <behavior name="DebugSite.JSONPAspNetAjaxBehavior">
    <enableWebScript />
    </behavior>
    </endpointBehaviors>

    <serviceBehaviors>
    <behavior name="EnableMetadataBehaviors">
    <serviceMetadata httpGetEnabled="true" />
    <serviceDebug includeExceptionDetailInFaults="true" />
    </behavior>
    </serviceBehaviors>
    </behaviors>


    <bindings>
    <webHttpBinding>
    <!--crossDomainScriptAccessEnabled make the WCF 4 service support the JSONP-->
    <binding name="HttpJsonpBinding" crossDomainScriptAccessEnabled="true"></binding>
    </webHttpBinding>
    </bindings>

    <serviceHostingEnvironment aspNetCompatibilityEnabled="true" multipleSiteBindingsEnabled="true" />

    <services>
    <service name="DebugSite.JSONP" behaviorConfiguration="EnableMetadataBehaviors">
    <endpoint address="" behaviorConfiguration="DebugSite.JSONPAspNetAjaxBehavior" binding="webHttpBinding" bindingConfiguration="HttpJsonpBinding" contract="DebugSite.JSONP" />
    </service>
    </services>
    </system.serviceModel>
    </configuration>

    这里也有几点要注意:

    • bindings/webHttpBinding配置块中的crossDomainScriptAccessEnabled是WCF4中对JSOP的直接支持,在这里设置为true即可。
    • ServiceDebug配置块中的includeExceptionDetailInFaults仅仅只是为了让详细错误信息返回到客户端,可加可不加。
    • 其他一些WCF配置的细节大家就看着办吧。

    4,然后,我们需要把项目部署到IIS上,部署好后,服务器端就完成了。部署方式我在这里就不赘述了,需要注意几点:

    • 添加好站点后,别忘了在部署的文件夹上赋给IIS进程帐户YourComputerName\IIS_IUSRS(IIS7+)或者YourComputerName\IIS_WPG(IIS6)读的权限,如果涉及到写操作,需要写权限。
    • 如果是IIS7,在验证方式上允许匿名访问和Forms验证,其他都Disable。
    • 如果是部署到非80端口,出现远程无法访问的情况,请在防火墙上打开端口支持。

    5,接下来客户端很简单,下载个jQuery库,或者直接用google的或者Microsoft Ajax CDN上的。我这里用的是CDN上的。添加一个HTML页面,代码如下,很简单。

    JSONP_test.html
    <!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>
    <title>JSONP_test</title>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
    <script type="text/javascript">
    function GetServerHelloWorldByJsop() {
    $.getJSON("http://Jerrywengpc/jsonp.svc/JsonPHelloWorld?jsoncallback=?",
    function (data) {
    alert(data);
    });
    }
    </script>
    </head>
    <body>
    <input type="button" onclick="GetServerHelloWorldByJsop()" value="GetTime" />
    </body>
    </html>

    $.getJSON的第一个参数是请求的url,jsoncallback就是刚才我们配置在WCF service contract上的url参数,如果是post数据,可以在url后面第二个参数填post的数据,如 { name: "John", time: "2pm" }, 第三个参数就是回调函数。这个方法类似于重写,所以如果没有第二个参数,不需要写null。

    附上测试项目文件:

    《DOWNLOAD PROJECT》

    

    PS:

    以前的版本需要自己用JavaScriptSerializer序列化数据并返回,以后再细说吧。

  • 相关阅读:
    C#里边的控件缩写大全(比较规范)
    jQuery的一些备忘
    有趣的史实~
    值类型 VS 引用类型~
    一道笔试题和UML思想 ~
    数据绑定以及Container.DataItem几种方式与用法分析
    用户控件与自定义控件的异同
    .NET资源站点汇总~
    C#中抽象类和接口的区别
    弹出窗口的一些东西(一),备忘~
  • 原文地址:https://www.cnblogs.com/JerryWeng/p/1856372.html
Copyright © 2011-2022 走看看