[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序列化数据并返回,以后再细说吧。

posted @ 2010-10-20 12:08  万力王  阅读(...)  评论(...编辑  收藏