We've seen many applications that use Ajax, and so far we think the most interesting is the DVD rental service Netflix. When you browse the various selections in Netflix, you'll see pictures and text of all the latest movies. When you pause the mouse over a picture of a given movie, you will see more information (see Figure 4-12). Although this can be achieved without Ajax, the first time you get a page, you need to include a lot of information that you might never use. By using AJAX, only the required information is sent when needed.
Figure 4-12 Netflix browser features
Although our example does not do so beautifully, you can learn how to provide your own dynamic ToolTip information. The client code is fairly straightforward (see Code Listing 4-11). The most interesting thing here is the Calculateoffset () method. Ideally, you can rely on the offset property of the current element. However, if you want to cross browsers, this is not necessarily feasible, and the offsets on different browsers may be different. However, you can access the DOM to generate an exact offset and use this offset to place the dynamic content. In this example, there is a simple table that contains the famous golf course, which displays additional information when the user pauses the mouse over a cell in the table.
Code Listings 4-11 tooltip.html
<! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" >
<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 + + "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>
<body>
<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>
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
