Ajax实现提示功能

最新推荐文章于 2021-09-29 11:57:39 发布

yuanzeyao

最新推荐文章于 2021-09-29 11:57:39 发布

阅读量1.4k

点赞数 1

分类专栏： Ajax 文章标签： ajax xmlhttprequest initialization function javascript servlet

本文链接：https://blog.csdn.net/yuanzeyao/article/details/7815539

版权

Ajax 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

有过网购的同学都知道，当我们在网上买某一件东西的时候，如果我们把鼠标放置到图片的上方，那么会弹出一个框框，介绍该产品的信息，下面我们来模拟一下这个功能

先写一个shop.js

// JavaScript Document
var xmlHttpRequest;
function createXmlHttpRequest()
{
	if(window.ActiveXObject)
	{
		xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
		
	}
	else (window.XMLHttpRequest)
	{
		xmlHttpRequest=new XMLHttpRequest();
	}
	
	
	
}

function over(index)
{
	//alert("over执行");
	x=event.clientX;
	y=event.clientY;
	createXmlHttpRequest();
	
	xmlHttpRequest.onreadystatechange=processor;
	xmlHttpRequest.open("GET","ShopServlet?index="+index,true);
	xmlHttpRequest.send(null);
	
	
}

function processor()
{
	//alert("1");
	if(xmlHttpRequest.readyState==4)
	{
		//alert("2");
		var result;
		if(xmlHttpRequest.status==200)
		{
			
			//alert("2");
			result=xmlHttpRequest.responseXML.getElementsByTagName("shop");
			
			document.getElementById("tip").style.display="block";
			document.getElementById("tip").style.top=y;
			document.getElementById("tip").style.left=x+10;
			
			document.getElementById("gname").innerHTML="商品名称："+result[0].childNodes[0].firstChild.nodeValue;
			document.getElementById("gprice").innerHTML="商品价格："+result[0].childNodes[1].firstChild.nodeValue;
			//alert("商品名称："+result[0].childNodes[0].firstChild.nodeValue);
			
		}
	}
}

function out()
{
	doucment.getElementById("tip").style.display="none";
}

然后写一个jsp页面，shop.jsp

body中的代码：

  <h2>使用Ajax实现提示功能</h2>
  <hr>
  <a href="#"  οnmοuseοver="over(0)"  οnmοuseοut="out()">商品1</a>
  <a href="#" οnmοuseοver="over(1)"   onmouseout("out()")>商品2</a>
  <a href="#" οnmοuseοver="over(2)"   onmouseout("out()")>商品3</a>
  
  <div id="tip" style="position: absolute;display: none;border: 1px;border-style: solid;">
<table id="tiptable" border="0" bgcolor="#ffffee">
<tr><td id="gname"></td></tr>
<tr><td id="gprice"></td></tr>
</table>

最后编写一个Servlet

public class ShopServlet extends HttpServlet
{

	
	public void destroy()
	{
		super.destroy(); // Just puts "destroy" string in log
		// Put your code here
	}

	
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException
	{

		this.doPost(request, response);
	}

	
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException
	{

		System.out.println("servlet执行");
		response.setContentType("text/xml");
		response.setCharacterEncoding("utf-8");
		String[][]info={{"苹果","10"},{"香蕉","8"},{"梨子","4"}};
		int index=Integer.valueOf(request.getParameter("index"));
		PrintWriter pw=response.getWriter();
		pw.println("<shop>");
		pw.println("<name>"+info[index][0]+"</name>");
		pw.println("<price>"+info[index][1]+"</price>");
		pw.println("</shop>");
		
		pw.flush();
		pw.close();
		
	}

	/**
	 * Initialization of the servlet. <br>
	 *
	 * @throws ServletException if an error occurs
	 */
	public void init() throws ServletException
	{
		// Put your code here
	}

}

运行后的界面如下：