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(); } 提交表单更新页面元素示例 <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>