您的位置：首页 > 运维架构 > 网站架构

实验室网站所遇技术(二) AJAX实现工具提示

2012-08-05 15:29 134 查看

是用AJAX的一大优点就是实现动态工具提示，在需要提示的地方采用AJAX异步通信，从服务器端提取内容，减少页面初始化代码，提高页面渲染速度。

jsp代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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>Insert title here</title>
</head>
<body>
<script type="text/javascript">
//定义变量存放XMLHttpRequest对象
var xmlHttp;
//记录时间发生时的鼠标位置
var x,y;
//创建一个XMLHttpRequest对象
function createXMLHttpRequest() {
if(window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}

//通过AJAX与数据库交互，取得信息
function over(e,id) {
//event兼容firefox问题，这里是因为firefox不能直接使用event时间
e = e||event;
//记录时间发生时鼠标位置
x = e.clientX;
y = e.clientY;
//创建XMLHttpRequest对象
createXMLHttpRequest();
//将状态触发器绑定到一个函数
xmlHttp.onreadystatechange = processor;
xmlHttp.open("post", "agencyQuery.do?method=queryById&id=" + id);
xmlHttp.send(null);
}

//处理从服务器返回的信息
function processor() {
//存放服务器返回的响应
var result;
if(xmlHttp.readyState == 4) {
if(xmlHttp.status == 200) {
//取出服务器返回的XML文档的所有agency标签的子节点
result = xmlHttp.responseXML.getElementsByTagName("agency");
document.getElementById("tip").style.display = "block";
//显示工具提示的起始坐标
document.getElementById("tip").style.top = y;
document.getElementById("tip").style.left = x + 10;
document.getElementById("tipTable").rows[0].cells[0].innerHTML =
　　　　　　　　　　　　　　　　　　　　　　　　result[0].getElementsByTagName("title")[0].firstChild.nodeValue;
document.getElementById("tipTable").rows[1].cells[0].innerHTML =
　　　　　　　　　　　　　　　　　　　　　　　　result[0].getElementsByTagName("content")[0].firstChild.nodeValue;
}
}
}

//鼠标离开后的操作
function out() {
document.getElementById("tip").style.display = "none";
}
</script>
<a href="#" onmouseover="over(event,1); return false;" onmouseout="out(); return false;">学术委员会</a>
//隐藏图层，用于显示从服务器端返回的数据
<div id="tip" style="position: absolute;display: none;border: 1px;border-style: solid1 ">
<table id="tipTable">
<tr>
<td></td>
</tr>
<tr>
<td></td>
</tr>

</table>
</div>
</body>
</html>

action代码：

public ActionForward queryById(ActionMapping mapping,ActionForm form,HttpServletRequest request,HttpServletResponse response) throws SQLException, Exception {

ActionForward forward = new ActionForward();
AgencyServer agencyServer = new AgencyServer();
Map<String, String> m = new HashMap<String, String>();

int id = Integer.parseInt(request.getParameter("id"));
m = agencyServer.queryById(id);

if(m != null) {

response.setContentType("text/xml");
response.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
　　　　　　　　　　　　　　//封装数据
//数据以xml方式返回
out.println("<agency>");
out.println("<title>" + m.get("title") + "</title>");
out.println("<content>" + m.get("content") + "</content>");
out.println("</agency>");
out.flush();
out.close();

forward = mapping.findForward("success");
} else {
forward = mapping.findForward("failure");
}
return forward;
}

效果图：

鼠标放到学术委员会上，就显示显示相关介绍。

真是做网页发现好多地方都要用到AJAX，js特别差劲，要多练习。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航