Ajax应用实例-显示影片描述信息

鼠标悬停在片名上时显示其详细信息
在效果如下图所示:


Ajax应用实例-显示影片描述信息

表DVD:


CREATE TABLE [DVD] (
 [ID] [int] IDENTITY (1, 1) NOT NULL ,
 [Name] [char] (10) COLLATE Chinese_PRC_CI_AS NOT NULL ,
 [Description] [nvarchar] (100) COLLATE Chinese_PRC_CI_AS NOT NULL ,
 CONSTRAINT [PK_DVD] PRIMARY KEY  CLUSTERED
 (
  [ID]
 )  ON [PRIMARY]
)
GO


DVD_request.aspx:


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DVD_request.aspx.cs" Inherits="Ajax_DVD_request" %>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<script>
document.write("<div id='divDesc' style='background-color:red;left:-100;top:-100;POSITION:absolute;width:100;height:100;Z-INDEX:99'></div>");
 var xmlHttp;
    function displayInfo(source,id)
    {
        getDVDInfo(id);
        moveDiv(source);
    }
 
 function moveDiv(source)
 {
  var   x,y;  
        var oRect = source.getBoundingClientRect();  
        x=oRect.left;
        y=oRect.top;
        var divD = document.getElementById('divDesc');
        divD.style.posLeft = x+source.clientWidth;
        divD.style.posTop = y+source.clientHeight;
 }
 
 function getDVDInfo(id)
 {
  if (window.ActiveXObject)
  {
   xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  else if (window.XMLHttpRequest)
  {
   xmlHttp = new XMLHttpRequest();
  }
  xmlHttp.onreadystatechange = handleStateChange;
  xmlHttp.open("GET","DVD_response.aspx?id="+id+"&timeStamp="+new Date().getTime(),true);
  xmlHttp.send(null);
 }
 
 function handleStateChange()
 {
  if (xmlHttp.readyState==4 && xmlHttp.status==200)
  {
   var divD = document.getElementById('divDesc');
   divD.innerHTML = xmlHttp.responseText;
  }
 }
</script>
</head>
<body>
    <form id="form1" runat="server">

        <asp:DataList ID="DataList1" runat="server" RepeatColumns="3" RepeatDirection="Horizontal">
            <HeaderTemplate>
                <table style="word-break:break-all;table-layout:fixed;">
                    <tr>
                        <td width="100" align="center">片名</td>
                        <td width="100" align="center">片名</td>
                        <td width="100" align="center">片名</td>
                    </tr>
                </table>
            </HeaderTemplate>
            <ItemTemplate>
                <table style="word-break:break-all;table-layout:fixed;" cellspacing="1">
                    <tr>
                        <td width="100" onMouseOver="displayInfo(this,'<%#DataBinder.Eval(Container.DataItem,"id")%>');" bgcolor="#0066FF"><asp:Label runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"name")%>'></asp:Label></td>
                    </tr>
                </table>
            </ItemTemplate>
        </asp:DataList>
    </form>
</body>
</html>


DVD_response.aspx:


<%@ Page Language="C#" AutoEventWireup="true" %>
<%@ Import Namespace="System.Data.SqlClient" %>
<html>
<body>
<script language="C#" runat="server">
    void Page_Load(object sender, EventArgs e)
    {
        if (!this.IsPostBack)
        {
            string id = Request.QueryString["id"].ToString();
            SqlConnection con = new SqlConnection("server=.;uid=sa;pwd=;database=test");
            con.Open();
            SqlCommand cmd = new SqlCommand("select description from DVD where id=" + id, con);
            string desc = cmd.ExecuteScalar().ToString();
            con.Close();
            Response.Write(desc);
        }
    }
</script>
</body>
</html>

你可能感兴趣的:(Ajax)