利用json方式完成工具提示功能

来源：互联网发布：冰箱离墙距离知乎编辑：程序博客网时间：2024/05/19 20:56

一、toolTip1.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"     pageEncoding="UTF-8"%><!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>基于json方式实现工具提示</title></head><script language="javascript">  //定义一个变量，用于存放XMLHttpRequest对象  var xmlHttp;  //记录事件发生时的鼠标位置  var x,y;  //该函数用于创建一个XMLHttpRequest对象  function createXMLHttpRequest(){  if(window.ActiveXObject){  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");  }else if(window.XMLHttpRequest){  xmlHttp=new XMLHttpRequest();  }  } //这是通过ajax取得提示消息的办法   function over(index){ //记录事件发生时的鼠标位置  x=index.clientX;  y=index.clientY;  //创建一个XMLHttpRequest对象  createXMLHttpRequest();  //将状态触发器绑定到一个函数  xmlHttp.onreadystatechange=showInfo;  //open方法建立对服务器的调用  xmlHttp.open("get","ToolByJsonServlet?index="+index);  //发送请求  xmlHttp.send(null);  }  function showInfo(){ var result; if(xmlHttp.readyState==4){if(xmlHttp.status==200){result=eval("("+xmlHttp.responseText+")"); document.getElementById("tip").style.display = "block";     document.getElementById("tip").style.top = y;     document.getElementById("tip").style.left = x + 10;     document.getElementById("tipTable").rows[0].cells[0].innerHTML="图书名称："+result.name;     document.getElementById("tipTable").rows[1].cells[0].innerHTML="价格："+result.price;} } }  function out(){document.all.tip.style.display="none";}</script><body>  <h2>工具提示</h2>   <br/>   <br/>   <a href="#" onmouseover="over(0)" onmouseout="out()">图书一</a>   <br/>   <br/>     <a href="#" onmouseover="over(1)" onmouseout="out()">图书二</a>   <br/>   <br/>     <a href="#" onmouseover="over(2)" onmouseout="out()">图书三</a>   <br/>   <br/>     <a href="#" onmouseover="over(3)" onmouseout="out()">图书四</a>   <br/>   <br/> <div id="tip" style="position:absolute;display:none;border:1px;border-style:solid;height:200px;width:200px;">   <table id="tipTable">        <tr>            <td></td>        </tr>        <tr>            <td></td>        </tr>    </table> </div></body></html>

二、ToolByJsonServlet

package servlet;import java.io.IOException;import java.io.PrintWriter;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;/** * Servlet implementation class ToolByJsonServlet */@WebServlet("/ToolByJsonServlet")public class ToolByJsonServlet extends HttpServlet {private static final long serialVersionUID = 1L;           /**     * @see HttpServlet#HttpServlet()     */    public ToolByJsonServlet() {        super();        // TODO Auto-generated constructor stub    }/** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String[] shop={"{name:'java web教程',price:62}",        "{name:'javascript教程',price:106}",          "{name:'java css教程',price:90}",          "{name:'java ee教程',price:200}"};int index=Integer.parseInt(request.getParameter("index"));response.setContentType("text/xml;charset=utf-8");PrintWriter out=response.getWriter();out.println(shop[index]);out.flush();out.close();}/** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stubdoGet(request, response);}}

三完成配置

<?xml version="1.0" encoding="UTF-8"?><web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:web="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd http://xmlns.jcp.org/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" version="2.4"><servlet>    <servlet-name>ToolByXMLServlet</servlet-name>    <servlet-class>servlet.ToolByXMLServlet</servlet-class><!--类的位置  --></servlet><servlet-mapping>    <servlet-name>ToolByXMLServlet</servlet-name><!--你创建的类名  -->    <url-pattern>/ToolByXMLServlet</url-pattern></servlet-mapping>

阅读全文

0 0