【原创】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里的数据在页面不刷新的前提下完成了数据的更新。

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

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