实现了一个简单的基于ajax的动态工具提示框.提示框中的数据从后台servler中接受
<script type="text/javascript">
var xmlHttp;
var dataTableBody;
var dataDiv; //弹出框
var offsetEl; //当前列的宽度
var courses;
//创建XMLHttpRequest对象
function createXMLHttpRequest(){
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}else if(window.ActiveXObject){
xmlHttp = new ActiveXObject("MicroSoft.XMLHTTP");
}
}
function getCourseData(element){
//初始化参数
initVars();
//创建XMLHttpRequest对象
createXMLHttpRequest();
//获取当前列
offsetEl = element;
//准备url
var url = "/ajaxToolTip/servlet/ToolTipServlet?key="+escape(element.id);
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange = callback;
//发送
xmlHttp.send();
}
//初始化所用到的变量
function initVars(){
dataTableBody = document.getElementById("courseDataBody");
dataDiv = document.getElementById("popup");
courses = document.getElementById("courses");
}
function callback(){
if(xmlHttp.readyState == 4){
if(xmlHttp.status == 200){
//将接受的xml格式数据在setData函数中进行处理
setData(xmlHttp.responseXML);
}
}
}
function setData(courseData){
clearData();
setOffsets(); //设置div的位置
//获取xml中的length 和 par
var length = courseData.getElementsByTagName("length")[0].firstChild.data;
var par = courseData.getElementsByTagName("par")[0].firstChild.data;
var row1,row2;
row1 = createRow("par: "+par);
row2 = createRow("length: "+length);
dataTableBody.appendChild(row1);
dataTableBody.appendChild(row2);
}
function setOffsets(){
var end = offsetEl.offsetWidth+courses.offsetLeft;
var top = calculateOffsetTop(offsetEl);
dataDiv.style.border = "black 1px solid";
dataDiv.style.top = (top+2)+"px";
dataDiv.style.left = end+5+"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;
}
//createRow函数
function createRow(data){
var row,cell,txtNode;
row = document.createElement("tr");
cell = document.createElement("td");
cell.bgcolor = "#FFFAFA";
cell.border = "0";
txtNode = document.createTextNode(data);
cell.appendChild(txtNode);
row.appendChild(cell);
return row;
}
function clearData(){
var ind = dataTableBody.childNodes.length;
for(var i = ind - 1; i >= 0; i--){
dataTableBody.removeChild(dataTableBody.childNodes[i]);
}
dataDiv.style.border="none";
}
</script>
</head>
<body>
<h1>Ajax Tool Tip Example</h1>
<h3>Golf Course</h3>
<table id="courses" bgcolor="#FFFAFA" border="1" cellpadding="2" cellspacing="0">
<tr><td id="1" onmouSEOver="getCourseData(this)" onmouSEOut="clearData();">Augusta National</td></tr>
<tr><td id="2" onmouSEOver="getCourseData(this)" onmouSEOut="clearData();">Pinehurst No.2</td></tr>
<tr><td id="3" onmouSEOver="getCourseData(this)" onmouSEOut="clearData();">St.Andrews Links</td></tr>
<tr><td id="4" onmouSEOver="getCourseData(this)" onmouSEOut="clearData();">Baltusrol Golf Club</td></tr>
</table>
<div style="position:absolute;" id="popup">
<table id="courseData" bgcolor="#FFFFAFA" border="0" cellpadding="2" cellspacing="2">
<tbody id="courseDataBody"></tbody>
</table>
</div>
</body>
</html>
后台代码
public void doGet(HttpServletRequest request,HttpServletResponse response)
throws ServletException,IOException {
response.setContentType("text/xml;charset=utf-8");
response.setHeader("Cache-Control","no-cache");
PrintWriter out = response.getWriter();
int key = Integer.parseInt(request.getParameter("key"));
String length = "";
String par = "";
if(key != 0){
switch(key){
case 1:
par = "72";
length = "7290";
break;
case 2:
par = "70";
length = "7214";
break;
case 3:
par = "72";
length = "6566";
break;
case 4:
par = "70";
length = "7390";
break;
}
}else{
par = "None";
length = "Data is invalidate.";
}
StringBuffer strBuf = new StringBuffer("<response>");
strBuf.append("<par>"+par+"</par>");
strBuf.append("<length>"+length+"</length>");
strBuf.append("</response>");
out.println(strBuf.toString());
out.close();
}
原文链接：https://www.f2er.com/ajax/164487.html
