JSP部分：
<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head>
<title>My JSP 'index.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0"> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"> <script type="text/javascript"> var xmlHttp; var dataDiv; var dataTable; var dataTableBody; var offsetEl; function createXMLHttpRequest() { if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } } function initVars() { dataTableBody = document.getElementById("courseDataBody"); dataTable = document.getElementById("courseData"); dataDiv = document.getElementById("popup"); } function getCourseData(element) { initVars(); createXMLHttpRequest(); offsetEl = element; var url = "ToolTipServlet?key=" + escape(element.id); xmlHttp.open("GET", url, true); xmlHttp.onreadystatechange = callback; xmlHttp.send(null); }
function callback() { if (xmlHttp.readyState == 4) { if (xmlHttp.status == 200) { setData(xmlHttp.responseXML); } } } function setData(courseData) { clearData(); setOffsets(); var length = courseData.getElementsByTagName("length")[0].firstChild.data; var par = courseData.getElementsByTagName("par")[0].firstChild.data; var row, row2; var parData = "Par: " + par var lengthData = "Length: " + length; row = createRow(parData); row2 = createRow(lengthData); dataTableBody.appendChild(row); dataTableBody.appendChild(row2); } function createRow(data) { var row, cell, txtNode; row = document.createElement("tr"); cell = document.createElement("td"); cell.setAttribute("bgcolor", "#FFFAFA"); cell.setAttribute("border", "0"); txtNode = document.createTextNode(data); cell.appendChild(txtNode); row.appendChild(cell); return row; } function setOffsets() { var end = offsetEl.offsetWidth; var top = calculateOffsetTop(offsetEl); dataDiv.style.border = "black 1px solid"; dataDiv.style.left = end + 15 + "px"; dataDiv.style.top = top + "px"; } function calculateOffsetTop(field) { return calculateOffset(field, "offsetTop"); } function calculateOffset(field, attr) { var offset = 0; while(field) { offset += field[attr]; field = field.offsetParent; } return offset; } function clearData() { var ind = dataTableBody.childNodes.length; for (var i = ind - 1; i >= 0 ; i--) { dataTableBody.removeChild(dataTableBody.childNodes[i]); } dataDiv.style.border = "none"; } </script></head><body> <h1> Ajax Tool Tip Example </h1> <h3> Golf Courses </h3> <table id="courses" bgcolor="#FFFAFA" border="1" cellspacing="0" cellpadding="2" /> <tbody> <tr> <td id="1" οnmοuseοver="getCourseData(this);" οnmοuseοut="clearData();"> Augusta National </td> </tr> <tr> <td id="2" οnmοuseοver="getCourseData(this);" οnmοuseοut="clearData();"> Pinehurst No. 2 </td> </tr> <tr> <td id="3" οnmοuseοver="getCourseData(this);" οnmοuseοut="clearData();"> St. Andrews Links </td> </tr> <tr> <td id="4" οnmοuseοver="getCourseData(this);" οnmοuseοut="clearData();"> Baltusrol Golf Club </td> </tr> </tbody> </table> <div style="position:absolute;" id="popup"> <table id="courseData" bgcolor="#FFFAFA" border="0" cellspacing="2" cellpadding="2" /> <tbody id="courseDataBody"></tbody> </table> </div></body></html>
Servlet部分：
public class ToolTipServlet extends HttpServlet {
private Map courses = new HashMap();
public void init(ServletConfig config) throws ServletException { CourseData augusta = new CourseData(72, 7290); CourseData pinehurst = new CourseData(70, 7214); CourseData standrews = new CourseData(72, 6566); CourseData baltusrol = new CourseData(70, 7392); courses.put(new Integer(1), augusta); courses.put(new Integer(2), pinehurst); courses.put(new Integer(3), standrews); courses.put(new Integer(4), baltusrol);}
public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request, response);}
public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { Integer key = Integer.valueOf(request.getParameter("key")); CourseData data = (CourseData) courses.get(key); PrintWriter out = response.getWriter(); response.setContentType("text/xml"); response.setHeader("Cache-Control", "no-cache"); out.println("<response>"); out.println("<par>" + data.getPar() + "</par>"); out.println("<length>" + data.getLength() + "</length>"); out.println("</response>"); out.close();}
private class CourseData { private int par;
private int length;
public CourseData(int par, int length) { this.par = par; this.length = length; }
public int getPar() { return this.par; }
public int getLength() { return this.length; }}}
