Extjs学习笔记(八) Ajax

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.把从数据库拿到的数据进行前台页面缓存
                }
            });
        });
    });
})();