ajax弹出提示信息

ajax弹出提示信息

1、 输入域：

<h2>工具提示</h2>

<hr>

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

<div id="tip" style="position:absolute;display:none;border:1px;border-style:solid;">

<table id="tipTable" border="0" bgcolor="#ffffee">

<tr align="center">

<td><img id="photo" src="" height="80" width="80"></td>

</tr>

<tr>

<td></td>

</tr>

<tr>

<td></td>

</tr>

</table>

</div>

2、 JavaScript脚本：

<script type="text/javascript">

var xmlHttp;

var x, y; //记录事件发生时的鼠标位置

//创建XMLHttpRequest对象

function createXMLHttpRequest() {

if(window.ActiveXObject) {

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

} else if (window.XMLHttpRequest) {

xmlHttp = new XMLHttpReuqest();

}

}

//通过AJAX取得提示信息

function over(index) {

x = event.clientX;

y = event.clientY;

//创建XMLHttpRequest对象

createXMLHttpRequest();

//将状态触发器绑定到一个函数

xmlHttp.onreadystatechange = process;

//建立一个对服务器的调用

xmlHttp.open("GET", "CreateTip?index=" + index);

//发送请求

xmlHttp.send(null);

}

//处理从服务器返回的xml文档

function process() {

//定义一个变量用于存放从服务器返回的响应结果

var result;

if(xmlHttp.readyState == 4) { //如果响应完成

if(xmlHttp.status == 200) { //如果返回成功

//取出服务器返回的XML文档所有shop标签的子节点

result = xmlHttp.responseXML.getElementsByTagName("shop");

//显示工具条

document.all.tip.style.display = "block";

document.all.tip.style.top = y;

document.all.tip.style.left = x + 10;

document.all.photo.src = result[0].childNodes[2].firstChild.nodeValue;

document.all.tipTable.rows[1].cells[0].innerHTML="商品名称:"+result[0].childNodes[0].firstChild.nodeValue;

document.all.tipTable.rows[2].cells[0].innerHTML="商品价格:"+result[0].childNodes[1].firstChild.nodeValue;

}

}

}

function out() {

document.all.tip.style.display = "none";

}

</script>

3、 Servlet文件：（SelProvince.java文件中的doGet方法）

public void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

//虚拟一个商品列表

String[][] shop = {{"商品一","90","photo/photo1.jpg"},

{"商品二","190","photo/photo2.jpg"},

{"商品三","290","photo/photo3.jpg"}};

//获取页面参数

int index = Integer.parseInt(request.getParameter("index"));

response.setContentType("text/xml");

response.setCharacterEncoding("UTF-8");

PrintWriter out = response.getWriter();

//XML文件返回客户端

out.println("<shop>");

out.println("<name>"+shop[index][0]+"</name>");

out.println("<price>"+shop[index][1]+"</price>");

out.println("<photo>"+shop[index][2]+"</photo>");

out.println("</shop>");

out.flush();

out.close();

}

4、 web.xml文件配置：

<servlet-mapping>

<servlet-name>CreateTip</servlet-name>

<url-pattern>/CreateTip</url-pattern>

</servlet-mapping>

<servlet>

<servlet-name>CreateTip</servlet-name>

<servlet-class>com.solid.util.CreateTip</servlet-class>

</servlet>