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"></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"></mce:script>


自定义渲染器+解码json对象+ json式生成表格（综合示例：天气预报）
    <mce:script type="text/javascript"></mce:script>


Ext.form.HtmlEditor + Updater更新器 + 延时Ajax任务(综合示例：自动保存编辑器)
    <mce:script type="text/javascript"></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>