Ajax_创建工具提示

JSP部分:

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

   <title>My JSP 'index.jsp' starting page</title>
   <meta http-equiv="pragma" content="no-cache">
   <meta http-equiv="cache-control" content="no-cache">
   <meta http-equiv="expires" content="0">
   <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
   <meta http-equiv="description" content="This is my page">
   <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 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 = "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 = 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>
   <h3>
    Golf Courses
   </h3>
   <table id="courses" bgcolor="#FFFAFA" border="1"   cellspacing="0"
    cellpadding="2" />
    <tbody>
     <tr>
      <td id="1" οnmοuseοver="getCourseData(this);"
         οnmοuseοut="clearData();">
       Augusta National
      </td>
     </tr>
     <tr>
      <td id="2" οnmοuseοver="getCourseData(this);"
         οnmοuseοut="clearData();">
       Pinehurst No. 2
      </td>
     </tr>
     <tr>
      <td id="3" οnmοuseοver="getCourseData(this);"
         οnmοuseοut="clearData();">
       St. Andrews Links
      </td>
     </tr>
     <tr>
      <td id="4" οnmοuseοver="getCourseData(this);"
         οnmοuseοut="clearData();">
       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>
</html>

Servlet部分:

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

public void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
   this.doPost(request, response);
}

public void doPost(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>");
   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;
   }
}
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值