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

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

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

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

 <servlet>    <servlet-name>dwr-invoker</servlet-name>    <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>    <init-param>      <param-name>debug</param-name>      <param-value>true</param-value>    </init-param>    <init-param>          <param-name>crossDomainSessionSecurity</param-name>          <param-value>false</param-value>      </init-param>   </servlet>  <servlet-mapping>    <servlet-name>dwr-invoker</servlet-name>    <url-pattern>/dwr/*</url-pattern>  </servlet-mapping>  

这里需要注意一点，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统计的文件夹下：

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://getahead.org/dwr/dwr20.dtd"><dwr>  <allow>      <create creator="new" javascript="T1">      <param name="class" value="com.gxpt.struts2.Test1"/>    </create>  </allow></dwr>

好了，准备工作基本上就做好了，剩下的就看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页面要好写很多，但是有些功能实现起来却比较困难。

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