<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Ajax Tool Tip Example</title>
<script>
var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
var dataDiv;
var dataTable;
var dataTableBody;
var offsetEl;
function initVars() {
//alert("initVars");
dataTableBody = document.getElementById("courseDataBody");
dataTable = document.getElementById("courseData");
dataDiv = document.getElementById("popup");
}
function getCourseData(element) {
//alert("getCourseData");
initVars();
offsetEl = element;
var url = "ToolTipServlet?key=" + escape(element.id);
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = callback;
xmlHttp.send(null);
}
function callback() {
//alert("callback1");
if (xmlHttp.readyState == 4) {
//alert("callback");
if (xmlHttp.status == 200) {
alert("callback2");
setData(xmlHttp.responseXML);
}
}
}
function setData(courseData) {
//alert("setData");
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><br/>
<h3>Golf Course</h3><br/>
<table id="courses" bgcolor="#FFFAFA" border="1" cellspacing="0" cellpadding="2" >
<tbody>
<tr>
<td id="1" onmouseover="getCourseData(this);" onmouseout="clearData();" >August National</td>
</tr>
<tr>
<td id="2" onmouseover="getCourseData(this);" onmouseout="clearData();" >Pinehurst No.2</td>
</tr>
<tr>
<td id="3" onmouseover="getCourseData(this);" onmouseout="clearData();" >St. Andrews Links</td>
</tr>
<tr>
<td id="4" onmouseover="getCourseData(this);" onmouseout="clearData();" >Golf Club</td>
</tr>
</tbody>
</table>
<div style="position:absolute;" id="popup">
<table id="courseData" bgcolor="#FFFAFA" border="1" cellspacing="0" cellpadding="2">
<tbody id="courseDataBody"></tbody>
</table>
</div>
</body>
</html>
然后是servlet:
package src;
import
import
import java.util.HashMap;
import java.util.Map;
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class for Servlet: ToolTipServlet
*
*/
public class ToolTipServlet extends javax.servlet.http.HttpServlet implements javax.servlet.Servlet {
/* (non-Java-doc)
* @see javax.servlet.http.HttpServlet#HttpServlet()
*/
private Map courses = new HashMap();
public void init(ServletConfig config) throws ServletException {
CourseData a = new CourseData(72, 7290);
CourseData b = new CourseData(70, 7214);
CourseData c = new CourseData(72, 6566);
CourseData d = new CourseData(70, 7392);
courses.put(new Integer(1), a);
courses.put(new Integer(2), b);
courses.put(new Integer(3), c);
courses.put(new Integer(4), d);
}
public ToolTipServlet() {
super();
}
/* (non-Java-doc)
* @see javax.servlet.http.HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
Integer key = Integer.valueOf(request.getParameter("key"));
CourseData data = (CourseData)courses.get(key);
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
PrintWriter out = response.getWriter();
out.println("<response>");
out.println("<par>" + data.getPar() + "</par>");
out.println("<length>" + data.getLength() + "</length>");
out.println("</response>");
out.close();
}
/* (non-Java-doc)
* @see javax.servlet.http.HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
private class CourseData {
private int par;
private int length;
public CourseData(int par, int length) {
this.par = par;
this.length = length;
}
public int getLength() {
return length;
}
public int getPar() {
return par;
}
}
}
红色那行上周怎么样都输不出来，今天一来就好了...
