js array 保存数据

Angelialily

浏览: 241707 次
性别:
来自: 北京

最近访客更多访客>>

dx2012

Cwind

xxyupup

deng1001

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

技术学习

Ajax QQ JSP

昨天做一个这样的功能，比如QQ红钻如通知消息这样的。需要通知用户到期的一些信息。我们的需求一开始是只实现读取下一条信息，让他一条一条读取就可以了。可是现在需求又添加了可以查看上一条消息和最后一条的要求。这里面有一个难点，就是每当发出的消息用户读取一条时它的状态将改变就相当与少了一条消息。所以要这样的实现现在是找不回上条记录的。后来考虑，觉得自己只能用两种方式来保存读取过的消息。并且保证他下次刷新读取时总是最新的纪律。但是本次是可以查看这次读取过的消息。
觉得可用的方法一、就是把数据读取出来保存在一个Cookie里。这样保证读取过的数据还是存在的。
方法二、就是利用js来实现这个功能。把读取出来的数据放在一个js的array里保存。这样也确保把数据先读取出来就不会丢失改变状态的数据。读取的只是js的array就可以了。
cookie 没怎么用过，最后决定用js来实现。
还是把代码发给大家一起探讨吧，希望对也需要做这样功能的朋友有所帮助。更希望大家有更好的方法，能不吝赐教。
   代码如下：

// java 代码一个保存信息的java集合方法<%
List listInfo = new ArrayList();
listInfo = Informations.getInformations(userId,100,0);
int listCount = listInfo.size();
%>
//一些重要的js代码
<script language="javascript">
//定义array全局变量
var array = new Array();
var arrayId = new Array();
var count=0;
   <% // js 里嵌套java代码，把取出的数据赋值给js全局变量array来保存
    List arrlist = listInfo;
    Iterator iter = arrlist.iterator();
    int s = 0;
while(iter.hasNext()){
Information strcolor = (Information)iter.next();
int     execID = strcolor.getInfo_ID();
String exec= strcolor.getInfo_context();
%>
            arrayId[<%=s%>]="<%=execID%>"; // 消息的ID
   array[<%=s%>]="<%=exec%>";      // 消息的内容
<%s++;
}
     %>

// 页面加载时调用的一个方法。这个方法是控制消息在显示第一条时为不可点击
function onLoadOpen(){
if(<%=listCount%> > 0){
Open(); // 是为了打开页面遮罩
document.getElementById("btn1").disabled= true;
}
}
// 这个方法只是对一个消息的状态更新操作的。用了ajax
function infoNext(perInfoID)
{
var ajax = getXMLHttpRequest();
var url="${pageContext.request.contextPath}/pub/renew_getInformation.jsp?perInfoID="+perInfoID+"&ran="+Math.random();
ajax.open("get", url, true);
ajax.send(null);
}
</script>

// 页面调用

<body onload="infoNext('0');onLoadOpen();">
<div id="divOpenWin">
<img height="5" src="${pageContext.request.contextPath}/images/blank.gif" /><br />
<TABLE cellSpacing="0" cellPadding="0" width="98%" border="0">
<TR>
<TD bgColor="#325380" height="7"><IMG
src="${pageContext.request.contextPath}/skin/content-top-left_delt.gif"></TD>
<TD width="7" bgColor="#325380" height="7"><IMG
src="${pageContext.request.contextPath}/skin/blank.gif"></TD>
</TR>
<TR>
<TD
style="BORDER-LEFT: #325380 1px solid; BORDER-BOTTOM: #325380 1px solid;">
<table width="100%" class="clsDataList" height="180">
<tr>
<th align="left" height="22">消息通知</th>
</tr>
<tr>
<td>
   <input type="hidden" id="tmpID" name="tmpID" value=""/>
   <div id="contextID">
   </div>
   <script language="javascript">
   var contextID = document.getElementById("contextID");
   var count=0;
contextID.innerHTML=array[count];
function onInfoNext(){
var infoNext2 = document.getElementById("btn2");
var infoBack1 = document.getElementById("btn1");
var infoEnd3 = document.getElementById("btn3");
if(infoNext2.value == "下一条"){
    infoBack1.disabled = false;
    infoNext(arrayId[count]);// 调用一下更新消息状态的方法
    count++;
contextID.innerHTML=array[count];
if(count == (<%=listCount%>-1)){
infoNext2.disabled = true;
infoEnd3.disabled = true;
}
}
}
function onInfoBack(){
    var infoNext2 = document.getElementById("btn2");
var infoBack1 = document.getElementById("btn1");
var infoEnd3 = document.getElementById("btn3");
   if(infoBack1.value == "上一条"){
       count--;
       contextID.innerHTML=array[count];
       if(count == 0){
       infoBack1.disabled = true;
       }else{
           infoNext2.disabled = false;
infoEnd3.disabled = false;
       }
   }
}

function onInfoEnd(){
var infoEnd3 = document.getElementById("btn3");
var infoNext2 = document.getElementById("btn2");
var infoBack1 = document.getElementById("btn1");
if(infoEnd3.value="最后一条"){
    count = <%=listCount%>-1;
    infoNext(arrayId[count]);// 调用一下更新消息状态的方法
contextID.innerHTML=array[count];
infoBack1.disabled = false;
infoEnd3.disabled = true;
infoNext2.disabled = true;

}
}

   </script>
</td>
</tr>
<tr>
<td align="center"><font color="blue">一共有 <%=listCount%> 条信息</font></td>
</tr>
<tr>
<td align="center">
 <button id="btn1" class="clsBtn4w" name="btn1" onclick="onInfoBack();">上一条</button>
 <button id="btn2" class="clsBtn4w" name="btn2" onclick="onInfoNext();">下一条</button>
 <button id="btn3" class="clsBtn4w" name="btn3" onclick="onInfoEnd();">最后一条</button>
     <button id="btn3" class="clsBtn2w" name="btn3" onclick="Close();">关闭</button>
</td>
</tr>
</table>
</TD>
<TD vAlign="bottom" width="7" bgColor="#325380"><IMG
src="${pageContext.request.contextPath}/skin/content-right-bottom_delt.gif"></TD>
</TR>
</TABLE>
</div>
</body>

// 重要的代码就是以上代码，这个消息是在一个遮罩层上显示的。只有消息是可点击的，其它地方是不可点击的。除非关闭消息框才可查看。
   截图效果如下：

    解释一下就是一个模糊的遮罩层这个层是不可点击的。在层上面显示我的提示消息内容供用户读取，也就是说消息是强制让他查看的，如果他不愿意查看除非关闭当前消息窗口。否则是无法进行其它操作。

查看图片附件

2
顶

2
踩

分享到：

祝老师节日快乐！ | 页面跳转显示倒计时

2008-09-09 12:01
浏览 3033
评论(1)
分类:企业架构
查看更多

1 楼少女杀手 2009-07-17

你的这篇文章，我复制下来了，周末我好好研究一下，如果我有不懂的地方，就找你了啊！

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论