From Gossip@caterpillar

Ajax Gossip: 提示文字

如果您的頁面中有很多產品，對於每個產品您會希望有產品說明，但每個產品都會有大量的文字說明，使用者也許只對一兩項產品有興趣，卻得下載其它產品的大量文字說明。

您可以使用非同步請求，在使用者將滑鼠指向產品時，從伺服端下載產品說明並顯示，這樣就可以節省大量的說明文字下載。

例如我的Gossip首頁就是一個例子，以下是簡化後的HTML內容：

TipsEx-1.html

<!DOCTYPE html PUBLIC 
"-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=BIG5">
<title>提示文字</title>
<script type="text/javascript" src="TipsEx-1.js"></script>
</head>
<body>
<a href=
 "http://www.gotop.com.tw/waweb2004/home/home.aspx?pg=HM010X&amp;bn=AXP011800"><small>
 	<img id="ajax" onmouseover="getBookData(this);" onmouseout="clearData();"
 style="border: 0px solid ; width: 80px; height: 110px;"
 alt="Ajax in action 中文版" title="Ajax in action 中文版"
 src="images/ajax_in_action_c.jpg" hspace="10" vspace="2"></small></a><p></p>

<div id="popup" style="position: absolute;">
    <table bgcolor="#ffffbb" border="0" cellpadding="2" cellspacing="2">
        <tbody id="bookDataBody"></tbody>
    </table>
</div>

</body>
</html>

滑鼠指到書的圖片上時，會取得書籍說明，滑鼠移開圖片，說明會消失，您可以使用以下的JavaScript來達到這個功能：

TipsEx-1.js

var xmlHttp;
var book;

function createXMLHttpRequest() {
    if (window.ActiveXObject) {
	xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    else if (window.XMLHttpRequest) {
	xmlHttp = new XMLHttpRequest();
    }
}

function getBookData(element) {
    createXMLHttpRequest();
    book = element;
    // 懶得寫Servlet了，直接取得.txt的文字 XD 
    var url = element.id + ".txt";
    xmlHttp.open("GET", url);
    xmlHttp.onreadystatechange = callback;
    xmlHttp.send(null);
}

function callback() {
    if (xmlHttp.readyState == 4) {
	if (xmlHttp.status == 200) {
	   // 計算提示文字位置
	    setTipsPosition();
           // 建立表格列（Row），並設定取得的文字
	    var row = createRow(xmlHttp.responseText);
	    document.getElementById("bookDataBody").appendChild(row);
	}
    }
}

// 清除說明
function clearData() {
    var bookDataBody = document.getElementById("bookDataBody");
    bookDataBody.removeChild(bookDataBody.childNodes[0]);
    document.getElementById("popup").style.border = "none";
}

function createRow(data) {
    var txtNode = document.createTextNode(data);
	
    var cell = document.createElement("td");
    cell.setAttribute("bgcolor", "#FFFFBB");
    cell.setAttribute("border", "0");
    cell.appendChild(txtNode);
	
    var row = document.createElement("tr");
    row.appendChild(cell);

    return row;
}

function setTipsPosition() {
    // 計算說明的X座標
    var end = book.offsetWidth + 50;
    var top = calculateOffset(book) + 25;
    var popup = document.getElementById("popup");
    popup.style.border = "gray 3px double";
    popup.style.left = end + "px";
    popup.style.top = top + "px";
}

// 計算說明的Y座標
function calculateOffset(field) {
    var offset = 0;
    while(field) {
	offset += field.offsetTop;
	field = field.offsetParent;
    }
    return offset;
}

可以看一下執行結果。