AJAX开发实例

最新推荐文章于 2024-07-26 00:00:00 发布

lenhan12345

最新推荐文章于 2024-07-26 00:00:00 发布

阅读量911

点赞数

分类专栏： Ajax 文章标签： ajax xmlhttprequest null javascript function url

Ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

描述：初始页面
图片：

描述：一级菜单
图片：

描述：二级菜单
图片：

使用ajax实现动态菜单。菜单内容从数据库中读取。相关表的定义如下：
CREATE TABLE [dbo].[tsys_menu] (
[mn_id] [varchar] (16) COLLATE Chinese_PRC_CI_AS NOT NULL ,
[parent_mn_id] [varchar] (16) COLLATE Chinese_PRC_CI_AS NOT NULL ,
[mn_name] [varchar] (50) COLLATE Chinese_PRC_CI_AS NOT NULL ,
[mn_order] [int] NOT NULL ,
[mn_type] [char] (1) COLLATE Chinese_PRC_CI_AS NOT NULL ,
[target_url] [varchar] (200) COLLATE Chinese_PRC_CI_AS NOT NULL ,
[exp_url] [varchar] (200) COLLATE Chinese_PRC_CI_AS NULL ,
[help_url] [varchar] (200) COLLATE Chinese_PRC_CI_AS NULL ,
[memo] [varchar] (200) COLLATE Chinese_PRC_CI_AS NULL ,
[context_type] [char] (1) COLLATE Chinese_PRC_CI_AS NULL ,
[manual_type] [char] (1) COLLATE Chinese_PRC_CI_AS NULL ,
[expert_type] [char] (1) COLLATE Chinese_PRC_CI_AS NULL ,
[case_type] [char] (1) COLLATE Chinese_PRC_CI_AS NULL
) ON [PRIMARY]
GO

此次实例使用了dev2dev.bea.com.cn中的ajax模板。原文在址如下：
http://dev2dev.bea.com.cn/bbsdoc/20051114125.html
作者：柯自聪
本人建议，所有人都认真看看那篇文章，的确写的很好。
以下是页面内容ybg-menu.htm
<html>
<head>
<title>menu</title>
<script language="javascript">
var http_request = false;
var currentPos = false;
function send_request(url) {//初始化、指定处理函数、发送请求的函数
http_request = false;
//开始初始化XMLHttpRequest对象
if(window.XMLHttpRequest) { //Mozilla 浏览器
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {//设置MiME类别
http_request.overrideMimeType("text/xml");
}
}
else if (window.ActiveXObject) { // IE浏览器
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) { // 异常，创建对象实例失败
window.alert("不能创建XMLHttpRequest对象实例.");
return false;
}
http_request.onreadystatechange = processRequest;
// 确定发送请求的方式和URL以及是否同步执行下段代码
http_request.open("GET", url, true);
http_request.send(null);
}
// 处理返回信息的函数
function processRequest() {
if (http_request.readyState == 4) { // 判断对象状态
if (http_request.status == 200) { // 信息已经成功返回，开始处理信息
document.getElementById(currentPos).innerHTML = http_request.responseText;
} else { //页面不正常
alert("您所请求的页面有异常。");
}
}
}

function showMenu(obj) {
document.getElementById(obj).parentNode.style.display = "";
document.getElementById(obj).innerHTML = "正在读取数据..."
currentPos = obj;
send_request("playMenu.jsp?parent_id="+obj);
}

</script>
</head>
<body>
<table>
<tr>
<td>
<a href="javascript:showMenu('ROOT')">ROOT</a>
<td>
</tr>
<tr>
<td id='ROOT'></td>
</tr>
</table>
</body>
</html>

以下是jsp内容playMenu.jsp

<%@ page contentType="text/html;charset=GBK"%>
<%@page import="com.jfcgf.frame.util.DbUtil"%>
<%@ page import="java.sql.*"%>

<%
DbUtil db = new DbUtil();
String parent_id = request.getParameter("parent_id");
String sql = "select mn_id,mn_name from tsys_menu where parent_mn_id = '"+parent_id+"'";
//执行上面的sql
try{
ResultSet rs = db.executeQuery(sql);
while(rs.next()){
String item = "<table><tr valign=/"top/"><td>----></td><td><a href=/"javascript:showMenu(/'"+rs.getString("mn_id")+"')/">"+
rs.getString("mn_name")+"</a></td><td id='"+rs.getString("mn_id")+"'></td></tr><br /></table>";
out.println(item);
}
}catch(Exception e){
out.println(e.toString());
}finally{
if(db != null){
db.closeConnection(); db = null;
}
}

%>
注意：DbUtil类是一个连接数据库的javabean，如果想试试上面的代码，这里需要更改成你自己的类。
附件是实现运行的截图。

lenhan12345

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
AJAX开发实例

描述：初始页面图片：描述：一级菜单图片：描述：二级菜单图片：使用ajax实现动态菜单。菜单内容从数据库中读取。相关表的定义如下：CREATE TABLE [dbo].[tsys_menu] ( [mn_id] [varchar] (16) COLLATE Chinese_PRC_CI_AS NOT NULL , [parent_mn_id] [varchar] (
复制链接

扫一扫

专栏目录