MyException - 我的异常网
当前位置:我的异常网» Java Web开发 » 一个关于ajax和div的有关问题

一个关于ajax和div的有关问题

www.MyException.Cn  网友分享于:2015-08-27  浏览:363次
一个关于ajax和div的问题.
是这样的:在很多的搜索记录中,当onmouseover到某个记录的时候,能够显示出这条记录的详细信息,不要在新窗口打开的,用ajax连服务器然后最好能用div或者其他更好的方式显示出来,希望各位高手给点建议,最好能给出例子代码.另外想问一下大家对ajax的看法,先谢了.

------解决方案--------------------
在Ajax.基础教程里面第四章有这样一个示例,和楼主想知道的一样的:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN ">

<html>
<head>
<title> Ajax Tooltip </title>
<script type= "text/javascript ">
var xmlHttp;
var dataDiv;
var dataTable;
var dataTableBody;
var offsetEl;

function createXMLHttpRequest() {
if (window.ActiveXObject) {
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();
offsetEl = element;
var url = "ToolTipServlet?key= " + escape(element.id);

xmlHttp.open( "GET ", url, true);
xmlHttp.onreadystatechange = callback;
xmlHttp.send(null);
}

function callback() {
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
setData(xmlHttp.responseXML);
}
}
}

function setData(courseData) {
clearData();
setOffsets();
var length = courseData.getElementsByTagName( "length ")[0].firstChild.data;
var par = courseData.getElementsByTagName( "par ")[0].firstChild.data;

var row, row2;
var parData = "Par: " + par
var lengthData = "Length: " + length;

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 ");

txtNode = document.createTextNode(data);
cell.appendChild(txtNode);
row.appendChild(cell);

return row;
}

function setOffsets() {
var end = offsetEl.offsetWidth;
var top = calculateOffsetTop(offsetEl);
dataDiv.style.border = "black 1px solid ";
dataDiv.style.left = end + 15 + "px ";
dataDiv.style.top = top + "px ";
}

function calculateOffsetTop(field) {
return calculateOffset(field, "offsetTop ");

文章评论

软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有