javascript从后台读取数据并存放在新创建DIV中

在做高校平台界面时，遇到这样一个问题，就是当我们需要点击一个按钮的时候，需要显示一个弹出框，并且这个弹出框里要显示的内容是从后台读取的，也就是来自数据库，由于内容显示较多，我如果在实现把弹出框的DIV写好，并写入数据的话，我们不能保证用户每次登陆都要点这个按钮，也就是更多地时候用户是不需要这些数据的，如果提前加载，会使网页加载变得很慢，影响用户体验，所以，我们要坐的就是在用户点击按钮时，新建一个div，并且把数据读取。

首先，我们需要完成从后台读取数据

这里，我们需要用到一个jar包：dwr，和struts一样，首先，我们需要配置web.xml:

 
    dwr-invoker
    org.directwebremoting.servlet.DwrServlet
    
      debug
      true
    
      
        crossDomainSessionSecurity  
        false  
     
  
  
    dwr-invoker
    /dwr/*
    

这里需要注意一点，crossDomainSessionSecurity默认是true， 程序回调函数不执行，所以我们这里一定要把它改成false，表示其能够从其他域进行请求，需要注意的是这样做可能会出现安全性的问题。

接下来我们写一个后台获取数据的类：

package com.gxpt.struts2;



import java.util.ArrayList;
import java.util.List;

public class Test1 {
	public List hello(){
		List rtn = new ArrayList();
		rtn.add(new String[]{"1","模块1","1"});
		rtn.add(new String[]{"2","模块2","0"});
		rtn.add(new String[]{"3","模块3","1"});
		rtn.add(new String[]{"4","模块4","0"});
		rtn.add(new String[]{"5","模块5","1"});
		rtn.add(new String[]{"6","模块6","0"});
		rtn.add(new String[]{"7","模块7","1"});
		rtn.add(new String[]{"8","模块8","0"});
		rtn.add(new String[]{"9","模块9","1"});
		rtn.add(new String[]{"10","模块10","0"});
		rtn.add(new String[]{"11","模块11","1"});
		System.out.println("aaa");
		return rtn;
	}
}

接下来我们需要吧dwr.xm文件放入到跟web.xml统计的文件夹下：

好了，准备工作基本上就做好了，剩下的就看jsp界面了：

这里首先我们需要引入dwr的javascript，

 <script type="text/javascript" src="dwr/engine.js"></script>
<script type="text/javascript" src="dwr/util.js"></script>
<script type="text/javascript" src="dwr/interface/T1.js"></script>

这里注意，第三个javascript的名字为你在dwr.xm中配置的名字。

我们先读取一下数据：

<script type="text/javascript">
function test1(){
	T2.hello(
		function(datas){
			for(var i=0; i < datas.length; i++){
				for(var j=0; j < datas[i].length; j++){
					alert(datas[i][j]);
				}
			}
		}
	);
}

</script>

好了，通过上面的例子，我们就可以从后台读取数据了，那么，现在我们就开始创建div并加载这些数据

首先，我们用js创建div：

这里我们要给div添加宽度，高度，边距，class，ID，还有他的子节点

var obj=document.createElement("div");
     obj.style.top="82.5px";
     obj.style.left="436.5px";
     obj.style.width="550px";
     obj.style.height="286px";
     obj.style.position="fixed";
     obj.className ="nbwinautoheight";

//创建子节点

  var  childDiv= document.createElement("div");
     childDiv.className="zcls zflg";
     childDiv.title ="我是子节点";

//将子节点添加到父节点
     obj.appendChild(childDiv);

这样，我们就可以创建DIV了，接下来，就是把加载数据的javascript和创建DIV的两个javascript和在一起了，同样很简单，只需要在这里div中调用另一个即可，当然，直接把加载数据的javascript函数放到创建函数中也可以。

从开始做高效平台这个界面的时候，就有一种深刻的感觉，就是.jsp的使用要比.net里写的aspx灵活的多，可能就是aspx页面封装的比较好，但是相对的灵活性就差很多，但是aspx页面要好写很多，但是有些功能实现起来却比较困难。

其实我感觉着也像我们的生活我们的学习，当我们作为初学者，我们希望别人把现成的知识做好，我们希望他们把积木搭建成城堡，这样我们接受起来更容易，但是随着我们的进步，这些已经封装好的知识已经无法满足我们的时候的时候，我们需要各种各样的城堡，花园，更多的，我们要去自己的去感受，去接触积木，然后去创建千奇百怪的城堡！