欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

EXTJS 中Ajax 应用示例 博客分类: js Ajax网络应用应用服务器EXTjson 

程序员文章站 2024-02-18 19:56:46
...

简单的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>

 

 

本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/homsky/archive/2010/04/05/5451853.aspx