您的位置：首页 > Web前端 > JavaScript

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

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

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

stcCallback1001({...})

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

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

a.服务端WCF的处理

<!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></title>
<link type="text/css" rel="Stylesheet"  href="../resources/css/ext-all.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all-debug.js"></script>
<style type="text/css">        *{font-size: 9pt;line-height: 120%;}        .red{color: Red;}        h1{font-size:16px;}    </style>
</head>
<body>

<script type="text/javascript">
Ext.onReady(function() {
var proxy = new Ext.data.ScriptTagProxy({
url: 'http://ext.cneds.net/WCF/MyService.svc/GetData3'

//服务端的返回值类似:
//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":""}]})
//其中stcCallback1001中的1001是自动生成的，如果是分页提交的话，每再请求一次1001会变成1002,1003

类推

});
var reader = new Ext.data.JsonReader(
{ root: 'Data', totalProperty: 'RecordCount' },
[
{ name: 'F_ID' },
{ name: 'F_IP' },
{ name: 'F_Date' },
{ name: 'F_Content' }
]
);

var tpl = new Ext.XTemplate(
'<table width="100%">',
'<tpl for="data">', //表明这里开始循环
'<tr><td style="font-weight:bold;color:#666">网友[{F_IP}] {F_Date} 说:</td></tr>', '<tr><td>　　{F_Content}</td></tr>', '<tr><td><hr style="height:1px"/></td></tr>',
'</tpl>', //循环结束
'</table>'
);

var oGrid = Ext.get("page-grid");

//回调函数
function callback(data, arg, success) {
if (success) {
var _returnStr = 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}
//服务端将返回类似上面的字符串，无法直接跟xTemplate绑定，需要转换一下

var oReg = /\"json\":({.*?})/gi;
var oResult = _returnStr.match(oReg);
var s = "";
for (var i = 0; i < oResult.length; i++) {
oResult[i].match(oReg);
s += RegExp.$1 + ",";
}
if (s.length != 0) { s = s.substr(0, s.length - 1); }
s = "{data:[" + s + "]}";
//最终将转换成
//{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":""}]}
var data = eval("(" + s + ")");
tpl.overwrite("page-grid", data);
}
}

oGrid.dom.innerHTML = "加载中

";

proxy.load({ start: 2, limit: 2 }, reader, callback, this);
});
</script>

<div id="page-grid"></div>
</body>
</html>


这里要注意的是:

尝试了多次，发现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":""}]}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航