java 代码
- package ajax.foundations_of_ajax;
- 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();
- 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);
- }
- /**
- * Handles the HTTP
GET
method. - *
- * @param request
- * servlet request
- * @param response
- * servlet response
- */
- protected void doGet(HttpServletRequest request,
- HttpServletResponse response) throws ServletException, IOException {
- 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></response>");
- out.println(" <par></par> " + data.getPar() + "");
- out.println("<length></length>" + data.getLength() + "");
- out.println("");
- 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;
- }
- }
- }
js 代码
- <script type=< span="">"text/javascript">
- var xmlHttp;
- var dataDiv;
- var dataTable;
- var dataTableBody;
- var offsetEl;
- //创建xmlhttp对象
- 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();
- offsetEl = element;
- var url = "ToolTip?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 = 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>