ajax完成工具提示

最新推荐文章于 2021-08-05 22:32:27 发布

林深不见鹿ee

最新推荐文章于 2021-08-05 22:32:27 发布

阅读量375

点赞数

分类专栏： ajax 文章标签： ajax

本文链接：https://blog.csdn.net/linshenshijianlu/article/details/77412330

版权

ajax 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、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="#" οnmοuseοver="over(0)" οnmοuseοut="out()">图书一</a>
   <br/>
   <br/>   
  <a href="#" οnmοuseοver="over(1)" οnmοuseοut="out()">图书二</a>
   <br/>
   <br/>   
  <a href="#" οnmοuseοver="over(2)" οnmοuseοut="out()">图书三</a>
   <br/>
   <br/>   
  <a href="#" οnmοuseοver="over(3)" οnmοuseοut="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>

四结果显示：

林深不见鹿ee

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ajax完成工具提示

一、toolTip.jsp<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>工具提示 //定义一个变量，用于存放XMLHttpRequest对象 var xmlHttp; //记录事件发生时的鼠标位置 var x,y; //该函数用
复制链接

扫一扫

专栏目录