`
liss
  • 浏览: 842765 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

让ajax中实现提示框

    博客分类：
  • Ajax
AjaxServletJavaScriptHTMLCache 
阅读更多

tooTip.html:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
　　
<html>
　<head>
　　<title>Ajax Tooltip</title>
　　<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 Tooltip 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>

ToolTipServlet.java:
　　
/*
* ToolTipServlet.java
*
* Created on June 30, 2005, 8:29 PM
*/
　　
package ajaxbook.chap4;
　　
import java.io.*;
import java.util.HashMap;
import java.util.Map;
　　
import javax.servlet.*;
import javax.servlet.http.*;
　　
/**
*
* @author nate
* @version
*/
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 <code>GET</code> 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>");
　　　　out.println("<par>" + data.getPar() + "</par>");
　　　　out.println("<length>" + data.getLength() + "</length>");
　　　　out.println("</response>");
　　　　out.close();
　　}
　　
　　/** Handles the HTTP <code>POST</code> method.
　　 * @param request servlet request
　　 * @param response servlet response
　　 */
　　protected void doPost(HttpServletRequest request, HttpServletResponse response)
　　throws ServletException, IOException {
　　　　doGet(request, response);
　　}
　　　　
　　/** Returns a short description of the servlet.
　　 */
　　public String getServletInfo() {
　　　　return "Short description";
　　}
　　
　　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;
　　　　}
　　}
}

 

　　注释：提示框的位置是计算距离顶部的距离

　　eg:

　　假设 obj 为某个 HTML 控件。

　　obj.offsetTop 指 obj 距离上方或上层控件的位置，整型，单位像素。

　　obj.offsetLeft 指 obj 距离左方或上层控件的位置，整型，单位像素。

　　obj.offsetWidth 指 obj 控件自身的宽度，整型，单位像素。

　　obj.offsetHeight 指 obj 控件自身的高度，整型，单位像素。

分享到：
| AJAX+JSP实现基于WEB的文件上传的进度控制 ...
评论
发表评论

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

相关推荐

    Ajax+servlet实现搜索框智能提示

    每当用户在搜索框中输入字符，触发JavaScript函数。 2. **JavaScript**：这个函数构建一个Ajax请求，通常使用`XMLHttpRequest`对象或更现代的`fetch` API。请求的URL指向Servlet，同时带上用户输入的查询参数。 3....

    Ajax弹出提示框源码示例

    Ajax弹出提示框是一种在网页上实现动态交互体验的技术，它允许我们在不刷新整个页面的情况下更新部分页面内容。本示例中的"Ajax弹出提示框源码"展示了一个功能完善的弹窗系统，其中包括了Ajax技术、提示框效果、页面...

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

    在搜索框中实现自动完成提示功能，通常会监听用户在搜索框中输入的字符，当用户输入达到一定长度时，通过Ajax发送请求到服务器。服务器接收到请求后，会查询与输入相关的数据，这些数据通常以JSON格式返回。在前端，...

    Ajax 实现右下角提示框

    右下角提示框 源码（ajax实现）稍加修改 就可以成为自己的了。。。

    Ajax实现右下角提示框 修正版

    总的来说，利用Ajax实现右下角提示框是提升网站或应用交互性的有效方式，而通过对代码的修正和优化，我们可以让这一功能更加符合用户的实际需求和偏好。在实际开发中，不断学习和实践这些技术，将有助于提升你的前端...

    jsp ajax 实现百度中文搜索框

    当用户在搜索框中输入查询时，Servlet接收到请求，处理查询逻辑，并将结果返回给前端。 **3. MySQL数据库** MySQL是一个广泛使用的开源关系型数据库管理系统。在这个搜索应用中，MySQL用于存储各种数据，如搜索历史...

    Jquery AutoComplete组件+Ajax实现搜索框输入提示功能小记

    ### Jquery AutoComplete组件+Ajax实现搜索框输入提示功能详解 #### 前言 在当前Web应用开发中，提供良好的用户体验是至关重要的。本文主要介绍如何使用Jquery AutoComplete组件与Ajax技术来实现搜索框的实时输入...

    Servlet+Ajax实现搜索框智能提示

    "Servlet+Ajax实现搜索框智能提示"的案例就是针对这一需求的一个解决方案，它模仿了百度搜索引擎的实时搜索建议功能。在这个系统中，用户在输入框中输入关键词时，后台服务器会通过Servlet处理请求，动态地返回与...

    ajax+servlet原生实现智能提示框

    在这个"ajax+servlet原生实现智能提示框"的主题中，我们将深入探讨如何利用这两项技术来创建一个实时、动态的用户输入提示功能。 首先，让我们理解智能提示框的基本概念。在许多Web应用中，当用户在输入框中键入...

    ajax+jquery实现类似百度搜索提示框

    **Ajax + jQuery 实现类似百度搜索提示框** Ajax（Asynchronous JavaScript and XML）与jQuery库的结合使用，是现代Web开发中实现动态交互的重要技术。本篇将详细讲解如何利用这两种技术来创建一个类似百度搜索框的...

    servlet+ajax实现搜索框智能提示

    在现代Web应用中，"servlet+ajax实现搜索框智能提示"是一个常见的功能，它能够极大地提升用户体验。这个功能使得用户在输入搜索关键词时，无需完整输入就能得到相关的搜索建议，这种实时反馈的方式大大减少了用户的...

    ajax实现输入提示(支持中文)

    2. 提示样式：自定义提示框的CSS样式，使其与页面设计保持一致。 3. 搜索效率：在服务器端优化搜索算法，减少无效的数据库查询。 4. 异常处理：增加错误处理机制，如请求失败或无匹配项时的反馈。 通过以上讲解，...

    Ajax+servlet实现搜索提示列表效果

    4. **搜索提示框实现**： - 使用HTML和CSS创建一个动态显示的提示列表，初始时隐藏，当有Ajax请求返回时显示。 - 通过JavaScript动态添加列表项，每个项显示一个搜索建议，可以包括匹配的关键词及其相关上下文。 ...

    AJAX+ASP实现输入框提示

    这个"AJAX+ASP实现输入框提示"的示例项目，旨在展示如何使用AJAX技术在ASP页面上创建一个智能提示系统，当用户在输入框中输入文字时，后台将实时搜索匹配的数据并显示为提示。这种功能在许多Web应用中非常常见，如...

    AJAX+asp.net 实现的在线聊天

    在ASP.NET框架中，我们可以利用AJAX的UpdatePanel或ScriptManager控件来实现页面的部分刷新。UpdatePanel会创建一个局部的异步回发，使得指定区域的内容能够在后台更新，而不会影响到页面的其余部分。同时，...

    Servlet+JSP+Ajax搜索智能提示框

    "Servlet+JSP+Ajax搜索智能提示框"就是一个典型的实现方案，它结合了Java服务器端技术和前端动态交互技术，为用户提供实时的搜索建议。接下来，我们将详细讨论这个项目中涉及的技术和知识点。 1. **Servlet**： ...

    漂亮的js jquery ajax对话提示框

    **JS jQuery AJAX 对话提示框详解** 在网页开发中，为用户提供实时反馈是提升用户体验的关键。`jQuery` 提供了一种高效、灵活的方式来处理页面上的交互，而 `jQuery AJAX` 则是其强大的异步通信工具，使得无需刷新...

    ajax 弹出信息框（取数据库资源）及登陆

    ### 二、Ajax实现弹出信息框 在标题中提到的"ajax 弹出信息框"，通常是指在用户触发某个操作后，通过Ajax获取服务器返回的信息，然后在页面上动态创建或更新一个弹出框来显示这些信息。这涉及到DOM操作，比如使用...

    jquery ajax消息提示框，2秒后消失

    这是一个jquery提示消息框，平时我们所做的Ajax操作，如果多次提交，效果看不出来，有了这个功能，使得有更好的用户体验，提示出来的信息，两秒后消失！该功能由本人实现，属于原创，所以多要了点分，也不为过

    AJAX之Dojo实现登陆框

    **Dojo中的AJAX实现** 1. **dojo.xhrGet**: 这是Dojo中最基本的AJAX请求函数，用于GET请求。例如，登录验证时，可以将用户名和密码编码为查询字符串，然后发送到服务器的某个接口。 ```javascript dojo.xhrGet({ ...

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