ExtJs与WCF之间的跨域访问

在上一篇文章<<ExtJs+WCF+LINQ实现分页Grid>>中用ExtJs与Wcf交互实现了分页Grid,回复中心有灵犀同学希望能采用跨域访问的方式,这个问题其实也困扰了我很久,本来ExtJS用ScriptTagProxy支持跨域访问的,如果服务端是.aspx的页面文件,也非常好实现,但换作WCF,问题就复杂起来。本文尝试解决这个问题,方案不是很巧妙,但是我对多种方案实验中第一个且是唯一有效的办法。

首先看一下如何用ExtJs中的ScriptTagProxy跨域访问服务器.aspx页面,不是重点,但与为何此种方法不适用WCF相关,所以也赘述下,项目是上文中的项目,下面是实现步骤:

第一步:还是向网站中添加Service.aspx页面,然后将其代码更改如下:

Service.aspx代码

第二步:创建一个htm页面PageGridCrossDomain.htm然后将其代码更改为:

PageGridCrossDomain.htm

 第三步:添加实现跨域分页的脚本文件

PageCrossDomain.js

浏览PageGridCrossDomain.htm,效果图如下:

好,到此用ExtJs跨域调用.aspx的示例已经完成,过程相当简单,效果也比较完美。

但我写此系列的文章,主要目的在于探讨ExtJs与Wcf交互,经过前面几篇的学习,已经对WCF的RestFul和ExtJs的使用有了些皮毛认识,深切体会到ExtJs+Wcf是一种比较不错的编程模型,它与传统的B/S,C/S都不太一样,相比WebForm,它更像是web开发。而且服务的概念也会得以深刻体现,可谓一箭双雕。书写本文之前,我尝试了很多种办法用于ExtJs跨域访问Wcf实现分页Grid,但都没有成功,查阅了ScriptTagProxy的源码方才发现一些端倪,原来ScriptTagProxy是通过动态创建<scipt>的方式实现跨域的,原理可见阿布 的一篇文章:利用script标签实现的跨域名AJAX请求(ExtJS),我也不再赘述,下面给出ScriptTagProxy源码中的一个片段:

这段代码中的 url便是要跨域访问的地址,由此可见url返回的信息必须是完全符合<script></script>格式要求的代码,否则将出现javascript错误,我在前期用ScriptTagProxy调用WCF,总是出现莫名错误,便是缘于此。WCF能返回JSON格式的数据,但这样的数据是不符合变量声明要求的,而察看extjs示例中跨域的相应格式为: strCallback1001({..json数据…}),这样一种格式是声明了一个对象变量strCallback1001,而再看看我们可爱的WCF呢,当我们将其ResponseFormat = WebMessageFormat.Json,而返回PageData<Product[]>,他返回的标准的json数据,不符合要求,而返回string,去掉ResponseFormat = WebMessageFormat.Json,然后在服务方法体中用类似Service.aspx得到json数据的办法得到json数据,然后再通过字符串拼接成js变量声明符合格式要求的数据的时候,再看返回,这次可好,前面无缘无故的给WCF加上了<xml . Type="string">,原来WCF只支持良种编码格式:XML,Json,这时候我就晕了,你说WCF要是支持个ClearText编码格式,那问题不就解决了嘛,唉,没办法,看来想用ScriptTagProxy是不行了。这个问题困扰了我几天。其实此处我觉得WCF是应该有返回ClearText的选项的,不管怎么样,那样更灵活。可没办法,我查了个遍,认识的几个大牛,也问了,都没有确定答案。

上面一段是一些牢骚,既然是牢骚,语法与思路自然有些乱了,但基本上应该说明了ExtJs与WCF跨域交互的障碍了。

下面是我扫除这一障碍的一个笨得不能再笨的方法

第一步:在项目中创建一个页面Proxy.aspx,作为ExtJs与Wcf跨域操作的代理页面。这个页面和ExtJs位于一个位置,并且去除页面中的HTML代码:

后台代码为:

Proxy.aspx.cs

第二步:创建一个ExtJs通过服务代理与Wcf实现跨域交互的htm页面 :PageGridCrossDomainWcf.htm

PageGridCrossDomainWcf.htm

第三步:创建用于ExtJs与Wcf跨域交互的脚本文件:PageGridCrossDoaminWcf.js

PageGridCrossDoaminWcf.js

好了,现在浏览PageGridCrossDomainWcf.htm,效果图如下:

最后,国际惯例,代码示例:

posted @ 2008-07-05 13:46 Robin Zhang 阅读(...) 评论(...) 编辑 收藏