创建工具窗口提示_java程序功能:创建窗口并在其中添加工具栏。三个工具图标分别是左键、中键和-CSDN博客

本文链接：https://blog.csdn.net/lishirong/article/details/41674327

效果截图：

创建工具窗口提示 - lishirong - The CTO of LiShirong

效果视频：

相比于传统的Web，使用AJAX可以大量的减少首次加载的信息量，只在用户需要时再动态的进行加载。这是个很大的进步。

但是有一个缺点，服务器端传回的数据存在中文乱码的问题。

静态页面：toolTip.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Ajax实现提示框功能</title>

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>

<h1>Ajax实现提示框功能</h1>

<h3>请选择手机型号：</h3>

<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>

<table id="courseData" bgcolor="#FFFAFA" border="0"

cellspacing="2" cellpadding="2">

</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;

}