Extjs4.0的Ajax
Ext.Ajax 是Ext.data.Connection的一個子類,提供了用簡單的方式進行Ajax的功能實現
1. 主要方法
Abort :終止一個沒有完成Ajax請求
inLoading:判斷指定的Ajax請求是不是正在運行
paresStatus:返回請求響應的代碼
方便我們重新構建頁面
Load方法
startAutoRefresh方法
1. Ajax的基本應用
2. (function(){
3. Ext.onReady(function(){
4. Ext.Ajax.request({
5. url : 'extLession/ajax08/person.jsp',
6. params :{ id : '01'},//params是一個對象,{}代表的是對象
7. method : 'POST',
8. timeout : 300,
9. success : function(response,options){
10. //疑問:爲什麼response.responseText得到的是一個對象,用點不能去調用呢,彈出的對話框時undifined,而把jsp頁面中的改成數組,在js中用eval去調用就可以
11. alert(eval(response.responseText)[0].name);
12. },
13. failure : function(response,options){
14. //alert(response.responseText+" "+options);
15. }
16. });
17. });
18. })();
2. Ajax中form屬性的應用
3. (function(){
4. Ext.onReady(function(){
5. Ext.get("btn").on("click",function(){
6. Ext.Ajax.request({
7. url : 'extLession/ajax08/person.jsp',
8. params :{ id : '01'},//params是一個對象,{}代表的是對象
9. method : 'POST',
10. timeout : 300,
11. form : 'myform',
12. success : function(response,options){
13. //疑問:爲什麼response.responseText得到的是一個對象,用點不能去調用呢,彈出的對話框時undifined,而把jsp頁面中的改成數組,在js中用eval去調用就可以
14. alert(eval(response.responseText)[0].name);
15. },
16. failure : function(response,options){
17. //alert(response.responseText+" "+options);
18. }
19. });
20. });
21. });
22. })();
23. //以上講的是ajax中form的應用,form的使用在ajax中的request中,當使用form屬性時,表單中不用寫action和submit按鈕,
24. //直接用form可以把表單中的東西傳到後臺,但要注意要在單擊事件的情況下
25. //優點是把控制層和顯示層徹底的分開
3. 學習elementLoder,當點擊按鈕的時候,把系統時間顯示到文本框中
4. (function(){
5. Ext.onReady(function(){
6. Ext.get("btn").on("click",function(){
7. Ext.Ajax.request({
8. url : 'extLession/ajax08/person.jsp',
9. params :{ id : '01'},//params是一個對象,{}代表的是對象
10. method : 'POST',
11. timeout : 300,
12. form : 'myform',
13. success : function(response,options){
14. //疑問:爲什麼response.responseText得到的是一個對象,用點不能去調用呢,彈出的對話框時undifined,而把jsp頁面中的改成數組,在js中用eval去調用就可以
15. alert(eval(response.responseText)[0].name);
16. },
17. failure : function(response,options){
18. //alert(response.responseText+" "+options);
19. }
20. });
21. });
22. });
23. })();
24. //以上講的是ajax中form的應用,form的使用在ajax中的request中,當使用form屬性時,表單中不用寫action和submit按鈕,
25. //直接用form可以把表單中的東西傳到後臺,但要注意要在單擊事件的情況下
26. //優點是把控制層和顯示層徹底的分開
4.二級聯動菜單,用 ajax
(function(){
Ext.onReady(function(){
//二級菜單的聯動,在日常的開發過程中要有前臺的緩存
//增加一個輔助函數,把對象變成dom
function createChild(value,name){
var el = document.createElement("option");
el.setAttribute("value",value);
el.appendChild(document.createTextNode("name"));
return el;
}
//1.得到city這個dom對象,是Element對象
var cityObj = Ext.get("city");
//2.我們未這個city對象註冊一個change
cityObj.on("change",function(e,select){
//3.得到的是改變後的value值
var ids = select.options[select.selectedIndex].value;
//4.ajax 請求把後臺數據拿過來
Ext.Ajax.request({
url : '/extjs/extjs!menu.action',//把所對應的城市的路徑寫上
params : {ids:ids},//ids是時刻變化的
method : 'post',
timeout : 4000,
success : function(response,opts){
var obj = eval(response.responseText);//得到對象,用eval變成數組
//5.得到地區的那個area 的dom
var oldObj = Ext.get("area").dom;
//6.清楚裏面項
while(oldObj.length>0){
oldObj.options.remove(oldObj.length-1);
}
//7.加入新的項
Ext.Array.each(obj,function(o){
Ext.get('area').dom.appendChild(createChild(o.value,o.name));//得到的是一個對象
});
}
});
});
});
})();