EXTJS 中Ajax 应用示例

[TOC]

###简单的Ext.Ajax. request示例
```js
	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表单提交示例
```js
		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数据
```js
	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;
	}
	
```
### Ext.Ajax. request提交json数据
```js
	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内容更新器示例
```js
		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
			});
		}
		
```
### 定义渲染器更新页面元素示例
```js
		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'
			});
		}
		
```
### 自动定时更新页面元素示例
```js
		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();
		}
```

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

})
  
</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>
```

### 多级联动菜单
```js
  <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;
	})
  
</script>
```
 
### 自定义渲染器+解码json对象+ json式生成表格（综合示例：天气预报）
```js
    <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','北京');
	})
  
</script>
```

### Ext.form.HtmlEditor + Updater更新器 + 延时Ajax任务(综合示例：自动保存编辑器)
```js
    <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>");
					}
				}
			})
		}
	})
  
</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>
```

Information

官方订阅号

分类

About This Entry

About This Blog

最近发布

Friend Links