腳本動(dòng)態(tài)生成VML
用 VML 畫一個(gè)示意圖,可以更明確上面的意義:
前面的圖文簡單的說就是:使用一個(gè) Iframe 做后臺(tái),前臺(tái)用腳本生成。也許擔(dān)心,后臺(tái)已經(jīng)完成了,但前臺(tái)還沒有初始化的情況,你可以放心,因?yàn)樽x數(shù)據(jù)的過程肯定相對(duì)要慢,如果擔(dān)心數(shù)據(jù)量少,只要你把腳本放在 Body 前面,Iframe 放在 Body 的最后面,就不會(huì)產(chǎn)生同步錯(cuò)誤的問題了。
現(xiàn)在來具體講講如何用腳本動(dòng)態(tài)產(chǎn)生 VML 。其實(shí)這和用腳本動(dòng)態(tài)產(chǎn)生 HTML 是一樣的過程。
<html xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>動(dòng)態(tài)創(chuàng)建VML</title>
</head>
<STYLE>
v\:* { BEHAVIOR: url(#default#VML) }
</STYLE>
<script language="JavaScript">
function createPoint(x,y,v)
{
var strElement="<v:rect title='"+v+"' style='top:"+x+";left:"+y+"width:100;height:100'></v:rect>";
var newPoint = document.createElement(strElemnt);
group1.insertBefore(newPoint);
}
</script>
<body>
<v:group ID="group1" style="WIDTH:200px;HEIGHT:200px;" coordsize = "200,200">
</v:group>
<iframe src="readData.asp" name="data" style="display:none"></iframe>
</body>
</html>
相應(yīng)的在 readData.asp 里面:
<script>
<%
'數(shù)據(jù)庫連接部分
'讀數(shù)據(jù)部分
Do Until rs.EOF
%>
parent.createPoint(<%=x%>,<%=y%>,<%=value%>);
<%
Loop
'數(shù)據(jù)庫關(guān)閉部分
%>
</script>
上面的顏色采用 HomeSite 4.5.2風(fēng)格
我們一開始就有了 Group1 ,所有以后動(dòng)態(tài)生成的 VML 直接插入到 Group1 的后面就可以了。曾經(jīng)做了三個(gè)實(shí)驗(yàn),第一個(gè)是普通的,用ASP生成 VML 代碼;第二個(gè)是不用Iframe,在同一個(gè)頁面生成腳本;第三個(gè)就是上面的例子,使用Iframe 產(chǎn)生腳本。結(jié)果在大數(shù)據(jù)量的條件下,效率最高的是第三個(gè),其次是第二個(gè),第一個(gè)有明顯的慢的感覺。
接下來的一節(jié),將講述VML最激動(dòng)人心的功能,放大縮??!