Ajax创建工具提示

xiangtui

浏览: 302315 次
性别:
来自: 成都

最近访客更多访客>>

DeilSky

ken_blok

mingletxt

liangzi_001

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

AJAX

Ajax Servlet 浏览器 HTML JavaScript

文件一览

toolTip.html
ProgressBarServlet.java

toolTip.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax Tool Tip</title>
<script type="text/javascript">
var xmlHttp;
var dataDiv;
var dataTable;
var dataTableBody;
var offsetE1;

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();
	offsetE1 = 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 = offsetE1.offsetWidth;
	var top = calculateOffsetTop(offsetE1);
	dataDiv.style.border = "black 1px solid";
	dataDiv.style.left = end + 15 + "px";
	dataDiv.style.top = top + "px";
}

function calculateOffsetTop(field) {
    //offsetTop：相对于父容器的top
	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]);
	}
	//把border设为"none"即没有，浏览器解析"none"时将不作出渲染动作，即不会消耗内存值
	//把border设为"0"像素虽然在页面上看不见，但按border默认值理解，
	//浏览器依然对border-width/border-color进行了渲染，即已经占用了内存值。
	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" onmouseover="getCourseData(this);" onmouseout="clearData();">Augusta National</td></tr>
		<tr><td id="2" onmouseover="getCourseData(this);" onmouseout="clearData();">Pinehurse 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 id="popup" style="position:absolute">
	<table id="courseData" bgcolor="#FFFAFA" border="0" cellspacing="2" cellpadding="2">
		<tbody id="courseDataBody"></tbody>
	</table>
</div>
</body>
</html>

ProgressBarServlet.java

package ajaxbook.chap4;

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.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class ToolTipServlet extends HttpServlet {
	
	private Map courses = new HashMap();

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		Integer key = Integer.valueOf(req.getParameter("key"));
		CourseData data = (CourseData)courses.get(key);
		PrintWriter out = resp.getWriter();
		resp.setContentType("text/xml");
		resp.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();
	}

	@Override
	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);
	}
	
	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;
		}
	}
	
}