HTML中的title属性就实现了工具提示功能。然而,它却有三个限制:提示文本分行时不能跨浏览器、第一次获取页面时要纳入大量可能永远也不会用到的信息;不能自定义提示文本样式。而通过使用Ajax,可以突破这些限制,更好地控制提示文本。
工具提示实现了不用刷新页面就能显示更多的信息的功能,比如就地显示另一种语言,比如说就地显示列表详细信息。
大家都知道,HTML中的title属性就实现了这个功能。然而,它却有三个限制:
- 提示文本分行时不能跨浏览器:在IE中可以使用 , ,vbcrlf,\r
,\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(); %>
点击此处查看效果。