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));//得到的是一個對象
});
}
});
});
});
})();