自己可以根据需要，制定动态加载的数据的格式。根据项目需要，曾经写过表格形式。在这里，选用列表形式显示数据。
选用的环境：eclipse
使用的语言：JavaScript，Java，JSP，HTML
采用的方法：使用JavaScript书写端口，调用JSP传递参数，接收数据，将数据在主页面显示，从而完成数据交互。
实现功能的源代码：
1. 主页面的HTML源代码
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>数据源列表显示</title>
<script type=text/javascript src="/MIS_Frame_0.1/src/prototype.js"></script>
<script type=text/javascript src="/MIS_Frame_0.1/GetDSLists.js"></script>
<script type="text/javascript">
var applicationRoot = "/MIS_Frame_0.1/";
</script>
</head>
<body onLoad="javascript:getdslists();">
<h1>已封装的资源列表</h1>
<hr/>
<div id="leftDiv"></div>
</body>
</html>
2. 用到的CSS源代码
<style type="text/css">
div, li {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: small;
}
ul {
position:relative;
list-style: none;
margin:0; padding:0;
overflow: visible;
}
li {position:relative;}
#leftDiv {
position: absolute;
top: 16%; left: 0; bottom: 0;
width: 30%;
margin: 0; padding: 7px;
border-right: 2px solid #bb9;
background-color: #eed;
}
#leftDiv li {
margin: 3px 0; padding: 3px 3em 3px 10px;
border: 2px solid #456;
background-color: #cde;
cursor: move;
}
</style>
3. 用到的JavaScript源代码
方法一：原始的方法，没有使用Ajax框架
function getdslists()
{
createXMLHttpRequest();
xmlHttp.open("POST",applicationRoot + "/GetDSLists.jsp",true);
xmlHttp.onreadystatechange=handleStateChange;
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send(null);
}
var xmlHttp;
function createXMLHttpRequest()
{
if(window.ActiveXObject)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttRequest)
{
xmlHttp=new XMLHttpRequest();
}
}
function handleStateChange()
{
if(xmlHttp.readyState==4)
{
//alert("ok");
if(xmlHttp.status==200)
{
//alert("ok,good");
//alert(xmlHttp.responseText);
document.getElementById("leftDiv").innerHTML=xmlHttp.responseText;
}else {alert("wrong wrong");}
}
}
方法二：使用Ajax的prototype框架
function GetData()
{
var myAjax = new Ajax.Request(
applicationRoot + "/GetDSLists.jsp?",
{
method: 'POST',
onComplete: GetData
}
);
}
function GetData(response)
{
document.getElementById("leftDiv").innerHTML=xmlHttp.responseText;
}
4. JSP源代码
<%@ page contentType="text/xml;charset=GB2312"%>
<%@ page import="manage.*" %>
<%
String result = "<?xml version=\"1.0\" encoding=\"UTF-8\"?>";
ShowDSNameList dsnamelist = new ShowDSNameList();
String path = "E:/xml";
String aa = dsnamelist.GetListName(path);
result = result + aa;
response.setContentType("text/xml");
out.clear();
out.print(result);
%>
5. 核心的Java代码
package manage;
import java.io.BufferedReader;
import java.io.File;
import java.io.FileReader;
import java.io.FileWriter;
import java.io.IOException;
import org.dom4j.DocumentException;
import org.dom4j.DocumentHelper;
import org.dom4j.Document;
public class ShowDSNameList
{
/**
* @return 读取 path("e:/xml")下所有的文件，返回一个xml格式的字符串
*/
public String GetListName(String path)
{
String listname = "";
StringBuffer ListName = new StringBuffer();
try
{
String filepath = path;
File file1 = new File(filepath);
File file[] = file1.listFiles();
System.out.println(file.length);
int count = 0;
ListName.append("\n\r<ul id=\"masterList\">");
for (int i=0; i<file.length; i++)
{
if (file[i].isFile())
count++;
ListName.append("\n\r <li id=\"drag");
ListName.append(count);
ListName.append("\">");
String aa = file[i].getName().toString();
String ff = aa.substring(0,aa.indexOf("."));
ListName.append(ff);
ListName.append("</li>");
}
ListName.append("\n\r</ul>");
listname = ListName.toString();
}catch (Exception e){e.printStackTrace();}
return listname;
}
}
以上是实现“以列表形式显示动态加载的数据”功能的所有源代码，需要它的朋友，可以根据列出的内容整理一下，然后在tomcat下试运行。如有问题，请提出。
