EXTJS 中Ajax 应用示例

简单的Ext.Ajax. request示例 
    var requestConfig = { 
        url :'loginServer.jsp',//请求的服务器地址  
        params : {userName : 'tom',password : '123'},//请求参数  
        customer : '自定义属性',//附加属性  
        callback : function(options,success,response){//回调函数  
            var msg = ["请求是否成功：" ,success,"/n", 
                        "服务器返回值：",response.responseText, 
                        "本地自定义属性：",options.customer]; 
            alert(msg.join('')); 
        } 
    } 
    Ext.Ajax.request(requestConfig);//发送请求  
     
Ext.Ajax表单提交示例 
        var requestConfig = { 
            url :'loginServer.jsp',//请求的服务器地址  
            form : 'loginForm',//指定要提交的表单id  
            callback : function(options,success,response){//回调函数  
                var msg = ["请求是否成功：" ,success,"/n", 
                           "服务器返回值：",response.responseText]; 
                alert(msg.join('')); 
            } 
        } 
        Ext.Ajax.request(requestConfig);//发送请求  
         
Ext.Ajax. request提交xml数据 
    function login(){ 
        var requestConfig = { 
            url :'loginServerXml.jsp',//请求的服务器地址  
            xmlData : getXml(),//发送xml文档对象  
            callback : function(options,success,response){//回调函数  
                var msg = ["请求是否成功：" ,success,"/n", 
                           "服务器返回值：",response.responseText]; 
                alert(msg.join('')); 
            } 
        } 
        Ext.Ajax.request(requestConfig);//发送请求  
    } 
    //生成xml文档对象  
    function getXml(){ 
        var name = document.forms['loginForm'].userName.value; 
        var pwd = document.forms['loginForm'].password.value; 
        var dom = new ActiveXObject("msxml2.DOMDocument"); 
        var header = dom.createProcessingInstruction("xml", "version='1.0'"); 
        dom.appendChild(header); 
        var root = dom.createElement("loginInfo"); 
        var userName = dom.createElement("userName"); 
        userName.text = name; 
        var password = dom.createElement("password"); 
        password.text = pwd; 
        root.appendChild(userName); 
        root.appendChild(password); 
        dom.appendChild(root); 
        return dom; 
    } 
     
xt.Ajax. request提交json数据 
    function login(){ 
        var requestConfig = { 
            url :'loginServerJson.jsp',//请求的服务器地址  
            jsonData : getJson(),//发送json对象  
            callback : function(options,success,response){//回调函数  
                var msg = ["请求是否成功：" ,success,"/n", 
                           "服务器返回值：",response.responseText]; 
                alert(msg.join('')); 
            } 
        } 
        Ext.Ajax.request(requestConfig);//发送请求  
    } 
    //生成json对象  
    function getJson(){ 
        var name = document.forms['loginForm'].userName.value; 
        var pwd = document.forms['loginForm'].password.value; 
        var jsonObj = { 
            userName : name, 
            password : pwd 
        } 
        return jsonObj; 
    } 
     
Ext.Updater.update div内容更新器示例 
        var updater = Ext.get('content-div').getUpdater();//得到元素的更新器  
        var btns = Ext.select('input');//选择页面中的所有input组件  
        btns.addListener('click',function(e,b){//成批绑定click事件  
            update('9-5-'+b.value+'.html');//调用更新函数  
        }); 
        //定义更新函数  
        function update(url){ 
            updater.update({//调用更新器的update方法，更新页面元素  
                url : url 
            }); 
        } 
         
定义渲染器更新页面元素示例 
        Ext.Updater.defaults.showLoadIndicator = false;//不显示更新指示器  
        var updater = Ext.get('content-div').getUpdater();//得到元素的更新器  
        var cusRender = function(){//自定义渲染器  
            this.render = function(el, response, updateManager, callback){ 
                var time = el.query('input')[0]; 
                time.value = response.responseText; 
            } 
        } 
        updater.setRenderer(new cusRender());//指定自定义渲染器  
         
        var btns = Ext.get('updateBtn');//选择页面中id为updateBtn的元素  
        btns.on('click',function(){//绑定click事件  
            update();//调用更新函数  
        }); 
        //定义更新函数  
        function update(){ 
            updater.update({//调用更新器的update方法，更新页面元素  
                url : 'timeServer.jsp' 
            }); 
        } 
         
自动定时更新页面元素示例 
        Ext.Updater.defaults.showLoadIndicator = false;//不显示更新指示器  
        var updater = Ext.get('serverTime').getUpdater();//得到元素的更新  
 
        Ext.get('startAutoBtn').on('click',startAutoUpdate); 
        Ext.get('stopAutoBtn').on('click',stopAutoUpdate); 
 
        function startAutoUpdate(){ 
            //开始定时自动刷新  
            updater.startAutoRefresh(1,'timeServer.jsp'); 
        } 
        function stopAutoUpdate(){ 
            //停止定时自动刷新  
            updater.stopAutoRefresh(); 
        } 
 
提交表单更新页面元素示例 
    
  
  
     
    用户名： 
    密  码： 
     
     
    状  态：