我們見過許多使用Ajax的應用，到目前為止，我們認為最有意思的是DVD租借服務Netflix。當瀏覽Netflix中的各個選擇時，會看到各類最新影片的相關圖片和文字。當把滑鼠停在一個給定影片的圖片上時，就會看到更多的資訊（見圖4-12）。儘管不使用Ajax也能達到這個效果，但第一次擷取頁面時要納入大量可能永遠也不會用到的資訊。通過使用Ajax，只會在需要時發送所需的資訊。
圖4-12 Netflix瀏覽器特性
雖然我們的例子做得沒有這麼漂亮，但你能從中瞭解到如何提供自己的動態工具提示資訊。用戶端代碼相當簡單（見代碼清單4-11）。這裡最有意思的是calculateOffset()方法。在理想情況下，可以依賴於當前元素的offset屬性。不過，如果要跨瀏覽器，這樣做不一定可行，不同瀏覽器上的位移量可能不同。但是，你可以訪問DOM來產生一個準確的位移量，並使用這個位移量來放置動態內容。這個例子中有一個簡單的表，其中包含著名的高爾夫球場，當使用者把滑鼠停在表中某個儲存格上時，會顯示一些額外的資訊。
代碼清單4-11 toolTip.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Ajax Tool Tip</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");
}
function calculateOffset(field, attr) {
var offset = 0;
while(field) {
offset += field[attr];
field = field.offsetParent;
}
return offset;
}
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 Courses</h3>
<table id="courses" bgcolor="#FFFAFA" border="1"
cellspacing="0" cellpadding="2"/>
<tbody>
<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>
</tbody>
</table>
<div style="position:absolute;" id="popup">
<table id="courseData" bgcolor="#FFFAFA" border="0"
cellspacing="2" cellpadding="2"/>
<tbody id="courseDataBody"></tbody>
</table>
</div>
</body>
</html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
