ExtJs中的Ajax详解_extjs ajax

概述：Ext.Ajax是Ext.data.Connection的一个子类，提供了简单的方式进行Ajax的功能实现

一、主要方法

       abort终止一个没有完成Ajax请求

       isLoading:判断指定的Ajax请求是不是正在运行

       paresStatus：返回请求响应的代码

       request：发送服务器请求---->重点

      

       1、简单的request请求：

              参数为一个对象指定属性值

              url指定的是请求地址

              params指定的是参数  是一个对象，里面可以带有属性值

              method：指定的以POST/GET来提交

              timeout：指定的是请求时间，如果超过这个时间则代表请求失败

              success：指定的是成功请求后调用的函数，函数参数第一个是响应response对象和opetions对象

              failure：指定的是失败后调用的函数

              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(){

                            alert(response.responseText+"  "+options);

                     }

              });

       2、带有表单的请求

              首先添加事件监听，并请求，然后在request参数对象中指定form属性 

              值为dom中from的id名，然后就可以将表单中的参数传入

              Ext.get("b").on("click",function(){                   

                     Ext.Ajax.request({

                            url:"person.jsp",

                            params:{id:"01"},

                            method:"POST",

                            form:"myform",

                            timeout:3000,

                            success:function(response,options){

                                   alert(eval(response.responseText)[0].name);

                            },

                            failure:function(){

                                   alert(response.responseText+"  "+options);

                            }

                     });

              });

       3、使用jsonData属性指定数据

              以json格式向后台传入参数

              定义json格式的字符串并将jsonData属性指定上，系统则讲id name等参数传入到后台中

              vardata="{id:'01',name:'marico',age:23,email:'marico_zhang@163.com'}";

              jsonData:data;

二、Ext.ElementLoader

       方便我们重新构建页面

       1、load方法请求

              利用元素对象调用getLoader得到Ext.ElementLoader对象，

              调用load方法参数为一个对象，指定属性

              url：请求的地址

              renderer：调用的一个函数，参数为loader，response，request三个参数 当请求的时候就会调用此函数

              讲ajax的调用继承到一个属性中。

              Ext.get("b1").on("click",function(){                 

                     vartime=Ext.get("time").getLoader();

                     time.load({

                            url:"gettime.jsp",

                            renderer:function(loader,response,request){

                                   vartime=response.responseText;

                                   //因为要用到属性，所以应该获取dom的元素对象 ，也可以Ext.get("time").dom; 将dom提取出来

                                   Ext.getDom("time").value=time;

                            }

                     });

              });

             

       2、startAutoRefresh 方法 定时去请求

              参数第一个指定的每隔多长事件去请求一次，第二个对象与load方法指定的参数对象一样

              Ext.get("b2").on("click",function(){

                     vari=Ext.get("i").getLoader();

                     i.startAutoRefresh(1000,{

                            url:"geti.jsp",

                            renderer:function(loader,response,request){

                                   vari=response.responseText;

                                   Ext.getDom("time").value=i;

                            }

                     });

                    

              });

三：多级联动实现   城市--->地区

       在html中创建下拉列表标签

       <selectname="city">

              <optionvalue="beij" selected>北京市</option>

              <optionvalue="tianj">天津市</option>

      </select>

      <select name="area">

              <optionvalue="def" selected>-------------</option>

      </select>

       实现思路：

       1.得到city这个dom对象

       2.为这个city对象注册一个change

       3.得到改变的值

       4.ajax请求把后台数据拿过来

       5.得到地区的那个对象area DOM

       6.清楚里面项

       7.加入新的项

       代码：

       //定义方法，创建一个option项

       functioncreateChild(value,name){

              varel=document.createElement("option");

              el.setAttribute("value",value);

              el.appendChild(document.createTextNode(name));

              returnel;

       }

       vardata=[];

       Ext.onReady(function(){

              //1.得到city这个dom对象

              varcityObj=Ext.get("city");

              //2.为这个city对象注册一个change 第一个参数为事件Operation对象 第二个是这个组件的DOM对象

              cityObj.on("change",function(e,select){

                     //3.得到改变的值

                     varids=select.options[select.selectIndex].value;

                     //3.1他使用前台的缓存变量中查数据，当没有的时候去后台请求拿

                     if(data["city"]){

                            //直接操作

                     }else{

                            //做Ajax请求后台

                     }

                     //4.ajax请求把后台数据拿过来

                     Ext.Ajax.request({

                            url:"menu.jsp",

                            params:{ids:ids},

                            method:"post",

                            timeout:4000,

                            success:function(response,opts){

                                   varobj=eval(response.responseText);

                                   //5.得到地区的那个对象area DOM

                                   varoldObj=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));

                                   });

                            }

                     });

              });

       });