ExtJs学习笔记(23)-ScriptTagProxy+XTemplate+WCF跨域取数据

ajax应用中跨域一直是一个非常麻烦的问题,目前也有一些解决办法,但要么比较麻烦,要么就不具备通用性,幸好ExtJs里的ScriptTagProxy提供了跨域读取数据的功能,而且在几大浏览器上都可以正常运行,但在使用过程中要注意几点:

1.服务端返回时,必须按以下格式返回:

stcCallback1001({...})

其中stcCallback1001中的1001是自动生成的,如果是分页提交的话,每再请求一次1001会变成1002,1003...类推

2.ExtJs官方的示例中虽然ScriptTagProxy的例子并不少,但是就是没有XTemplate+ScriptTagProxy跨域读取的单一功能示例,下面给一个XTemplate跨域读取数据的示例

a.服务端WCF的处理

Code


这里与上一篇http://www.cnblogs.com/yjmyzz/archive/2008/09/10/1288399.html (ExtJs学习笔记(22)-XTemplate + WCF 打造无刷新数据分页)相比,多了一个参数callBack,同时返回类型改为Stream,返回方法的处理参考了老张的http://www.cnblogs.com/jillzhang/archive/2008/07/17/1245458.html(再说ExtJs与WCF之间的跨域访问)一文


b.ExtJs的前端处理

Code

这里要注意的是:

尝试了多次,发现XTemplate不支持多层节点的绑定,即服务端返回的值类似:

stcCallback1001({"RecordCount":6,"PageSize":2,"PageCount":3,"CurrentPageIndex":2,"Data":[{"F_ID":3,"F_IP":"192.168.0.2","F_Date":new Date(1221399073843),"F_Content":"这是第三条留言","F_Reply":""},{"F_ID":4,"F_IP":"172.168.235.1","F_Date":new Date(1221399073843),"F_Content":"这是第四条留言","F_Reply":""}]})

在回调函数里经过Ext.util.JSON.encode(data)处理后,变成了

{"success":true,"records":[{"id":1001,"data":{"F_ID":3,"F_IP":"192.168.0.2","F_Date":"2008-09-14T21:28:28","F_Content":"这是第三条留言"},"json":

{"F_ID":3,"F_IP":"192.168.0.2","F_Date":"2008-09-14T21:28:28","F_Content":"这是第三条留言","F_Reply":""}},{"id":1002,"data":{"F_ID":4,"F_IP":"172.168.235.1","F_Date":"2008

-09-14T21:28:28","F_Content":"这是第四条留言"},"json":{"F_ID":4,"F_IP":"172.168.235.1","F_Date":"2008-09-14T21:28:28","F_Content":"这是第四条留

言","F_Reply":""}}],"totalRecords":6}

虽然也是标准的JSON字符串,但是数据节点是多层次的,XTemplate无法直接读取。所以只能在客户端用JS的正则表达式处理,手动重新组织成XTemplate所需的JSON对象,最终转换成:

{data:[{"F_ID":3,"F_IP":"192.168.0.2","F_Date":"2008-09-14T21:29:55","F_Content":"这是第三条留言","F_Reply":""},{"F_ID":4,"F_IP":"172.168.235.1","F_Date":"2008-09-14T21:29:55","F_Content":"这是第四条留言","F_Reply":""}]}

 

posted @ 2008-09-14 14:01 菩提树下的杨过 阅读(...) 评论(...) 编辑 收藏