ajax异步调用,当鼠标点在图片上时,显示一个新层读取数据内容

最新推荐文章于 2019-06-09 22:32:00 发布

原创最新推荐文章于 2019-06-09 22:32:00 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #xmlhttprequest #浏览器 #function #div #数据库

本文介绍了一种使用AJAX实现的图片详情展示方法。当鼠标悬停于图片上时，会触发AJAX异步调用，从服务器获取该图片的详细信息并在新层中显示。实现了网页交互的平滑过渡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

兑现诺言第一天---ajax异步调用,当鼠标点在图片上时,显示一个新层读取数据内容

定义一个xmlhttp对象，因为要支持多种浏览器，因此定义的时候要根据浏览器的
类型来判断该如何实例话，
<html>
<head>
<script type=text/javascript">
var xmlhttp;//定义一个变量
function createHTTP()
{
if(window.ActiveXObject)//IE浏览器
{
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)//Netcapse浏览器
{
  xmlhttp=new XMLHttpRequest();
}
}
function getData(gg)
{
createHTTP();//实例话xmlhttp
xmlhttp.Open("GET","gyy.aspx?id="+gg,true);//加载服务器,也就是重gyy.aspx网站里取到要的数据
xmlhttp.onreadystatechange=stateChange;//异步对象事件挂钩
xmlhttp.Send(null);//发送请求
}
//异步调用的事件
function stateChange()
{
if(xmlhttp.readystate==4)
{
if(xmlhttp.status==200 || xmlhttp.status==0)
{
var data=xmlhttp.ResponseText;
document.getElementById("div1").innerHTML=data;
}
}
}
functiononMouserOver(gg)
{
var event =(typeof event!='undefined'?event:window.event); // 事件
var target=(typeof event.target!='undefined'?event.target:event.srcElement);
var x,y;
if(typeof event.pageX!='undefined')
{
  x=event.pageX;
  y=event.pageY;
}
else
{
  x=event.clientX+(document.documentElement.scrollLeft ? document.documentElement.scrollLeft :document.body.scrollLeft);
  y=event.clientY+(document.documentElement.scrollTop ?document.documentElement.scrollTop : document.body.scrollTop);
}
var div=document.getElementById ("div1");
div.style.visibility='visible';
div.style.posLeft=x;
div.style.posTop=y;
getData(gg);
}
functiononMouserOut()
{
document.getElementById("div1").style.visibility='hidden';
}
</script>
</head>
<body>
<asp:DataList ID="dlPic" runat="server" RepeatColumns="4" RepeatDirection="horizontal">
            <ItemTemplate>
                <img src='<%# Eval("name","../images/{0}") %>' alt="" width="35px" height="25px"
                   onmouseover="over('<%#Eval("name") %>')"onmouseout="out()" />
                <br />
                <%# Eval("name") %>
            </ItemTemplate>
</asp:DataList>
<div id="div1" style="position: absolute; background-color: Silver; left: 192px;
width: 181px; top: 104px; height: 108px; visibility: hidden;">
</div>
</body>
</html>
  接下来就只要定义一个gyy.aspx 页,在里面通过request.Query("id")读取ID值,传到然后后台通过这个主健从数据库中读取内容,然后用response.write输出,就可以在层中显示图片对应的详细内容.