Ext.Ajax 是 Ext.data.Connection的一个子类,提供了用简单的方式进行Ajax的功能实现
1.主要方法
abort : 终止一个没有完成Ajax请求
isLoading : 判断指定的Ajax请求是不是正在运行
paresStatus : 返回请求响应的代码
request : 发送服务器请求 -----> 重点
//eval()
执行括号内部的字符串
如:eval("alert(''hello)")
(function(){
Ext.onReady(function(){
Ext.Ajax.request({
url : 'person.jsp',
params:{id:'01'},
method : 'POST',
timeout :3000,
success :function(response , options){
alert(eval(response.responseText)[0].name);
},
failure :function(response , options){
alert(response.responseText+" "+options)
}
});
})
})()
1.1 Ext.Ajax.request form
person.jsp
html:
<form id="myform">
Name:
<input type="text" name="name">
<br>
Pass:
<input type="password" name="pass">
<br>
<input type="button" value="login" id="b">
</form>
ajaxform.js:
(function(){
Ext.onReady(function(){
Ext.get('b').on("click",function(){
Ext.Ajax.request({
url : 'person.jsp',
params:{id:'01'},
method : 'POST',
timeout :3000,
form:"myform",
success :function(response , options){
alert(eval(response.responseText)[0].name);
},
failure :function(response , options){
alert(response.responseText+" "+options)
}
});
})
})
})()
2.Ext.ElementLoader
方便我们重新构建页面
load方法
http://adminstrator:8080/extjs4/GetTimeServlet
返回内容: 2012年7月1日
JS:
Ext.onReady(function(){
Ext.get('b1').on("click",function(){
var time = Ext.get("time").getLoader();
time.load({
url:'http://adminstrator:8080/extjs4/GetTimeServlet',
renderer:function(loader,response,request){
var time = response.responseText;
Ext.getDom("time").value = time;
}
});
});
});
startAutoRefresh 方法
自动刷新,去后台刷新。
/extjs4/GetIServlet返回:一个累加器 :计数器1,计数器2
Ext.get('b2').on("click",function(){
var i = Ext.get('i').getLoader();
i.startAutoRefresh(1000,{
url:'/extjs4/GetIServlet',
renderer:function(loader,response,request){
var i = response.responseText;
Ext.getDom("i").value = i;
}
});
});
jsonData,属性将字符串参数 按照JSON格式传到后台。
3.多级联动菜单
html:
<select name="city" id="city">
<option value="beij" selected>
北京市
</option>
<option value="tianj">
天津市
</option>
</select>
<select name="area" id="area">
<option value="def" selected>
-----------
</option>
</select>
js:
(function(){
//创建HTMLElement
function createChild(value,name){
var el = document.createElement("option");
el.setAttribute("value",value);
el.appendChild(document.createTextNode(name));
return el;
}
var data = {};
Ext.onReady(function(){
//1.得到city这个dom对象
var cityObj = Ext.get("city");
//2.我们为这个city对象注册一个change
cityObj.on("change",function(e,select){
//3.得到改变后的数值
var ids = select.options[select.selectedIndex].value;
//3.1 他先去前台的缓存变量中查数据,当没有的时候在去后台拿
if(data["city"]){
//直接操作
}else{
//做ajax
}
//4.ajax请求把后台数据拿过来
Ext.Ajax.request({
url:'/extjs4/MenuServlet',
params:{ids:ids},
method:'post',
timeout:4000,
success:function(response,opts){
var obj = eval(response.responseText);
//5.得到地区的哪个对象area DOM
var oldObj = Ext.get("area").dom;
//6.清除里面项
while(oldObj.length>0){
oldObj.innerHTML= "";
}
//7.加入新的项
Ext.Array.each(obj,function(o){
Ext.get('area').dom.appendChild(createChild(o.valueOf(),o.name));
});
//8.把从数据库拿到的数据进行前台页面缓存
}
});
});
});
})();
分享到:
相关推荐
16. extJs 2.0学习笔记(Ajax篇) 38 17. extJs 2.0学习笔记(Ext.data序论篇) 39 18. extJs 2.0学习笔记(Ext.Panel终结篇) 40 19. extJs 2.0学习笔记(事件注册总结篇) 45 20. extJs 2.0学习笔记(Ext.Panel篇一) 48 21....
ExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.doc
16. extJs 2.0学习笔记(Ajax篇) 38 17. extJs 2.0学习笔记(Ext.data序论篇) 39 18. extJs 2.0学习笔记(Ext.Panel终结篇) 40 19. extJs 2.0学习笔记(事件注册总结篇) 45 20. extJs 2.0学习笔记(Ext.Panel篇一) 48 21....
Extjs 5 学习笔记,在网上下载整理好的。
extjs学习笔记, 对应的书籍是extjs in action 没有看完...呵呵
Extjs4.0学习笔记,以下是部分介绍: xtjs4,创建Ext组件有了新的方式,就是...ExtJS4学习笔记(八)---Grid多选/全选 ExtJS4学习笔记(九)---ExtJS4 EditGrid(可编辑的Grid) ExtJS4学习笔记(十)---ExtJS4图片验证码的实现
EXTJS 学习笔记 ROY EXTJS学习笔记,自己学习的过程,不多但是实用
适合ExtJs开发人员extjs技术上手以及深入
根据word做的pdf版本的ExtJs学习笔记,根据原版进行了删减,欢迎大家下载啊,哈哈。
ExtJs简明教程+Extjs学习笔记,来源网络,免费奉送,我讨厌需要资源分~
老师整理的extjs学习笔记,和大家共享
是我学习Extjs 的学习笔记收藏整理,学习extjs的同学可以好好看看,绝对有好处,学到很多知识!
语言程序设计资料:ExtJs学习笔记-2积分.doc
extJs学习笔记,让新手能够快速理解extJS的原理,深人浅出的了解extjs的精髓。
非常适合新手学习extjs的笔记,让你少走弯路
自己总结的extjs4学习笔记,自己总结的extjs4学习笔记,自己总结的extjs4学习笔记,
EXTJS学习笔记!亲,初学者的必备哦,其中还有部分的Aop、Hibernate