struts ajax应用一 ToolTip提示

最新推荐文章于 2024-09-10 22:24:48 发布

devfan

最新推荐文章于 2024-09-10 22:24:48 发布

阅读量453

点赞数

分类专栏： AJAX 文章标签： struts ajax function xmlhttprequest border exception

本文链接：https://blog.csdn.net/devfan/article/details/4183310

版权

AJAX 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tool Tip Ajax</title>
</head>
<script type="text/javascript" language="javascript">
var xmlHttp;
var dataDiv;
var dataTable;
var dataTableBody;
var offsetE1;
function createXMLHttpRequest() {
if (window.ActiveXObject) {//如果是IE
  xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} else if (window.XMLHttpRequest) {
  xmlHttp = new XMLHttpRequest();
}
}
function initVars(){
dataTableBody=document.getElementById("courseDataBody");
dataTable=document.getElementById("courseData");
dataDiv=document.getElementById("popup");
}
function getCourseData(element){
initVars();
createXMLHttpRequest();
offsetE1=element;
var url="play.do?key="+escape(element.id);
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange=callback;
xmlHttp.send(null);
}
function callback(){
if(xmlHttp.readyState==4){//判断请求的状态(0=未初始化,1=正在加载,2=已经加载,3=交互,4=完成)
  if(xmlHttp.status==200){//判断Server的Http状态码(200对应 ok , 404对应Not Found,204对应返回空)
   setData(xmlHttp.responseXML);
  }
}
}
function setData(courseData){
clearData();
setOffsets();
var age=courseData.getElementsByTagName("age")[0].firstChild.data;
var birthday=courseData.getElementsByTagName("birthday")[0].firstChild.data;
var row,row2;
var parData="BirthDay:"+birthday
var LengthData="Age:"+age;

row=createRow(parData);
row2=createRow(LengthData);
dataTableBody.appendChild(row);
dataTableBody.appendChild(row2);
}
function createRow(data){
var row,cell,txtNode;
row=document.createElement("tr");
cell=document.createElement("td");
cell.setAttribute("bgcolor","#FFFAFA");
cell.setAttribute("border","0");
textNode=document.createTextNode(data);
cell.appendChild(textNode);
row.appendChild(cell);
return row;
}

function setOffsets(){
var end=offsetE1.offsetWidth;
var top=calculateOffsetTop(offsetE1);
dataDiv.style.border="black 1px solid";
dataDiv.style.left=end+15+"px";
dataDiv.style.top=top+"px";
}
function calculateOffsetTop(field){
return calculateOffset(field,"offsetTop");
}

function calculateOffset(field,attr){
var offset=0;
while(field){
offset+=field[attr];
field=field.offsetParent;
}
return offset;
}

function clearData(){
var ind=dataTableBody.childNodes.length;

if(ind>0){
for(var i=ind-1;i>=0;i--){
dataTableBody.removeChild(dataTableBody.childNodes[i]);
}
dataeDiv.style.border="none";
}
}
</script>
<body>
<h1>Tool Tip Ajax</h1>
<table id="courses" bgcolor="FFFAFA" border="1" cellpadding="0" cellpadding="2">
<tbody>
<TR><TD id="1" οnmοuseοver="getCourseData(this);" οnmοuseοut="clearData();">CXM</TD></TR>
<TR><TD id="2" οnmοuseοver="getCourseData(this);" οnmοuseοut="clearData();">CYQ</TD></TR>
</tbody>
</table>

Server Action:

package cxm.ajax;

import java.io.PrintWriter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts.action.*;

public class autotooltip extends Action{
public ActionForward execute(ActionMapping mapping, ActionForm form,
   HttpServletRequest request, HttpServletResponse response)
   throws Exception {
  PrintWriter pout = response.getWriter();
  String parastr=request.getParameter("key");
  System.out.println(parastr);
  response.setContentType("text/xml");
  response.setHeader("Cache-Control", "no-cache");
  pout.println("<response>");
  if(parastr.equals("1")){
   pout.println("<age>28</age>");
   pout.println("<birthday>5-11</birthday>");
  }
  if(parastr.equals("2")){
   pout.println("<age>28</age>");
   pout.println("<birthday>9-10</birthday>");
  }
  pout.println("</response>");
  pout.flush();
  pout.close();

  return null;
}