10.5 常用proxy
1. MemoryProxy
2. HttpProxy
3. ScriptTagProxy
10.5.1 MemoryProxy
MemoryProxy只能从JavaScript对象获得数据,可以直接把数组,或JSON和XML格式的数据交给它处理,如下面的代码所示:
var proxy = new Ext.data.MemoryProxy([
['id1','name1','descn1'],
['id2','name2','descn2']
]);
10.5.2 HttpProxy
HttpProxy使用HTTP协议,通过Ajax去后台取数据,构造它时需要设置url:'xxx.jsp'参数。这里的url可以替换成任何一个合法的网址,这样HttpProxy才知道去哪里获取数据,如下面的代码所示:
var proxy = new Ext.data.HttpProxy({url:'xxx.jsp'});
后台需要返回EXT所需要的JSON格式的数据,下面的内容就是后台使用JSP的一个范例,如下面的代码所示:
response.setContentType("application/x-json");
Writer out = response.getWriter();
out.print("[" +
"['id1','name1','descn1']" +
"['id2','name2','descn2']" +
"]");
请注意,这里的HttpProxy不支持跨域,它只能从同一域中获得数据。如果想跨域,请参考下面的ScriptTagProxy。
10.5.3 ScriptTagProxy
ScriptTagProxy的用法几乎和HttpProxy一样,如下面的代码所示:
var proxy = new Ext.data.ScriptTagProxy({url:'xxx.jsp'});
从这里也看不出来它是如何支持跨域的,我们还需要在后台进行相应的处理,如下面的代码所示:
String cb = request.getParameter("callback");
response.setContentType("text/javascript");
Writer out = response.getWriter();
out.write(cb + "(");
out.print("[" +
"['id1','name1','descn1']" +
"['id2','name2','descn2']" +
"]");
out.write(");");
其中的关键就在于从请求中获得的callback参数,这个参数叫做回调函数。ScriptTagProxy会在当前的HTML页面里添加一个<script type="text/javascript"src="xxx.jsp"></script>标签,然后把后台返回的内容添加到这个标签中,这样就可以解决跨域访问数据的问题。为了让后台返回的内容可以在动态生成的标签中运行,EXT会生成一个名为callback的回调函数,并把回调函数的名称传递给后台,由后台生成callback(data)形式的响应内容,然后返回给前台自动运行。
虽然上述处理过程比较难理解,但是我们只需要了解ScriptTagProxy的用法就足够了。如果还想进一步了解ScriptTagProxy的运行过程,可以使用Firebug查看动态生成的HTML以及响应的JSON内容。
最后我们来分析一下EXT的API文档中提供的示例,这段后台代码会自动判断请求的类型,返回支持ScriptTagProxy或HttpProxy的数据,如代码清单10-2所示:
代码清单10-2 在后台同时支持HttpProxy和ScriptTagProxy
boolean scriptTag = false;
String cb = request.getParameter("callback");
if (cb != null) {
scriptTag = true;
response.setContentType("text/javascript");
} else {
response.setContentType("application/x-json");
}
Writer out = response.getWriter();
if (scriptTag) {
out.write(cb + "(");
}
out.print(dataBlock.toJsonString());
if (scriptTag) {
out.write(");");
}
代码中通过判断请求中是否包含callback参数来决定返回何种数据类型。如果包含,就返回ScriptTagProxy需要的数据;否则,就当作HttpProxy处理。
分享到:
相关推荐
Extjs 常用属性
ExtJs常用布局--layout详解实例代码: ExtJs常见的布局方式有:border、form、absolute、column、accordion、table、fit、card、anchor 另外,不常见的布局有:tab、vbox、hbox 具体使用方法可见该文件的案例代码。 ...
精心整理的EXTJS常用例子集...是学习EXTJS不可多得的好资料,欲下载,则从速喔!!!
这里主要介绍了ExtJS常用组件的样式修改,包括工具栏样式修改、菜单样式修改、树形菜单样式修改、表格样式修改、按钮样式修改等。
用户信息添加的表单 内有效果图 extjs 常用控件的使用 table layout 作业9
extjs 常用vtype 代码 Ext.VTyps常用vtype大全!
extjs各种组件的详细实现及各种扩展归纳总结,包括各种grid,tree,布局,表单,ajax,弹出框等
extjs 常用函数 getCMP() getDom()
Extjs常用函数和事件.pdf
ExtJs DWR扩展 DWRProxy、DWRTreeLoader、DWRGridProxy,经过EXT3.0版本测试! 通过DWR向Ext提供数据!非常棒的扩展!
ExtJS对表格的数据进行增删改查操作
ExtJs4.2代码例子 ExtJS Window常用方法
下载后图片放在WebRoot下images/ext目录下,css放在css/ext目录下,页面中用引用,xxxxxxxx为主题名称
EXTJS应用EXTJS应用EXTJS应用EXTJS应用EXTJS应用EXTJS应用
extjs资料extjs资料extjs资料extjs资料extjs资料
EXTJS4自学手册——EXT数据结构组件(proxy代理类之客户端代理) EXTJS4自学手册——EXT数据结构组件(proxy代理类之服务器端代理) EXTJS4自学手册——EXT数据结构组件(store) 三、Extjs布局 EXTJS4自学手册——...
1、Extjs3.0 常用组件介绍ppt 2、怎样安装开发利器Spket 3、Spket安装包
第五讲.ExtJs最常用表单组件Number、CheckBox、Radio 第六讲.ExtJs最常用表单组件ComboBox、time、date 第七讲.ExtJS面板Panel 第八讲.EXtJS布局模式-Auto布局、Fit布局、Accordion布局 第九讲.ExtJS布局模式-...
第四讲:extjs4.0的数据代理-Proxy 第五讲:extjs4.0的读写器reader,writer 第六讲:extjs4.0的数据集store 第七讲:extjs4.0的事件机制Event 第八讲:extjs4.0的Ajax 第九讲:extjs4.0的core包和Ext类 第十讲:...