使用Ajax自定义工具提示

HTML中的title属性就实现了工具提示功能。然而，它却有三个限制：提示文本分行时不能跨浏览器、第一次获取页面时要纳入大量可能永远也不会用到的信息；不能自定义提示文本样式。而通过使用Ajax，可以突破这些限制，更好地控制提示文本。

工具提示实现了不用刷新页面就能显示更多的信息的功能，比如就地显示另一种语言，比如说就地显示列表详细信息。

大家都知道，HTML中的title属性就实现了这个功能。然而，它却有三个限制：

• 提示文本分行时不能跨浏览器：在IE中可以使用 ， ，vbcrlf，\n，\r等特殊字符来实现，不过它们这些字符在其它浏览器中往往被忽略或转换成空格；
• 第一次获取页面时要载入大量可能永远也不会用到的信息；
• 不能自定义提示文本样式，只能使用默认设置。

而通过使用Ajax，可以突破这些限制，更好地控制提示文本。

• 可以结合CSS实现跨浏览器提示文本分行；
• 只会在需要时发送所需的信息；
• 可以结合CSS自定义提示文本样式，甚至结合Javascript以特效的方式显示提示文本。

虽然我们的例子三个功能很有实现，但你能从中了解到如何提供自己的动态工具提示信息。这个例子中有一个关于学生信息的列表，当用户把鼠标停在表中某个单元格上时，会显示从数据库读取的该生的考号及试成绩。如果不存在该生的考试信息，则会提示错误。

客户端代码很简单。这里最有意思的是calculateOffset()方法。在理想情况下，可以依赖于当前元素的offset属性。不过，如果要跨浏览器，这样做不一定可行，不同浏览器上的偏移量可能不同。但是，你可以访问DOM来生成一个准确的偏移量，并使用这个偏移量来放置动态内容。

服务器端代码也很简单，主要根据获取请求的URL参数，从数据库查找相应记录，然后返回一个XML文件到客户端。代码如下：

<%@LANGUAGE="JAVASCRIPT" CODEPAGE="65001"%>
<%
//设置编码
Response.Charset = "UTF-8";
// 获取请求的URL参数
var sid=Request.QueryString("sid");
//设定为XML文件
Response.ContentType="text/xml";
//不保留缓存
Response.CacheControl="no-cache";
//输出XML文件声明
Response.Write("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");
var conn = new ActiveXObject("ADODB.CONNECTION");
strconn = "DBQ="+Server.MapPath("../../App_Data/Exam.mdb")+";Driver={Microsoft Access Driver (*.mdb)};";
conn.Open(strconn);
var rs = new ActiveXObject("ADODB.RECORDSET");
var sql = "Select ScoreID,Chinese,Maths,English FROM Score Where StudentID = '"+sid+"'";
rs.Open(sql,conn,1,1);
//输出根标记
Response.Write("<score>");
if(!rs.EOF){
    //输出子元素
	Response.Write("<ID>"+rs("ScoreID")+ "</ID>");
	Response.Write("<Chinese>"+rs("Chinese")+ "</Chinese>");
	Response.Write("<Maths>"+rs("Maths")+ "</Maths>");
	Response.Write("<English>"+rs("English")+ "</English>"); 
}
Response.Write("</score>");
rs.Close();
conn.Close();
%>

点击此处查看效果。

上一篇: FLVPlayback的变化
下一篇: 使用XML实现Flash与服务器通信
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: TestDriveTestDrive
相关日志: