不错的Ajax创建工具提示
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML4.0Transitional//EN">
<HTML>
<HEAD>
<TITLE>New Document</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<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
{
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,textNode;
row=document.createElement("tr");
cell=document.createElement("td");
cell.setAttribute("bgcolor","#FFFAFA");
cell.setAttribute("border",0);
textNode=document.createTextNode(data);
cell.appendChild(textNode);
row.appendChild(cell);
return row;
}
function setOffsets()
{
var end=offsetEl.offsetWidth;
var top=calculateOffsetTop(offsetEl);
dataDiv.style.border="black1px solid";
dataDiv.style.left=end+15+"px";
dataDiv.style.top=top+1+"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 index=dataTableBody.childNodes.length;
for(var i=index-1;i>=0;i--)
{
dataTableBody.removeChild(dataTableBody.childNodes[i]);
}
dataDiv.style.border="none";
}
</script>
<h1>Ajax Tool Tip Example</h1>
<h3>Golf Coursers</h3>
<table id="courses" bgcolor="#FFFAFA" border="1" cellpadding="0" cellspacing="0">
<tbody>
<tr><td id="1" onmouseover="getCourseData(this);" onmouseout="clearData()">
Augusta 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()">
Baltusrol golf club
</td></tr>
</tbody>
</table>
<div style="position:absolute;" id="popup">
<table id="courseData" bgcolor="#fffafa" border="0" cellpadding="2" cellspacing="2">
<tbody id="courseDataBody"></tbody>
</table>
</div>
</BODY>
</HTML>
-----------ToopTipServlet.java-----------------------------
package com.ajax;
import java.io.*;
import java.util.HashMap;
import java.util.Map;
import javax.servlet.*;
import javax.servlet.http.*;
public class ToolTipServlet extends HttpServlet
{
private Map courses=new HashMap();
public void init(ServletConfig conifg)throws ServletException
{
CourseData augusta=new CourseData(72,7290);
CourseData pinehurst=new CourseData(70,7214);
CourseData standrews=new CourseData(72,6565);
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);
}
protected void doGet(HttpServletRequest request,HttpServletResponse response)throws IOException,ServletException
{
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;
}
}
}