`
wangtong40
  • 浏览: 248706 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

AJAX基础教程－8 Tool Tips

AjaxServletJavaScriptCacheMicrosoft
阅读更多
java 代码
  1. package ajax.foundations_of_ajax;   
  2.   
  3. import java.io.IOException;   
  4. import java.io.PrintWriter;   
  5. import java.util.HashMap;   
  6. import java.util.Map;   
  7.   
  8. import javax.servlet.ServletConfig;   
  9. import javax.servlet.ServletException;   
  10. import javax.servlet.http.HttpServlet;   
  11. import javax.servlet.http.HttpServletRequest;   
  12. import javax.servlet.http.HttpServletResponse;   
  13.   
  14. public class ToolTipServlet extends HttpServlet {   
  15.     private Map courses = new HashMap();   
  16.   
  17.     public void init(ServletConfig config) throws ServletException {   
  18.         CourseData augusta = new CourseData(72, 7290);   
  19.         CourseData pinehurst = new CourseData(70, 7214);   
  20.         CourseData standrews = new CourseData(72, 6566);   
  21.         CourseData baltusrol = new CourseData(70, 7392);   
  22.         courses.put(new Integer(1), augusta);   
  23.         courses.put(new Integer(2), pinehurst);   
  24.         courses.put(new Integer(3), standrews);   
  25.         courses.put(new Integer(4), baltusrol);   
  26.     }   
  27.   
  28.     /**  
  29.      * Handles the HTTP GET method.  
  30.      *   
  31.      * @param request  
  32.      *            servlet request  
  33.      * @param response  
  34.      *            servlet response  
  35.      */  
  36.     protected void doGet(HttpServletRequest request,   
  37.             HttpServletResponse response) throws ServletException, IOException {   
  38.         Integer key = Integer.valueOf(request.getParameter("key"));   
  39.         CourseData data = (CourseData) courses.get(key);   
  40.         PrintWriter out = response.getWriter();   
  41.         response.setContentType("text/xml");   
  42.         response.setHeader("Cache-Control", "no-cache");   
  43.         out.println("<response></response>");   
  44.         out.println(" <par></par> " + data.getPar() + "");   
  45.         out.println("<length></length>" + data.getLength() + "");   
  46.         out.println("");   
  47.         out.close();   
  48.     }   
  49.   
  50.     private class CourseData {   
  51.         private int par;   
  52.   
  53.         private int length;   
  54.   
  55.         public CourseData(int par, int length) {   
  56.             this.par = par;   
  57.             this.length = length;   
  58.         }   
  59.   
  60.         public int getPar() {   
  61.             return this.par;   
  62.         }   
  63.   
  64.         public int getLength() {   
  65.             return this.length;   
  66.         }   
  67.     }   
  68. }   
js 代码
  1. <script type=< span="">"text/javascript">   
  2. var xmlHttp;   
  3. var dataDiv;   
  4. var dataTable;   
  5. var dataTableBody;   
  6. var offsetEl;   
  7.     //创建xmlhttp对象   
  8.     function createXMLHttpRequest() {   
  9.         if (window.ActiveXObject) {   
  10.         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");   
  11.         }   
  12.         else if (window.XMLHttpRequest) {   
  13.         xmlHttp = new XMLHttpRequest();   
  14.         }   
  15.     }   
  16.     //初始化变量   
  17.     function initVars() {   
  18.         dataTableBody = document.getElementById("courseDataBody");   
  19.         dataTable = document.getElementById("courseData");   
  20.         dataDiv = document.getElementById("popup");   
  21.     }   
  22.        
  23.        
  24.     function getCourseData(element) {   
  25.         initVars();   
  26.         createXMLHttpRequest();   
  27.         offsetEl = element;   
  28.         var url = "ToolTip?key=" + escape(element.id);   
  29.         xmlHttp.open("GET", url, true);   
  30.         xmlHttp.onreadystatechange = callback;   
  31.         xmlHttp.send(null);   
  32.     }   
  33.     function callback() {   
  34.         if (xmlHttp.readyState == 4) {   
  35.         if (xmlHttp.status == 200) {   
  36.             setData(xmlHttp.responseXML);   
  37.         }   
  38.         }   
  39.     }   
  40.     function setData(courseData) {   
  41.         clearData();   
  42.         setOffsets();   
  43.         var length =   
  44.         courseData.getElementsByTagName("length")[0].firstChild.data;   
  45.         var par = courseData.getElementsByTagName("par")[0].firstChild.data;   
  46.         var row, row2;   
  47.         var parData = "Par: " + par   
  48.         var lengthData = "Length: " + length;   
  49.         row = createRow(parData);   
  50.         row2 = createRow(lengthData);   
  51.         dataTableBody.appendChild(row);   
  52.         dataTableBody.appendChild(row2);   
  53.     }   
  54.     function createRow(data) {   
  55.         var row, cell, txtNode;   
  56.         row = document.createElement("tr");   
  57.         cell = document.createElement("td");   
  58.         cell.setAttribute("bgcolor", "#FFFAFA");   
  59.         cell.setAttribute("border", "0");   
  60.         txtNode = document.createTextNode(data);   
  61.         cell.appendChild(txtNode);   
  62.         row.appendChild(cell);   
  63.         return row;   
  64.     }   
  65.     function setOffsets() {   
  66.         var end = offsetEl.offsetWidth;   
  67.         var top = calculateOffsetTop(offsetEl); //计算定点坐标   
  68.         dataDiv.style.border = "black 1px solid";   
  69.         dataDiv.style.left = end + 15 + "px";   
  70.         dataDiv.style.top = top + "px";   
  71.     }   
  72.     function calculateOffsetTop(field) {   
  73.         return calculateOffset(field, "offsetTop");   
  74.     }   
  75.     function calculateOffset(field, attr) {   
  76.         var offset = 0;   
  77.         while(field) {   
  78.         offset += field[attr];   
  79.         field = field.offsetParent;   
  80.         }   
  81.         return offset;   
  82.     }   
  83.     function clearData() {   
  84.         var ind = dataTableBody.childNodes.length;   
  85.         for (var i = ind - 1; i >= 0 ; i--) {   
  86.         dataTableBody.removeChild(dataTableBody.childNodes[i]);   
  87.         }   
  88.     dataDiv.style.border = "none";   
  89.     }   
  90. </script>  
分享到：
| AJAX基础教程－7 AutoRefresh Page
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics