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;
}
}
}
分享到:
相关推荐
通过使用AJAX,开发者可以创建无刷新的用户体验,提高应用的响应速度和用户体验。 3. **Telerik UI for ASP.NET AJAX特性** - **组件丰富**:包括表格、日历、图表、树形视图、网格、下拉列表、按钮、提示框等众多...
总之,Ajax在Java平台上的应用丰富多样,通过结合Servlet、JSP、Java框架等工具,开发者可以创建出交互性强、用户体验优秀的Web应用。学习并熟练掌握Ajax和Java的结合,对于提升Web开发技能至关重要。
标题 "ncnt.rar_M3V_ajax_blanketsts_drovepv6_personal" 提示这是一个与M3V框架相关的项目,可能包含对Ajax、BlanketSTS(可能是某种测试套件)和DrovePV6(可能是某种协议或组件)的个人定制和错误修复。...
标题 "Ajax+JSON 搜索框自动完成提示功能" 涉及的是网页开发中的一个常见技术,用于提高用户输入体验。Ajax(异步JavaScript和XML)是Web开发中的一种技术,它允许页面在不重新加载整个页面的情况下与服务器交换数据...
8. **调试与测试**:学习如何对Struts2和Ajax的组合进行调试和测试,包括前端的浏览器开发者工具和后端的日志记录。 这个"Struts2+Ajax_模拟登陆Demo"提供了一个实际操作的平台,帮助开发者熟悉这两项技术的结合...
在这个项目中,开发者可能详细讲解了如何整合这些技术来创建一个动态、异步的Web应用程序。 SSH2框架是Java Web开发中的常见选择,它提供了模型-视图-控制器(MVC)架构,数据持久化以及动作调度等功能。Spring框架...
在ASP.NET MVC中,可以通过Entity Framework这样的ORM(对象关系映射)工具轻松处理这些操作,它允许开发者用面向对象的方式来操作数据库,减少了直接编写SQL语句的需要。 “MVC管理系统”可能包括用户管理、角色...
- 用户体验:过多的Ajax交互可能导致页面感觉“卡顿”,合理设计加载提示,提高用户感知。 ## 5. 学习资源 - **《Ajax实战》**:深入浅出的Ajax技术书籍,适合初学者和进阶者。 - **MDN Web文档**:详尽的Web开发...
总结,使用Ajax实现弹出提示功能涉及创建XMLHttpRequest对象、发送请求、处理响应以及使用DOM操作显示提示。结合良好的用户体验设计和错误处理机制,可以提供更加流畅的交互体验。随着技术的发展,我们还有更多工具...
### Ajax Hacks中文版:创建快速响应Web站点的工具和技巧 #### Ajax技术概览 Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。这种技术使得Web应用程序...
7. **静态方法**:为了方便使用,工具类往往会提供一些静态工厂方法,用于快速创建AjaxResponse实例,比如`AjaxResponse.success()`或`AjaxResponse.error(String message)`。 通过这样的设计,开发人员可以避免在...
本文将深入探讨如何使用JavaScript(JS)和Ajax技术来创建一款类似于QQ弹窗的炫酷消息提示框。 首先,我们来了解JavaScript(JS)。JavaScript是一种轻量级的解释型编程语言,广泛应用于网页和网络应用开发。它主要...
5. **Ajax**:Ajax(异步JavaScript和XML)技术在CRM系统中用于实现页面的无刷新更新,提高了用户的交互体验。通过JavaScript发送异步请求到服务器,获取数据后在客户端更新部分页面,而无需刷新整个页面。 6. **...
本文将详细介绍如何在Visual Studio(VS)2005、2008和2010中安装并使用Ajax开发工具。 首先,我们需要安装Ajax扩展。文件"ASPAJAXExtSetup.msi"就是用于这个目的的安装程序。运行此文件,系统会引导你完成安装过程...
总结来说,这个"Ajax弹出提示框源码示例"是一个实用的Web开发工具,它展示了如何利用Ajax技术实现动态提示框,以及如何通过JavaScript增强用户体验。开发者可以在此基础上进行修改和扩展,以适应自己的项目需求。...
ASP.NET AJAX 控件工具包是ASP.NET框架的一部分,它提供了丰富的客户端控件和扩展器,以增强Web应用程序的用户体验和交互性。这个工具包利用AJAX(Asynchronous JavaScript and XML)技术,允许部分页面更新,减少了...
1. **Ajax技术**:Ajax的核心是创建XMLHttpRequest对象,用于在后台与服务器进行数据交换。在这个项目中,JavaScript会使用Ajax调用来发送文件数据到服务器,同时接收服务器返回的响应。 2. **PHP后端处理**:PHP...
**jQuery实现AJAX搜索框下拉提示小插件...总之,jSuggest插件是一个实用的工具,能够轻松地实现AJAX搜索框的下拉提示功能。开发者可以通过调整配置和扩展功能,以适应各种复杂的应用场景,为用户提供更流畅的搜索体验。
Ajax的核心是通过JavaScript创建XMLHttpRequest对象,这个对象是浏览器内置的,允许我们与服务器进行异步通信。当用户触发一个事件(如点击按钮),JavaScript会发送一个请求到服务器,服务器处理请求并返回结果。...
"工具"可能指的是使用AJAX可以构建的实用工具或功能,比如动态数据加载、表单提交等。 **文件名称解析:** "AJAX_01_helloAJAX" 文件名可能是示例代码或教程的第一部分,以"helloAJAX"为示例,这通常用于介绍基本...