【原创】ExtJs实现定时读取数据，动态加载数据，页面不刷新。Struts 2框架下JSON传值

这次的项目要求有一个养殖池的监测指标的动态展现，就是在系统的主页，展示出各个养殖池的实时动态数据。

数据由另外的一段程序，实时从硬件读取写进数据库，所以要做的就是定时去数据库去取数据就行了。

贴出来的代码，主要是实现的页面展示部分：

第一次载入页面后，养殖池读取一次数据，然后开始调用Ext.TaskMgr来实现动态的去发起请求

var task_CheckLoginState;//声明任务变量
		task_RealTimeMointor = {
			run : RealTimeMointor,//执行任务时执行的函数
			interval : 10000
			//任务间隔，毫秒为单位，这里是10秒
		}
		//Ext.TaskMgr.start(task_CheckLoginState);//初始化时就启动任务
		//定时启动执行一次，启动TaskMgr，
		begin = setInterval("Ext.TaskMgr.start(task_RealTimeMointor)",5000);　　//1000毫秒=1秒
		function stopMonitor()
		{
			Ext.TaskMgr.stop(task_RealTimeMointor);
		}

这就可以定时的调用RealTimeMointor函数 去执行发起请求

function RealTimeMointor() {
			clearInterval(begin);//关闭setInterval();
			Ext.Ajax.request({
				   url: 'realtimemonitor_realtimeMonitorByWorkerShopId.action',
				   disableCaching: true,//禁止缓存
				   timeout: 60000,//最大等待时间,超出则会触发超时
				   success: function(response, option)
				   {
						if (!response || response.responseText == '') {//返回的内容为空,即服务器停止响应时
			                Ext.TaskMgr.stop(task_CheckLoginState);
			                Ext.MessageBox.show({
			                    title: '错误',
			                    msg: '在读取动态数据时返回了空数据，请确认您的设备问题，请重启浏览器再试！',
			                    buttons: Ext.Msg.OK,
			                    icon: Ext.MessageBox.ERROR,
			                    fn: function(btn, text){
			                        if (btn == 'ok') {
			                        	
			                        }
			                    }
			                });
			                return;
			            }
						else{
						var respText = Ext.util.JSON.decode(response.responseText); //解码JSON格式数据为一个对象  
						//alert("daxiao==="+respText.info.length); 
						insertIntoHtml(respText);
						//allPrpos(respText.info[1].monitorDetailInfoMap);	
				        //Ext.Msg.alert('提示', respText.info[1].monitorDetailInfoMap);    
						}
				   },
					//请求失败时
				   failure: function(data){
					   Ext.MessageBox.show({
				            title: '错误',
				            msg: '在读取动态数据时时发生网络错误，请确认您已经链接网络后，重启浏览器再试！',
				            buttons: Ext.Msg.OK,
				            icon: Ext.MessageBox.ERROR,
				            fn: function(btn, text){
				                if (btn == 'ok') {
				                }
				            }
				            });
					   },
			        //带的参数
				   params: { workShopId: tempWorkShopId }
						});
		}

这个函数的url是请求数据的地址，返回的是一个json格式的数据，如何做请参照我的另外一篇文章

如何生成树http://blog.csdn.net/peng_wu01/archive/2010/04/28/5538171.aspx；

struts.xml

	<package name="edu.ldu.water.realtimemonitor.Action" extends="struts-default">
		<action name="realtimemonitor_*" class="RealTimeMonitorAction"
			method="{1}">
			<result name="showAllPool">/realtime/realtimepool.jsp</result>
			<result name="showAllPoolByAjax">/realtime/jsonaccepter.jsp</result>
		</action>
	</package>

一定要注意一点就是 ，一定要写个页面接一下你要取的数据，这样才能知道你要转哪个JSON。

/realtime/jsonaccepter.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<s:property  value="poolDetailAjaxList"/>

Action的处理：

	public String realtimeMonitorByWorkerShopId()
	{
		String s = this.findAllPoolByWorkerShopId();
		//一定要转一下   转成JSON数据类型
		poolDetailAjaxList=JSONArray.fromObject(poolDetailList).toString();
		//poolDetailAjaxList=JSONObject.fromObject(poolDetailList).toString();
		poolDetailAjaxList=poolDetailAjaxList.substring(1, poolDetailAjaxList.length()-1);
		poolDetailAjaxList=poolDetailAjaxList.replace("/"", "'");
		poolDetailAjaxList="{'info':["+poolDetailAjaxList+"]}";
		System.out.println("JSON去掉引号后"+poolDetailAjaxList);
		ServletActionContext.getResponse().setContentType("text/json; charset=utf-8");
		return "showAllPoolByAjax";
	}

这里有个十分好玩的地方，就是JSONArray.fromObject()这个方法返回的JSON类型的key值是有双引号的，而回到页面的时候用

Ext.util.JSON.decode(response.responseText) 去操作的时候是不认双引号的，我纠结了老半天才发现问题出在这里，相当的让我窝火，NND。不得不暴一下粗口。还有JSONArray.fromObject()的返回是个数组类型，decode貌似只能转{}里的内容

顺便发一下 我得到的JSON的格式，这里的格式和EXT.tree所需要的格式，有点区别的

JSON去掉引号后
{'info':[{'monitorDetailInfoMap':{'水温':18.972200393676758,'溶氧':9.697680473327637},'monitorTime':'2010年04月20日18时19分03秒','poolNo':'养殖池1','poolId':1},{'monitorDetailInfoMap':{'水温':18.972200393676758,'溶氧':9.697680473327637},'monitorTime':'2010年04月20日18时19分03秒','poolNo':'养殖池2','poolId':2},{'monitorDetailInfoMap':{'水温':18.972200393676758,'溶氧':9.697680473327637},'monitorTime':'2010年04月20日18时19分03秒','poolNo':'养殖池3','poolId':3}]}

在回到页面，还是Ext.util.JSON.decode()的问题，他将一个json格式的东西给转换为一个对象类型，但是有一个地方需要注意，在

function RealTimeMointor() 里我注释掉的内容。

//Ext.Msg.alert('提示', respText.info[1].monitorDetailInfoMap); 如果这样写的话

//Ext.Msg.alert('提示', respText.info[1].monitorDetailInfoMap.水温); 会提示XX对象没有定义。后来我突然想明白了，monitorDetailInfoMap仍然被认为是一个对象，重新再decode一下就OK了，但是我没有做，因为monitorDetailInfoMap里的数据的个数是动态的，所以直接遍历会更合理一点

		function allPrpos(obj) {     
		    // 用来保存所有的属性名称和值    
		    var props = "";    
		    // 开始遍历    
		    for(var p in obj){     
		       // 方法    
		       if(typeof(obj[p])=="function"){     
		            obj[p]();    
		        }else{     
		            // p 为属性名称，obj[p]为对应属性的值    
		            props+= p + "=" + obj[p]+"<br />";    
		        }     
		    }     
		    // 最后显示所有的属性    
		    return props  ;  
		}

Ext.Ajax.request 返回数据成功后 success里有个方法，调用函数可以带两个个参数function(response, option)，那个response里有返回的数据，如何处理，请参看上面的代码。

还剩一个问题就是如何把数据塞到已经存在的DIV里，并且页面不刷新。ID.innerHTML=xx 可以解决这个问题。

function(response, option)里调用了insertIntoHtml方法来完成这个工作

		function insertIntoHtml(collection)
		{
			for(var i = 0 ; i<collection.info.length; i++ )
			{	
				var s="";
				s="时间"+collection.info[i].monitorTime+" <br />  养殖池"+	collection.info[i].poolNo+"<br /> 详情："+allPrpos(collection.info[i].monitorDetailInfoMap)+"<br />";
				//pool_i.innerHTML=s;          //不能这么写 ， 浏览器会认为pool_i没有定义
				var divString = 'pool_'+i;
				document.getElementById(divString).innerHTML=s;
			}	
		}    

由于页面存在的DIV的ID也是动态生成的，所以取其ID的时候做了一点处理，上面的代码里有注释。

到这里基本也就完成了所有的动作，达到的效果就是每十秒钟页面就会向后台请求一次数据，而每个DIV里的数据在页面不刷新的前提下完成了数据的更新。

有些地方的思路可能过于僵硬，做的不好的地方请高手们指正 。

有看不懂清楚的地方，请给我留言，必回复！