效果截图:
效果视频:
![创建工具窗口提示 - lishirong - The CTO of LiShirong 创建工具窗口提示 - lishirong - The CTO of LiShirong](http://img.ph.126.net/8AIbhJKgZ6s3QQ8oo26Sig==/1559371370993975848.png)
相比于传统的Web,使用AJAX可以大量的减少首次加载的信息量,只在用户需要时再动态的进行加载。这是个很大的进步。
但是有一个缺点,服务器端传回的数据存在中文乱码的问题。
静态页面:toolTip.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax实现提示框功能</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="servlet/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;
var lengthData="价格:¥"+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","#CCFFFF");
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 bgcolor="#CCFFFF">
<h1>Ajax实现提示框功能</h1>
<h3>请选择手机型号:</h3>
<table border="1" id="courses" bgcolor="#CCFFFF" cellspacing="0" cellpadding="2">
<tbody>
<tr>
<td id="1" οnmοuseοver="getCourseData(this);"
οnmοuseοut="clearData();">
CECT 1080
</td>
</tr>
<tr>
<td id="2" οnmοuseοver="getCourseData(this);"
οnmοuseοut="clearData();">
dopodo 830
</td>
</tr>
<tr>
<td id="3" οnmοuseοver="getCourseData(this);"
οnmοuseοut="clearData();">
OPPO A115K
</td>
</tr>
<tr>
<td id="4" οnmοuseοver="getCourseData(this);"
οnmοuseοut="clearData();">
Nokia 5223
</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:ToolTipServlet.java
/**
* http://blog.163.com/lishirongandcto
*/
package servlet;
import java.io.*;
import java.util.*;
import javax.servlet.*;
import javax.servlet.http.*;
public class ToolTipServlet extends HttpServlet {
private Map courses=new HashMap();
public void init(ServletConfig config)throws ServletException{
CourseData augusta=new CourseData("CECT 1080","1000");
CourseData pinehurst=new CourseData("dopodo 830","3500");
CourseData standrews=new CourseData("OPPO A115K","798");
CourseData balrusrol=new CourseData("Nokia 5233","1198");
courses.put(new Integer(1), augusta);
courses.put(new Integer(2), pinehurst);
courses.put(new Integer(3), standrews);
courses.put(new Integer(4), balrusrol);
}
public 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;charset=UTF-8");
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();
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
PrintWriter out = response.getWriter();
}
private class CourseData{
private String par;
private String length;
public CourseData(String par,String length){
this.par=par;
this.length=length;
}
public String getPar(){
return this.par;
}
public String getLength(){
return this.length;
}
}
}