网上有很多文章介绍如何使用jquery调用web service,在同一个域里都没什么问题 运行都是良好的。但在实际的应用中 我们既然已经部署了web
service当然是希望有更多的外部的客户端调用的。而其中就有其他域里的javascript调用web service获取信息的需求。
在网上找了一下 也是有文章介绍的 文章1 文章2 我的解决思路基本上就是从这两篇文章里来的。但使用这两篇文章的时候也碰到了一点问题
所以我使用自己的方式修改了一下。jquery跨域调用asp.net web service,首先要了解的一个概念是 JSONP 链接里有介绍。
总之为了安全 少些网络攻击 钓鱼等,跨域访问是要受到严格限制的。比如
不能跨域使用POST,JQuery调用也需要使用JSONP来传输数据。但由于asp.net 3.5的web
service不内置支持jsonp,碰上很多问题。下面列出我已经测试正确的方法。
首先看客户端JQuery的代码:
-------------------------------------------------------------------------------------------------------------------
<script type="text/javascript"> $(function () { $.ajax({ url: 'http://myserver/Web%20Service/Search.asmx/Search?format=jsonp', data: {'from': 'Oslo', 'to': 'Hamburg', 'type': 1 }, dataType: "jsonp", type: "GET", success: OnSuccess, error: OnError }); }); function OnSuccess(jsondata) { } function OnError (xhr, msg){ }
</script>
------------------------------------------------------------------------------------------------------------------
代码里Jquery ajax的调用使用的type为 "GET",
所以就算在这里指定了contentType也是没有用的,这就是悲剧的源头。上面的代码里要注意的一个地方是在调用的URL里我们添加了一个参数format=jsonp,
这个后面会使用到。然后再是web service的代码:
----------------------------------------------------------------------------------------------------------------
[WebService(Namespace = "http://temp.org/")] [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] [System.Web.Script.Services.ScriptService] public class Search : System.Web.Services.WebService {
[WebMethod(EnableSession=true)] [ScriptMethod(ResponseFormat = ResponseFormat.Json,UseHttpGet=true)] public string Search(string from,string to,int type) {SearchResult result= new SearchResult(); ......return result.toJSON(); }}-------------------------------------------------------------------------------------------------------------------
根据上面的代码 再在web.config里加上下面一句话
------------------------------------------------------------------------------------------------------------------
<system.web>
.......
<webServices> <protocols> <add name="HttpGet"/> <add name="HttpPost"/> </protocols> </webServices></system.web>-----------------------------------------------------------------------------------------------------------------
到这里 如果你跟踪代码执行的话 其实web service的代码调用已经是成功了的,但你是得不到返回值的,如果用firebug查看一下
会有一个错误出现,是jquery解析返回值的时候出错的信息。问题是这样出现的 在web service返回值时 其实没有返回JSONP格式
而是把你生成的string返回值包到了一个xml格式里。在上面提到的两篇文章里
作者都使用了一个HttpModule来拦截Request请求,强制给Request.ContentType赋值为"application/json;
charset=utf-8", 这样web service返回值也是使用json格式返回 然后再在HttpModule包上一个JSONP的外衣也算是大功告成。
但我在实际使用时碰上了一个问题,就是当Request.ContentType="application/json; charset=utf-8"
后,解析我Jquery里Data的参数出现了错误,而上面的文章里也是使用了对URL参数进行进一步的包装之后 才让asp.net web
service解析成功。而我为了使客户端精良的简单使用了另外一个办法就是在web service返回的xml格式的结果时
进行重新包装。当然也是需要添加一个IHttpModule的 代码可以在这里下载。通过这样的改造 jquery就能正确解析出结果了。下面再给出那个.toJSON的代码
-----------------------------------------------------------------------------------------------------------------
public static class Extention { public static string toJSON(this object obj) { string jsonstring = new JavaScriptSerializer().Serialize(obj); return jsonstring;} }
-----------------------------------------------------------------------------------------------------------------
以上代码 实际能用IE8,firefox测试
补充:
web.config 添加配置项目
<httpModules>
<add name="JsonpHttpModule" type="XS.Foundation.AD.WebService.JsonpHttpModule"/>
</httpModules>
原文地址:点击打开链接