EXTJS 中Ajax 应用示例

renxiao2003

简单的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(); 
        } 
 
提交表单更新页面元素示例 
  <mce:script type="text/javascript"><!-- 
    Ext.onReady(function(){ 
        Ext.Updater.defaults.indicatorText  =  
        '<div class="loading-indicator">登陆中....</div>';//设置更新指示器文字  
        var updater = Ext.get('loginMsg').getUpdater();//得到元素的更新  
        Ext.get('loginBtn').on('click',login); 
        function login(){ 
            //提交表单，在回调函数中更新页面元素  
            updater.formUpdate('loginForm','loginServer.jsp'); 
        } 
 
    }) 
   
// --></mce:script>  
 </HEAD> 
 <BODY style="margin=10 10 10 10;" mce_style="margin=10 10 10 10;"> 
    <form id='loginForm'> 
    用户名：<input name = 'userName' type='text'> 
    密  码：<input name = 'password' type='password'> 
    <input type='button' value='登陆' id='loginBtn'> 
    </form> 
    状  态：<span id='loginMsg'></span> 
 </BODY> 
</HTML> 
 
 
多级联动菜单 
  <mce:script type="text/javascript"><!-- 
    Ext.onReady(function(){ 
        //将下拉框id顺序存入数组中，以便通过遍历数组级联更新  
        var lists = ['s1','s2','s3'] 
        //为下拉框绑定change事件的处理函数  
        Ext.select('select').on('change',function(e,select){ 
            //取得下拉框中选中的值  
            var value = select.options[select.selectedIndex].value; 
            //取得下拉框id  
            var id = select.id; 
            //通过循环的到下拉框id在lists数组中的索引位置  
            for(var i = 0 ; i < lists.length ; i++){ 
                if(lists[i] == id){ 
                    var index = i; 
                } 
            } 
            //取得相邻下拉框id在lists数组中的索引  
            var nextIndex = index + 1; 
            if(nextIndex >= lists.length){ 
                nextIndex = lists.length - 1; 
            } 
            //移除相邻下拉框及后续下拉框的值  
            remove(nextIndex); 
            //为相邻下拉框及后续下拉框加载新值  
            getList(nextIndex,value); 
        }); 
 
        //通过Ajax方式为下拉框加载数据，  
        function getList(index,value) { 
            Ext.Ajax.request({ 
                url : 'bookServer.jsp',//请求的服务器地址  
                params : { 
                    target : lists[index], 
                    value : value 
                }, 
                callback : function(options,success,response){ 
                    if(success){ 
                        //取得要更新的下拉框  
                        var select = Ext.get(lists[index]); 
                        //执行返回字符串，得到数组对象  
                        var array = eval(response.responseText); 
                        //记录数组中的第一各种，该值将作为下级下拉框的默认取值条件  
                        var firstValue; 
                        for(var i=0 ; i < array.length ; i++){ 
                            var o = array[i]; 
                            if(i == 0){ 
                                firstValue = o.value; 
                            } 
                            //向下拉框中追加条目  
                            select.appendChild(createOption(o.value,o.name)); 
                        } 
                        //如果不是最后一个下拉框则继续加载相邻下拉框的数据  
                        if(index < lists.length){ 
                            getList(index + 1,firstValue); 
                        } 
                    } 
                } 
            }) 
        } 
        //根据传入的value和text创建选项  
        function createOption(value, text) { 
             var opt = document.createElement("option");  
             opt.setAttribute("value", value); 
             opt.appendChild(document.createTextNode(text)); 
             return opt; 
        } 
        //级联删除下拉框及子下拉框的值  
        function remove(index){ 
            for(var i = index ; i < lists.length ; i++){ 
                var select = Ext.get(lists[i]).dom; 
                while(select.length>0){ 
                  select.options.remove(select.length-1) 
                } 
            } 
        } 
        //默认加载值为1的教学类列表  
        getList(1,"1"); 
        //默认列表s1的教学类被选中  
        Ext.get('s1').dom.selectedIndex = 0; 
    }) 
   
// --></mce:script>  
   
   
自定义渲染器+解码json对象+ json式生成表格（综合示例：天气预报） 
    <mce:script type="text/javascript"><!-- 
    Ext.onReady(function(){ 
        //设置更新指示器文字  
        Ext.Updater.defaults.indicatorText  =  
        '<div class="loading-indicator">读取天气信息....</div>'; 
        //得到元素的更新器  
        var updater = Ext.get('weather').getUpdater(); 
        //自定义渲染器  
        var weatherRender = function(){ 
            this.render = function(el, response, updateManager, callback){ 
                //解码响应字符串，得到对应的json对象  
                var weaObj = Ext.util.JSON.decode(response.responseText); 
                //利用工具类Ext.DomHelper的overwrite方法生成表格并以覆盖方式更新元素el  
                Ext.DomHelper.overwrite(el,{ 
                    tag:'table',children:[ 
                        {tag:'tr',children:[ 
                            {tag:'td',html:'日期：'}, 
                            {tag:'td',html:weaObj.date} 
                        ]}, 
                        {tag:'tr',children:[ 
                            {tag:'td',html:'风速：'}, 
                            {tag:'td',html:weaObj.windSpeed} 
                        ]}, 
                        {tag:'tr',children:[ 
                            {tag:'td',html:'湿度：'}, 
                            {tag:'td',html:weaObj.humidity} 
                        ]}, 
                        {tag:'tr',children:[ 
                            {tag:'td',html:'最高气温：'}, 
                            {tag:'td',html:weaObj.maxTemp} 
                        ]}, 
                        {tag:'tr',children:[ 
                            {tag:'td',html:'最底气温：'}, 
                            {tag:'td',html:weaObj.minTemp} 
                        ]} 
                    ] 
                }); 
            } 
        } 
        //指定自定义渲染器  
        updater.setRenderer(new weatherRender()); 
        //选择页面中id为select的元素  
        var select = Ext.get('city'); 
        //绑定change事件  
        select.on('change',function(e,sel){ 
            var cityCode = sel.options[sel.selectedIndex].value; 
            var cityName = sel.options[sel.selectedIndex].text; 
            //调用更新函数,并将选中城市的编码出入更新函数中  
            updateWeather(cityCode,cityName); 
        }); 
        //定义更新函数  
        function updateWeather(cityCode,cityName){ 
            updater.update({//调用更新器的update方法，更新页面元素  
                url : 'weatherServer.jsp', 
                params : {cityCode:cityCode}, 
                callback : function(el,success,response,options){ 
                    //读取天气信息失败，则更新页面元素已显示错误提示  
                    if(success == true){ 
                        Ext.get('cityName').update(cityName); 
                    }else{ 
                        el.update("读取 "+cityName+" 天气信息失败!"); 
                    } 
                } 
            }); 
        } 
        //默认读取北京的天气情况  
        updateWeather('CHXX0008','北京'); 
    }) 
   
// --></mce:script>  
   
 
Ext.form.HtmlEditor + Updater更新器 + 延时Ajax任务(综合示例：自动保存编辑器) 
    <mce:script type="text/javascript"><!-- 
    Ext.onReady(function(){ 
        Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif'; 
        Ext.QuickTips.init();//使用HtmlEditor之前必须初始化提示  
        var note = new Ext.Panel({ 
            title:'网络记事本', 
            renderTo : 'webNote', 
            frame : true, 
            layout:'fit', 
            tbar : [ 
                { 
                    text : '保存', 
                    //点击保存按钮即时执行保存操作不进行延时  
                    handler : saveNode 
                }, 
                '-', 
                '最近保存时间：', 
                Ext.get('saveTime').dom, 
                '-', 
                Ext.get('saveStatus').dom 
            ], 
            items : [ 
                new Ext.form.HtmlEditor({ 
                    id : 'content', 
                    height : 150, 
                    width : 500, 
                    fontFamilies : ['宋体','隶书','黑体'],//字体列表  
                    listeners : { 
                        //sync事件将在文本发生变化时被触发  
                        sync  : editorChange 
                    } 
                }) 
            ] 
        }); 
        //取得HtmlEditor组件的引用  
        var editor = note.findById('content'); 
        //设置更新指示器文字  
        Ext.Updater.defaults.indicatorText  =  
        '<div class="loading-indicator">保存....</div>'; 
        //取得页面中id为saveTime元素的更新器  
        var timeUpdater = Ext.get('saveTime').getUpdater(); 
        //取得页面中id为saveStatus元素的引用  
        var saveStatus = Ext.get('saveStatus'); 
        //定义HtmlEditor输入内容发生变化时的处理函数  
        function editorChange() { 
            //文本变化后延时3000毫秒执行保存操作  
            task.delay(3000); 
        } 
        //将保存操作转换为一个延时任务  
        var task = new Ext.util.DelayedTask(saveNode); 
        //定义保存文本内容的函数  
        function saveNode() { 
            timeUpdater.update({ 
                url : 'noteServer.jsp', 
                method : 'POST', 
                params : { 
                    //将文本内容作为参数传递到后台服务器  
                    content : editor.getValue() 
                }, 
                callback : function(el,success,response,options){ 
                    if(success == true){ 
                        saveStatus.update("<font color='green'>保存成功</font>"); 
                    }else{ 
                        saveStatus.update("<font color='red'>保存失败</font>"); 
                    } 
                } 
            }) 
        } 
    }) 
   
// --></mce:script>  
 </HEAD> 
 <BODY style="margin=10 10 10 10;" mce_style="margin=10 10 10 10;"> 
    <div id='webNote' style="width:522"/> 
    <div id='saveTime'/> 
    <div id='saveStatus'/> 
 </BODY> 
</HTML>