Page: tooltip.jsp
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >
<title>ajax Tool Bar Tips </title>
<script type= "Text/javascript" >
var xmlHttp;
var Datadiv;
var dataTable;
var datatablebody;
var Offsetel;
Creating XMLHttpRequest Objects
function Createxmlhttprequest () {
if (window. ActiveXObject) {
XmlHttp = new ActiveXObject ("Microsoft.XMLHTTP");
}
else if (window. XMLHttpRequest) {
XmlHttp = new XMLHttpRequest ();
}
}
Initializing variable values
function Initvars () {
Datatablebody = document.getElementById ("Coursedatabody");
dataTable = document.getElementById ("Coursedata");
Datadiv = document.getElementById ("popup");
}
Get the course data
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);
}
callback method
function callback () {
if (xmlhttp.readystate = = 4) {
if (Xmlhttp.status = = 200) {
SetData (Xmlhttp.responsexml);
}
}
}
Set up course data
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);
}
Create a table row
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;
}
Set coordinate offset
function Setoffsets () {
var end = Offsetel.offsetwidth;
var top = calculateoffsettop (Offsetel);
DataDiv.style.border = "Black 1px solid";
DataDiv.style.left = end + + "px";
DataDiv.style.top = top + "px";
}
Calculate Top coordinate offset
function calculateoffsettop (field) {
Return Calculateoffset (field, "offsettop");
}
Calculate coordinate offsets
function Calculateoffset (field, attr) {
var offset = 0;
while (field) {
Offset + + field[attr];
field = Field.offsetparent;
}
return offset;
}
Emptying data
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>
<body>
<table id= "Courses" bgcolor= "#FFFAFA" border= "1" cellspacing= "0" cellpadding= "2"/>
<tbody>
<TR><TD id= "1" >augusta national</td></tr>
<TR><TD id= "2" >pinehurst No. 2</td></tr>
<TR><TD id= "3" >st Andrews links</td></tr>
<TR><TD id= "4" >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>
Server: Tooltipservlet.java
Package AJAXBOOK.CHAP4;
Import java.io.*;
Import Java.util.HashMap;
Import Java.util.Map;
Import javax.servlet.*;
Import javax.servlet.http.*;
public class Tooltipservlet extends HttpServlet {
Course Collection
Private MAP courses = new HashMap ();
Initializing a collection of data
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);
}
/**
* Handling Get method
* @param request HttpServletRequest
* @param response HttpServletResponse
* @throws servletexception
* @throws IOException
*/
protected void doget (HttpServletRequest request, httpservletresponse response)
Throws Servletexception, IOException {
Get parameter key
Integer key = Integer.valueof (Request.getparameter ("key"));
System.out.println ("key:" + key.tostring ());
Coursedata data = (coursedata) courses.get (key);
Build return string
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 ();
}
/** Handles the HTTP <code>POST</code> method.
* @param request servlet Request
* @param response servlet response
*/
protected void DoPost (HttpServletRequest request, httpservletresponse response)
Throws Servletexception, IOException {
Doget (request, response);
}
/** Returns A short description of the servlet.
*/
Public String Getservletinfo () {
Return "Short description";
}
/**
* Internal classes, courses
* <p>title: </p>
* <p>description: </p>
* <p>copyright:copyright (c) 2006</p>
* <p>company: </p>
* @author not attributable
* @version 1.0
*/
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;
}
}
}
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
