首頁 > 開發者 > Ajax

Ajax基礎教程學習(6)_建立工具提示

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

<!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;
        }
    }

}

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

相關關鍵詞：
ajax manual ajax payload w3s ajax ajax websocket ajax datagrid ajax settimeout ajax controls
相關文章
ajax入門指南（二）
ajax使用_雜類
jQuery ajax 檔案下載_ajax
AJAX各種實現方式比較_ajax
AJAX入門--- XMLHttpRequest對象的屬性和方法
解決spring-security session逾時 Ajax 請求沒有重新導向的問題

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

熱門內容

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More