Ajax的工具提示例子 - hwoarangzk的博客

作者在 2008-01-15 13:53:01 发布以下内容

仍然是《Ajax基础教程》上的，作了点小修改。其实只要你能够理解整个过程，也能写一个属于自己的工具提示。先看代码。
toolTip.jsp:

<%@ 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>

<title>Ajax Tool Tip Example</title>

var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

var dataDiv;

var dataTable;

var dataTableBody;

var offsetEl;

function initVars() {

dataTableBody = document.getElementById("courseDataBody");

dataTable = document.getElementById("courseData");

dataDiv = document.getElementById("popup");

}

function getCourseData(element) {

initVars();

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);

document.getElementById("myPar").value=par;

document.getElementById("myLength").value=length;

}

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/>

<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>

</tr>

</tbody>

</table>

</table>

</div>

<br/>

<tr>

</tr>

<tr>

<td>Length:</td>

</tr>

</table>

</body>

</html>
然后是ToolTipServlet.java:

package src;

import java.io.IOException;

import java.io.PrintWriter;

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;

public class ToolTipServlet extends javax.servlet.http.HttpServlet implements javax.servlet.Servlet {

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();

}

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 ut = response.getWriter();

out.println("<response>");

out.println("<par>" + data.getPar() + "</par>");

out.println("<length>" + data.getLength() + "</length>");

out.println("</response>");

out.close();

}

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;

}

}
在toolTip.jsp页面，有4栏信息，当鼠标移动到不同的信息上时旁边将会跳出相应的提示信息。大概讲下流程。courses表格中有4个课程，每个课程有自己的id，当鼠标指向某个课程时，触发onmouseover事件，从而调用getCourseData()函数，并将该课程的id传给该函数。然后该函数将课程id放在xmlHttpRequest请求中发送给servlet。在servlet中，就简单的初始化了4个消息，即CourseData a,b,c,d。在doGet()方法中，先得到由请求传来的id，放入key，然后根据key的内容来得到是哪一个工具提示信息，然后写进一个XML文件中，再传回toolTip.jsp。接下来就是得到回传过来的内容，然后算出提示信息的位置，再将这些信息显示出来。如果觉得计算位置麻烦的话，可以像我在最后加了两个text文本框，在这里面实时显示提示信息。
注意！如果代码直接copy不能运行，请参照前几篇关于Ajax的文章，里面介绍了无法运行可能的原因。