Ajax基础教程学习(6)_创建工具提示
时间：2010-08-31 来源：快乐的Tina
<!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.getElementByIdx_x("courseDataBody");
dataTable = document.getElementByIdx_x("courseData");
dataDiv = document.getElementByIdx_x("popup");
}
function getCourseData(element) {
initVars();
createXMLHttpRequest();
offsetEl = element;
var url = "Handler.ashx?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_r("length")[0].firstChild.data;
var par = courseData.getElementsByTagName_r("par")[0].firstChild.data;
var row, row2;
var parData = "Par: " + par
var lengthData = "Length: " + length;
row = createRow(parData);
row2 = createRow(lengthData);
dataTableBody.appendChild_xss(row);
dataTableBody.appendChild_xss(row2);
}
function createRow(data) {
var row, cell, txtNode;
row = document.createElement_x("tr");
cell = document.createElement_x("td");
cell.setAttribute("bgcolor", "#FFFAFA");
cell.setAttribute("border", "0");
txtNode = document.createTextNode(data);
cell.appendChild_xss(txtNode);
row.appendChild_xss(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" ellspacing="2" cellpadding="2"/>
<tbody id="courseDataBody"></tbody> </table>
</div> </body>
</html>
CourseData类
using System;
using System.Data;
using System.Configuration;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
/// <summary>
///CourseData 的摘要说明
/// </summary>
public class CourseData
{
public CourseData()
{
//
//TODO: 在此处添加构造函数逻辑
//
}
private int par;
private int length;
public CourseData(int par, int length) { this.par = par; this.length = length; }
public int getPar() { return this.par; }
public int getLength() { return this.length; }
}
Handler.ashx
<%@ WebHandler Language="C#" class="Handler" %>
using System;
using System.Web;
using System.Collections;
public class Handler : IHttpHandler {
private Hashtable courses = new Hashtable();
public void ProcessRequest (HttpContext context) {
CourseData augusta = new CourseData(72, 7290);
CourseData pinehurst = new CourseData(70, 7214);
CourseData standrews = new CourseData(72, 6566);
CourseData baltusrol = new CourseData(70, 7392);
courses.Add(1, augusta);
courses.Add(2, pinehurst);
courses.Add(3, standrews);
courses.Add(4, baltusrol);
int key = int.Parse(context.Request.QueryString["key"]);
CourseData data = (CourseData)courses[key];
context.Response.ContentType = "text/xml";
context.Response.AddHeader("Cache-Control","no-cache");
context.Response.Write("<response>");
context.Response.Write("<par>"+data.getPar()+"</par>");
context.Response.Write("<length>" + data.getLength() + "</length>");
context.Response.Write("</response>");
context.Response.End();
}
public bool IsReusable {
get {
return false;
}
}
}
相关阅读 更多 +
