EXTJS4.0的Ajax

原創 jimode2013 2018-09-11 05:37

 Ext.Ajax是Ext.data.Connection的一個子類，提供了用簡單的方式進行Ajax的功能實現

1.主要方法
    abort:終止一個沒有完成的Ajax請求
    isLoading:判斷指定的Ajax請求是不是正在進行
    paresStatus:返回請求響應的代碼
    request：發送服務端請求
2.Ext.ElementLoader(對頁面中DOM元素添加事件)
   方便我們重新構建頁面
   load方法
   startAutoRefresh方法
3.多級聯動菜單
------------------------------------------------------------------------------------
下面這個例子主要講了Ext.Ajax.request方法
request.js
  1. (function(){ 
  2.    Ext.onReady(function(){ 
  3.       Ext.Ajax.request({ 
  4.          url:'person.jsp', 
  5.          params:{id:'01'}, 
  6.          method:'POST', 
  7.          timeout:3000, 
  8.          success:function(response,options){ 
  9.             console.log(eval(response.responseText)[0].name); 
  10.          }, 
  11.          failure:function(response,options){ 
  12.              console.log(response.responseText,options); 
  13.          } 
  14.       });//靜態方法 
  15.    }); 
  16.  
  17. })(); 
person.jsp
  1. <%@page language="java" contentType="text/html" pageEncoding="UTF-8"%> 
  2. <% 
  3.    String id = request.getParameter("id"); 
  4.    System.out.println(); 
  5.    if("01".equals(id)){ 
  6.       response.getWriter().write("[{id:'01',name:'uspcat.com',age:'26',email:'[email protected]'}]"); 
  7.    } 
  8. %> 
運行結果如下：
 
uspcat.com
-----------------------------------------------------------------------------------
下面主要講Ext.Ajax.request的form參數，會把表單傳遞過去
ajaxform.js
  1. (function(){ 
  2.    Ext.onReady(function(){ 
  3.       Ext.get('b').on('click',function(){ 
  4.        Ext.Ajax.request({ 
  5.               url:'person.jsp', 
  6.               params:{id:'01'}, 
  7.               method:'POST', 
  8.               timeout:3000, 
  9.               form:"myform", 
  10.               success:function(response,options){ 
  11.              console.log(eval(response.responseText)[0].name); 
  12.                }, 
  13.               failure:function(response,options){ 
  14.              console.log(response.responseText,options + "  " + options ); 
  15.               } 
  16.             });//靜態方法 
  17.  
  18.       }); 
  19.  
  20.    }); 
  21.  
  22. })(); 
lesson8_2.html
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  5. <title>ajax</title> 
  6. <link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/> 
  7. <script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script> 
  8. <script type="text/javascript" src="ajaxform.js"></script> 
  9. </head> 
  10. <body> 
  11. <form id="myform"> 
  12.    Name:<input type="text" name="name"/><br/> 
  13.    Pass:<input type="password" name="pass"/><br/> 
  14.    <input type="button" value="login" id="b"> 
  15. </form> 
  16. </body> 
  17. </html> 
運行結果如下：

-----------------------------------------------------------------------------------
下面主要講Ext.Ajax.request的jsonData參數
jsonData.js
  1. (function(){ 
  2.    Ext.onReady(function(){ 
  3.       var data = "[{id:'01',name:'uspcat.com',age:'26',email:'[email protected]'}]"; 
  4.       Ext.Ajax.request({ 
  5.          url:'person2.jsp', 
  6.          method:'POST', 
  7.          timeout:3000, 
  8.          jsonData:data,//向後臺傳的參數 
  9.          success:function(response,options){   
  10.            console.log(eval(response.responseText)[0].name); 
  11.          }, 
  12.          failure:function(response,options){ 
  13.        console.log(response.responseText,options); 
  14.          } 
  15.       });//靜態方法 
  16.    }); 
  17.  
  18. })(); 
person2.jsp
  1. <%@page language="java" contentType="text/html" pageEncoding="UTF-8"%> 
  2. <% 
  3.       response.getWriter().write("[{id:'01',name:'uspcat.com',age:'26',email:'[email protected]'}]"); 
  4. %> 
運行結果如下：

------------------------------------------------------------------------------------
這個例子主要講dom元素的load方法
elementLoader.js
  1. Ext.onReady(function(){ 
  2.   Ext.get('b1').on('click',function(){ 
  3.     var time = Ext.get('time').getLoader();//Ext.ElementLoader 
  4.     time.load({ 
  5.        url:'elementLoader.jsp', 
  6.        renderer:function(loader,response,request){ 
  7.           console.log(response.responseText); 
  8.           var time = response.responseText; 
  9.           Ext.getDom("time").value = time; 
  10.        } 
  11.     });  
  12.  }); 
  13.  
  14. }); 
lesson8_3.html
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  5. <title>ajax</title> 
  6. <link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/> 
  7. <script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script> 
  8. <script type="text/javascript" src="elementLoader.js"></script> 
  9. </head> 
  10. <body> 
  11. <input type="text" name="time" id="time"/><br/> 
  12. <input type="button" value="get time" id="b1"/> 
  13. </body> 
  14. </html> 
elementLoader.jsp
  1. <%@page language="java" import="java.util.*" contentType="text/html" pageEncoding="UTF-8"%> 
  2. <% 
  3.    response.setCharacterEncoding("UTF-8"); 
  4.    response.getWriter().write("2011年03月10日"); 
  5. %> 
運行結果：

---------------------------------------------------------------------------------
下面主要講dom元素的getLoader和startAutoRefresh方法
elementLoaderStartAutoRefresh.js
  1. Ext.onReady(function(){ 
  2.    Ext.get("btn").on("click",function(){//Ext.ElementLoader 
  3.       //對每個對象可以設置各種事件 
  4.       var i = Ext.get('i').getLoader(); 
  5.       i.startAutoRefresh(1000,{ 
  6.      url:'elementLoaderStartAutoRefresh.jsp', 
  7.          renderer:function(loader,response,request){ 
  8.           console.log(response.responseText); 
  9.           var i = response.responseText; 
  10.           Ext.getDom("i").value = i; 
  11.         } 
  12.        }); 
  13.    }); 
  14.  
  15. }); 
lesson8_4.html
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  5. <title>ajax</title> 
  6. <link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/> 
  7. <script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script> 
  8. <script type="text/javascript" src="elementLoaderStartAutoRefresh.js"></script> 
  9. </head> 
  10. <body> 
  11. <input type="text" name="i" id="i"/><br/> 
  12. <input type="button" value="get i" id="btn"/> 
  13. </body> 
  14. </html> 
elementLoaderStartAutoRefresh.jsp
  1. <%@page language="java" import="java.util.*" contentType="text/html" pageEncoding="UTF-8"%> 
  2. <% 
  3.    int i = 0; 
  4.    if(session.getAttribute("i")!=null){ 
  5.     i = Integer.parseInt(session.getAttribute("i").toString()) + 1; 
  6.     session.setAttribute("i",i); 
  7.    }else{ 
  8.     session.setAttribute("i",i); 
  9.    } 
  10.    response.setCharacterEncoding("UTF-8"); 
  11.    response.getWriter().write("計算器：" + i++); 
  12. %> 
運行結果如下：

----------------------------------------------------------------------------------
聯動菜單
lesson8_5.html
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> 
  5. <title>ajax</title> 
  6. <link rel="stylesheet" type="text/css" href="../extjs-4.1.0/resources/css/ext-all.css"/> 
  7. <script type="text/javascript" src="../extjs-4.1.0/bootstrap.js"></script> 
  8. <script type="text/javascript" src="menu.js"></script> 
  9. </head> 
  10. <body> 
  11. <select name="city" id="city"> 
  12.   <option value="beijing" selected>北京市</option> 
  13.   <option value="tianjing">天津市</option> 
  14. </select><br/> 
  15. <select name="area" id="area"> 
  16.   <option value="def" selected>----------</option> 
  17. </select> 
  18. </body> 
  19. </html> 
menu.js
  1. (function(){ 
  2.   Ext.onReady(function(){ 
  3.  
  4.       function createChild(value,name){ 
  5.         var el = document.createElement("option"); 
  6.         el.setAttribute("value",value); 
  7.         el.appendChild(document.createTextNode(name)); 
  8.         return el; 
  9.       } 
  10.       //1.得到city這個dom對象 
  11.       var cityObj = Ext.get("city"); 
  12.       //2.我們爲這個city對象註冊一個change 
  13.       cityObj.on("change",function(e,select){ 
  14.      //3.得到改變後的數值 
  15.          var ids = select.options[select.selectedIndex].value; 
  16.          //3.1它先去前臺的緩存變量中查數據，當沒有的時候去後臺拿 
  17.          //if(data[city]){ 
  18.             //直接操作 
  19.          //}else{ 
  20.        //做ajax 
  21.           //} 
  22.          //4.ajax請求把後臺數據拿過來 
  23.          Ext.Ajax.request({ 
  24.             url:'menu.jsp', 
  25.             params:{'ids':ids}, 
  26.             method:'post', 
  27.             timeout:4000, 
  28.             success:function(response,opts){ 
  29.                var obj = eval(response.responseText); 
  30.                //5.得到地區的那個對象area 
  31.                 var oldObj = Ext.get("area").dom;//elememt是不能操作，dom是可以操作的 
  32.                //6.清除裏面項 
  33.                while(oldObj.length > 0){ 
  34.                   oldObj.options.remove(oldObj.length-1); 
  35.                 } 
  36.               //7.加入新的項 
  37.                 Ext.Array.each(obj,function(o){ 
  38.                     Ext.get("area").dom.appendChild(createChild(o.valueOf(),o.name)); 
  39.                 }); 
  40.             } 
  41.          }); 
  42.       }); 
  43.   }); 
  44.  
  45. })(); 
menu.jsp
  1. <%@page language="java" contentType="text/html" pageEncoding="UTF-8"%> 
  2. <% 
  3.       response.setCharacterEncoding("utf-8"); 
  4.       String ids = request.getParameter("ids"); 
  5.       if("beijing".equals(ids)){ 
  6.          response.getWriter().write("[{name:'海淀',value:'01'},{name:'東城',value:'02'},{name:'順義',value:'03'}]"); 
  7.       }else if("tianjing".equals(ids)){ 
  8.          response.getWriter().write("[{name:'和平',value:'01'},{name:'河西',value:'02'},{name:'河東',value:'03'}]"); 
  9.  
  10.      } 
  11. %> 
11111111
發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

PacketiX.NET ***使用教程

雨的印記 2019-02-23 13:49:40

HTML基礎及應用視頻教程

xyduan 2019-02-23 00:39:39

ASP視頻教程

xyduan 2019-02-23 00:39:39

python 教程與手冊（60IN1合集）

小俠唐在飛 2019-02-23 00:38:50

火車頭採集器7.6閃退解決辦法（附火車頭採集器v7.6企業版永久破解版）

homepages 2019-02-23 00:38:44

php面向對象教程4

dyfhyf 2019-02-23 00:32:12

如何利用IPv6技術實現代理教程

肖勝傑 2019-02-23 00:17:46

Packet Tracer 5.0軟件使用教程深入詳解

_餘傑 2019-02-23 00:15:43

15款非常有用的Adobe Flex教程

心海新航 2019-02-23 00:10:09

一個簡單的PHP入門源程式-PHP教程,PHP基礎

tjsyxywg 2019-02-23 00:02:50

FreeBSD 8.x & 9.x 安裝文檔 轉載+原創

sharkyan 2019-02-22 23:51:38

Dynamips基礎教程系列---與本地網卡橋接

cisco2600 2019-02-22 23:40:01

emWin 2天速成實例教程000_如何快速入門ucGUI/emWin

emwin 2019-02-22 23:37:38

Wireshark簡明教程

mryujianbo 2019-02-22 23:36:29

Qt學習之路(21): event()

lhq_vip 2019-02-22 23:30:57