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

是用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="#" οnmοuseοver="over(event,1); return false;" οnmοuseοut="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;
	}

效果图：

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