`

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" onmouseover="getCourseData(this);"
         onmouseout="clearData();">
       Augusta 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>
      <td id="4" onmouseover="getCourseData(this);"
         onmouseout="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;
   }
}
}

分享到:
评论

相关推荐

    Telerik_UI_for_ASP.NET_AJAX_2018_1_117_Dev

    通过使用AJAX,开发者可以创建无刷新的用户体验,提高应用的响应速度和用户体验。 3. **Telerik UI for ASP.NET AJAX特性** - **组件丰富**:包括表格、日历、图表、树形视图、网格、下拉列表、按钮、提示框等众多...

    ajax_on_java.rar_ajax

    总之,Ajax在Java平台上的应用丰富多样,通过结合Servlet、JSP、Java框架等工具,开发者可以创建出交互性强、用户体验优秀的Web应用。学习并熟练掌握Ajax和Java的结合,对于提升Web开发技能至关重要。

    ncnt.rar_M3V_ajax_blanketsts_drovepv6_personal

    标题 "ncnt.rar_M3V_ajax_blanketsts_drovepv6_personal" 提示这是一个与M3V框架相关的项目,可能包含对Ajax、BlanketSTS(可能是某种测试套件)和DrovePV6(可能是某种协议或组件)的个人定制和错误修复。...

    Ajax+JSON 搜索框自动完成提示功能

    标题 "Ajax+JSON 搜索框自动完成提示功能" 涉及的是网页开发中的一个常见技术,用于提高用户输入体验。Ajax(异步JavaScript和XML)是Web开发中的一种技术,它允许页面在不重新加载整个页面的情况下与服务器交换数据...

    Struts2+Ajax_模拟登陆Demo,包完整

    8. **调试与测试**:学习如何对Struts2和Ajax的组合进行调试和测试,包括前端的浏览器开发者工具和后端的日志记录。 这个"Struts2+Ajax_模拟登陆Demo"提供了一个实际操作的平台,帮助开发者熟悉这两项技术的结合...

    SSH2_jQuery_Ajax_Register2

    在这个项目中,开发者可能详细讲解了如何整合这些技术来创建一个动态、异步的Web应用程序。 SSH2框架是Java Web开发中的常见选择,它提供了模型-视图-控制器(MVC)架构,数据持久化以及动作调度等功能。Spring框架...

    wf.rar_ASP.NET MVC_ajax_mvc_智能表单_管理系统mvc

    在ASP.NET MVC中,可以通过Entity Framework这样的ORM(对象关系映射)工具轻松处理这些操作,它允许开发者用面向对象的方式来操作数据库,减少了直接编写SQL语句的需要。 “MVC管理系统”可能包括用户管理、角色...

    ajax教程_Ajax教程_

    - 用户体验:过多的Ajax交互可能导致页面感觉“卡顿”,合理设计加载提示,提高用户感知。 ## 5. 学习资源 - **《Ajax实战》**:深入浅出的Ajax技术书籍,适合初学者和进阶者。 - **MDN Web文档**:详尽的Web开发...

    ajax 弹出提示 例子

    总结,使用Ajax实现弹出提示功能涉及创建XMLHttpRequest对象、发送请求、处理响应以及使用DOM操作显示提示。结合良好的用户体验设计和错误处理机制,可以提供更加流畅的交互体验。随着技术的发展,我们还有更多工具...

    Ajax Hacks中文版 创建快速响应Web站点的工具和技巧

    ### Ajax Hacks中文版:创建快速响应Web站点的工具和技巧 #### Ajax技术概览 Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。这种技术使得Web应用程序...

    实用工具类AjaxResponse

    7. **静态方法**:为了方便使用,工具类往往会提供一些静态工厂方法,用于快速创建AjaxResponse实例,比如`AjaxResponse.success()`或`AjaxResponse.error(String message)`。 通过这样的设计,开发人员可以避免在...

    消息提示框 js ajax

    本文将深入探讨如何使用JavaScript(JS)和Ajax技术来创建一款类似于QQ弹窗的炫酷消息提示框。 首先,我们来了解JavaScript(JS)。JavaScript是一种轻量级的解释型编程语言,广泛应用于网页和网络应用开发。它主要...

    01_基于SSM框架开发的CRM系统_ssm+layui_ssm_spring+ajax_spring系统_objecth4v_

    5. **Ajax**:Ajax(异步JavaScript和XML)技术在CRM系统中用于实现页面的无刷新更新,提高了用户的交互体验。通过JavaScript发送异步请求到服务器,获取数据后在客户端更新部分页面,而无需刷新整个页面。 6. **...

    Ajax开发工具技术

    本文将详细介绍如何在Visual Studio(VS)2005、2008和2010中安装并使用Ajax开发工具。 首先,我们需要安装Ajax扩展。文件"ASPAJAXExtSetup.msi"就是用于这个目的的安装程序。运行此文件,系统会引导你完成安装过程...

    Ajax弹出提示框源码示例

    总结来说,这个"Ajax弹出提示框源码示例"是一个实用的Web开发工具,它展示了如何利用Ajax技术实现动态提示框,以及如何通过JavaScript增强用户体验。开发者可以在此基础上进行修改和扩展,以适应自己的项目需求。...

    ASP.NET AJAX控件工具包

    ASP.NET AJAX 控件工具包是ASP.NET框架的一部分,它提供了丰富的客户端控件和扩展器,以增强Web应用程序的用户体验和交互性。这个工具包利用AJAX(Asynchronous JavaScript and XML)技术,允许部分页面更新,减少了...

    ajax_uploader:Ajax图像上传器PHP和Javascript源代码-ajax source code

    1. **Ajax技术**:Ajax的核心是创建XMLHttpRequest对象,用于在后台与服务器进行数据交换。在这个项目中,JavaScript会使用Ajax调用来发送文件数据到服务器,同时接收服务器返回的响应。 2. **PHP后端处理**:PHP...

    jquery实现ajax搜索框下拉提示小插件jSuggest

    **jQuery实现AJAX搜索框下拉提示小插件...总之,jSuggest插件是一个实用的工具,能够轻松地实现AJAX搜索框的下拉提示功能。开发者可以通过调整配置和扩展功能,以适应各种复杂的应用场景,为用户提供更流畅的搜索体验。

    ajax disable_control_extender

    Ajax的核心是通过JavaScript创建XMLHttpRequest对象,这个对象是浏览器内置的,允许我们与服务器进行异步通信。当用户触发一个事件(如点击按钮),JavaScript会发送一个请求到服务器,服务器处理请求并返回结果。...

    【AJAX】传统JavaScript实现AJAX的小栗子

    "工具"可能指的是使用AJAX可以构建的实用工具或功能,比如动态数据加载、表单提交等。 **文件名称解析:** "AJAX_01_helloAJAX" 文件名可能是示例代码或教程的第一部分,以"helloAJAX"为示例,这通常用于介绍基本...

Global site tag (gtag.js) - Google Analytics