一个关于ajax和div的有关问题
日期：2014-05-18 浏览次数：20673 次
一个关于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 calculate
是这样的:在很多的搜索记录中,当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 calculate
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
