日期:2014-05-16  浏览次数:20431 次

JavaScript的Map实现和Jquery的Ajax多次调用
javascript的Map实现和jquery的ajax多次调用

最近遇到个具体的需求,在页面上要统计出12个功能模块对应的已办任务的数量。
我最初写的代码是,提交到我的action后,这个action调用别人的manager一个一个的去得到这个数量,然后返回页面。功能是秒秒钟就完成了,但是在整个页面装载时会很长一段时间是白色的等待页面。这效果让人很不理想。我想能不能实现ajax调用,让功能模块的名字先展示出来,然后我再ajax的去调用呢。(每个用户登录后,具体能看到几个功能模块也是根据权限动态构造的,所以这个ajax调用其实是在一个循环里面的)
我这里比较牵强的还用到了一个javasscript的构造的类似于java中的map的对象。呵呵。用的比较牵强。不过一并学习下而已。
整个bottomnavigat.jsp的核心代码如下:
<script type="text/javascript">
<!--
//首先在head区域new个map出来,这里map存放这个用户能看到几个功能模块
var map = new Map();
-->
</script>
在原本的foreach区域添加map.put的函数方法,记录下这个用户总共要看几个业务模块
<c:forEach var="item" items="${navigats}" varStatus="s">
<script type="text/javascript">
map.put("${item.displayName}","${item.displayName}");
</script>
<c:if test="${s.index % 6 == 0}">
<tr>
</c:if>
<td>
    <a href="#" onclick="return onShow('${item.authUrl}','${item.name}');">${item.name}
    (<span class="need" id="${item.displayName}"><img src="../images/panel/loading.gif"></span>)
    </a>
    </td>
<c:if test="${s.index % 6 == 5}">
</tr>
</c:if>
</c:forEach>
下边的javascript发起循环的ajax调用
<script type="text/javascript">
<!--
function callajax(text_id){
$.ajax({
      url: path + '/workspace/countnum.do?text_id=' + text_id,
      type: 'POST',
      dataType: 'text',//返回文本
      timeout: 10000,
      error: function(){
         updateNumber(text_id,'...');//出错给你三个...,表示滴汗
      },
      success: function(text){
      updateNumber(text_id,text);//用返回的文本当参数,调用另外一个函数画出图形
      }
});
}
//根据返回值,改变<span>.gif</span>占位符里面的内容
function updateNumber(id,text){
$("#"+id).html(text);
}
//根据map里面的内容,循环调用
function callallcount(){
if(map != null){
   var keys = map.keys();
   if(keys != null && keys.length > 0){
    for(var i = 0;i<keys.length;i=i+1){
     var key = keys[i];
     callajax(key);
    }
   }
}
}
//延迟1秒钟再来猛滴
setTimeout(callallcount,1000);
//-->
</script>

另外贴出javascript的map实现代码,这个是在项目文件中有的,可能是哪个喜欢玩js的同事搞上去的:
function Map(){
this.elements = new Array();
//获取MAP元素个数
this.size = function() {
return this.elements.length;
}
//判断MAP是否为空
this.isEmpty = function() {
return (this.elements.length < 1);
}
//删除MAP所有元素
this.clear = function() {
this.elements = new Array();
}
//向MAP中增加元素(key, value)
this.put = function(_key, _value) {
this.elements.push({key:_key, value:_value});
}
//删除指定KEY的元素,成功返回True,失败返回False
this.remove = function(_key) {
var bln = false;
try {  
   for (i = 0; i < this.elements.length; i++) {
    if (this.elements[i].key == _key){
     this.elements.splice(i, 1);
     return true;
    }
   }
}catch(e){
   bln = false;   
}
return bln;
}
//获取指定KEY的元素值VALUE,失败返回NULL
this.get = function(_key) {
try{  
   for (i = 0; i < this.elements.length; i++) {
    if (this.elements[i].key == _key) {