Ajax异步动态显示Tips
<div style="position: absolute" id="showtip">
</div>
2.在页面中添加Js方法
<script language="javascript" type="text/javascript">
var xmlHttp = null;
function createXMLHttpRequest()
{
if (window.ActiveXObject)
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
if (window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
}
}
function getContent(obj,arg1)
{
createXMLHttpRequest();
var url = "./Tips.aspx?arg1="+arg1;
xmlHttp.onreadystatechange = showtip;
xmlHttp.open("GET", url, true);
xmlHttp.setrequestheader("content-type","application/x-www-form-urlencoded; charset=gbk");
xmlHttp.send(null);
}
function showtip()
{
if (xmlHttp.readyState == 4)
{
if (xmlHttp.status == 200)
{
clearData();
//取鼠标当前坐标
var yScrolltop;
var xScrollleft;
if (self.pageYOffset || self.pageXOffset)
{
yScrolltop = self.pageYOffset;
xScrollleft = self.pageXOffset;
}
else if (document.documentElement && document.documentElement.scrollTop || document.documentElement.scrollLeft )// Explorer 6 Strict
{
yScrolltop = document.documentElement.scrollTop;
xScrollleft = document.documentElement.scrollLeft;
}
else if (document.body)// all other Explorers
{
yScrolltop = document.body.scrollTop;
xScrollleft = document.body.scrollLeft;
}
arrayPageScroll = new Array(xScrollleft + event.clientX ,yScrolltop + event.clientY) ;
var end=arrayPageScroll[0];
var top=arrayPageScroll[1];
//End
document.getElementById('showtip').style.border='black 1px solid';
document.getElementById('showtip').style.left=end+10+'px';
document.getElementById('showtip').style.top=top+10+'px';
var Innertable=xmlHttp.responseText;
document.getElementById('showtip').innerHTML=Innertable;
}
}
}
//清除div
function clearData()
{
document.getElementById('showtip').innerHTML="";
document.getElementById('showtip').style.border="none";
}
</script>
3.定义Label事件
<div style="cursor: pointer">
<asp:Label ID="lblTest" runat="server" Text='<%# Eval("ID").ToString() %>'></asp:Label>
</div>
--
lblTest.Attributes.Add("onmouseover", "c=this.style.backgroundColor;this.style.backgroundColor='#F5D5CD';getContent(this,'" + lblTest.Text + "')");
lblTest.Attributes.Add("onmouseout", "this.style.backgroundColor=c;clearData();");
4.Tips页面
protected void Page_Load(object sender, EventArgs e)
{
String arg1= Request.QueryString["arg1"];
System.Text.StringBuilder sb = new System.Text.StringBuilder();
sb.Append("<Table border=\"1\" cellspacing=\"0\">");
sb.Append("<Tr>");
sb.Append("<Td bgcolor=\"#DCEEEF\">参数1</Td>");
sb.Append("<Td bgcolor=\"#DCEEEF\">参数1</Td>");
sb.Append("</Tr>");
sb.Append("<Tr>");
sb.Append("<Td bgcolor=\"#F0F0F7\">");
sb.Append(arg1);
sb.Append("</Td>");
sb.Append("<Td bgcolor=\"#F0F0F7\">");
sb.Append(arg1);
sb.Append("</Td>");
sb.Append("</Tr>");
sb.Append("</Table>");
Response.Write(sb.ToString());
Response.End(); // *Write End
}
------------------华丽的分割线--------------------------------------------------------------------------------
上述方法存在IE缓存问题，即子页面读取一次后，即时后台数据变化了，也不会更新显示。
解决方法：
1.在传递URL时加入一个随机参数(URL每次都不同，所以每次MouseOver都会重新请求)：
var url = "./Tips.aspx?arg1="+arg1; //old,need delete this row.
function GetRandomNum(Min,Max)
{
var Range = Max - Min;
var Rand = Math.random();
return(Min + Math.round(Rand * Range));
}
var url = "./Tips.aspx?arg1="+arg1+"&argRadom" = GetRandomNum(Min,Max) //new
2.xmlHttp.setrequestheader的属性
xmlHttp.setrequestheader("content-type","application/x-www-form-urlencoded; charset=gbk"); //old,need delete this row.
xmlHttp.setRequestHeader("If-Modified-Since","0");//new
***Important***
上述方法任选一种即可，但是还需要修改模态窗口坐标点选取的方式。
仅仅选取上述一种方式修改JS后，发现event.ClientX和event.ClientX无法选取，始终为null.
对应解决方法：
1.定义两个全局变量，用于存储MouseOver控件的坐标。
var objEventX;
var objEventY;
2.在function getContent(obj,ID,type){}中加入
objEventX=event.clientX;
objEventY=event.clientY;
3.更新function showtip()
arrayPageScroll = new Array(xScrollleft + event.clientX ,yScrolltop + event.clientY) ;//old,need delete this row.
arrayPageScroll = new Array(xScrollleft + objEventX ,yScrolltop + objEventY) ; //new
------------------华丽的分割线 again--------------------------------------------------------------------------------
上述题解存在OnMouseOut的问题（以上方法：鼠标移开主页面上的Label，Tips页面立马消失），要求鼠标范围在Tips页面时，仍然显示内容。
1.重新定义方法：
function getContent(obj,arg1) //异步请求
{
createXMLHttpRequest();
var url = "./Tips.aspx?arg1="+arg1;
xmlHttp.onreadystatechange = showtip;
xmlHttp.open("GET", url, true);
xmlHttp.setrequestheader("content-type","application/x-www-form-urlencoded; charset=gbk");
xmlHttp.send(null);
if(!getContent.iscreate) //new added
{
getContent.iscreate=true;
document.getElementById('showtip').onmouseover = function ()
{
document.getElementById('showtip').style.display="block";
}
document.getElementById('showtip').onmouseout=function()
{
clearData();
};
}
}
2.重新定义方法：
function clearData() //隐藏div
{
document.getElementById('showtip').style.display="none";
}
3.重新定义方法：
function showtip()
{
if (xmlHttp.readyState == 4)
{
if (xmlHttp.status == 200)
{
//取鼠标当前坐标
var yScrolltop;
var xScrollleft;
if (self.pageYOffset || self.pageXOffset)
{
yScrolltop = self.pageYOffset;
xScrollleft = self.pageXOffset;
}
else if (document.documentElement && document.documentElement.scrollTop || document.documentElement.scrollLeft )// Explorer 6 Strict
{
yScrolltop = document.documentElement.scrollTop;
xScrollleft = document.documentElement.scrollLeft;
}
else if (document.body)// all other Explorers
{
yScrolltop = document.body.scrollTop;
xScrollleft = document.body.scrollLeft;
}
arrayPageScroll = new Array(xScrollleft + event.clientX ,yScrolltop + event.clientY) ;
var end=arrayPageScroll[0];
var top=arrayPageScroll[1];
//End
document.getElementById('showtip').style.border='black 1px solid';
document.getElementById('showtip').style.left=end+10+'px';
document.getElementById('showtip').style.top=top+10+'px';
var Innertable=xmlHttp.responseText;
document.getElementById('showtip').innerHTML=Innertable;
document.getElementById('showtip').style.display="block";
}
}
}
之前的方式是鼠标离开后，清除div中元素；现方式是在tips的div中也引入onMouseOver和onMouseOut方法，并采取鼠标离开时隐藏而非清除div的方式。
浙公网安备 33010602011771号