ajax完成工具提示

来源：互联网发布：昆仑墟麒麟臂进阶数据编辑：程序博客网时间：2024/06/13 08:11

一、toolTip.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>工具提示</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","ToolByXMLServlet?index="+index);  //发送请求  xmlHttp.send(null);  }  function showInfo(){  //定义变量，用于存放从服务器返回的结果 var result; if(xmlHttp.readyState==4){ if(xmlHttp.status==200){result=xmlHttp.responseXML.getElementsByTagName("shop");        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[0].getElementsByTagName("name")[0].firstChild.nodeValue;        document.getElementById("tipTable").rows[1].cells[0].innerHTML="价格："+result[0].getElementsByTagName("price")[0].firstChild.nodeValue; }  }  }  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>

二 ToolByXMLServlet.java

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;@WebServlet("/ToolByXMLServlet")public class ToolByXMLServlet extends HttpServlet {private static final long serialVersionUID = 1L;             public ToolByXMLServlet() {        super();    }protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String[][] shop={{"java教程","63"},     {"java web教程","109"},     {"设计模式","120"},     {"程序设计大赛","190"}};int index=Integer.parseInt(request.getParameter("index"));response.setContentType("text/xml;charset=utf-8");PrintWriter out=response.getWriter();   out.println("<shop>");       out.println("<name>"+shop[index][0]+"</name>");       out.println("<price>"+shop[index][1]+"</price>");       out.println("</shop>");       out.flush();   out.close();}protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {doGet(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