博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
[jQuery]在WCF 4中如何用JSONP轻松实现跨域Ajax请求
阅读量:5257 次
发布时间:2019-06-14

本文共 3524 字,大约阅读时间需要 11 分钟。

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。

 

附上测试项目文件:

 

 



PS:

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

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

你可能感兴趣的文章
Not enough free disk space on disk '/boot'(转载)
查看>>
android 签名
查看>>
vue项目中使用百度统计
查看>>
android:scaleType属性
查看>>
SuperEPC
查看>>
mysql-5.7 innodb 的并行任务调度详解
查看>>
shell脚本
查看>>
Upload Image to .NET Core 2.1 API
查看>>
Js时间处理
查看>>
Java项目xml相关配置
查看>>
三维变换概述
查看>>
vue route 跳转
查看>>
【雷电】源代码分析(二)-- 进入游戏攻击
查看>>
Entityframework:“System.Data.Entity.Internal.AppConfig”的类型初始值设定项引发异常。...
查看>>
Linux中防火墙centos
查看>>
mysql新建用户,用户授权,删除用户,修改密码
查看>>
FancyCoverFlow
查看>>
JS博客
查看>>
如何设置映射网络驱动器的具体步骤和方法
查看>>
ASP.NET WebApi 基于OAuth2.0实现Token签名认证
查看>>