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

转载于:https://www.cnblogs.com/JerryWeng/archive/2010/10/20/1856372.html