下载本文涉及的源代码

“Load，显示，点击，Load，显示，点击......” 如果你进行过Web开发，相信对这一场景一定不会陌生，因为我们都知道Web是一个基于请求的环境。如果你和web 服务器没有交互，Web应用就无从谈起，如果Web server没有信息返回，我们也就什么也都做不了。特别是你在基于ColdFusion创建由数据驱动的Web应用时情况更是如此。 经常上网的用户已经习惯了填写某个表格然后点击按钮，也习惯于从下拉式菜单中选择某项然后提交某个表格，当服务器接受了这些表格信息之后通常会返回更多的子菜单页面，有时这些页面中带了大量的图和新的内容需要下载，有时你等了半天才会沮丧的发现新页面比老页面仅有一点改变。那么为什么不试试在页面中插入隐式frame和JavaScript，提高页面加载的速度呢？

你可以做些什么？

将JavaScript和一个隐性的frame结合运用可以大大改变你进行ColdFusion开发的方式。你立刻就可以将动态生成的内容注入已有的下拉菜单中！你可以使用这个隐性frame运行查询过程并运行数据库函数，同时又不必离开已显示出来的页面。

这种技术可以使你的Web应用快速显示动态页面，使用户产生和服务器同步交互的错觉。你完全可以象开发Windows应用那样创建Web应用了。

介绍JavaScript

如果你的站点访问用户在95年以后已经做过浏览器的升级，那么他们的浏览器就可以支持JavaScript。Microsoft和Netscape浏览器对这种语言的解释略有差异，使用JavaScript1.1版本进行开发一点问题都没有。

当使用ColdFusion创建JavaScript应用时，最常见的应用就是当表格区的值发生改变，或提交一个表单，点穿一个链接的时候。在本文中，我们重点只以"SELECT"类型的表单为例说明。

如果客户端不支持JavaScript，我们这里谈的技术就不会起作用。如果你是开发一个公共的Web站点，则很难保证每个浏览用户的客户端都支持JavaScript。反过来如果你是在严格可以控制的extranet或intranet范围内进行开发，你可以控制网络中使用某个特定的浏览器版本，那么就可以使用JavaScript技术以及ColdFusion成功的进行Web开发。

准备隐性Frame

通常，我们的目标是将隐性frame尽量的掩藏起来。你可以尝试使用DHTML使Frame变得真正不可视，但是在传统的HTML世界里，你的隐性frame至少还需要占据屏幕的一小块空间。

如果你不希望页面中显示出frame结构，那么我们就需要规划一个隐式frame。每次当frame页面发生改变时，整个页面看上去都跟着改变。你可以根据站点的背景颜色选择是使用行或列的frame，是否需要在特定的位置放置隐性frame。

图一、在页面底部做Frame结构并设计一个隐性frame

以下代码所得到的Frame结构在浏览器中显示如图一。

<FRAMESET ROWS="*,1" FRAMEBORDER="0" BORDER=0 BORDER="0">

<FRAME SRC="main.cfm" NAME="main" SCROLLING=AUTO>

<FRAME SRC="blank.html" NAME="hidden" SCROLLING=NO >

</FRAMESET>

如果你创建的站点基于frame结构，那就更方便了。因为你可以把隐式frame隐藏在你的导航frame末端。这样你可以将隐性Frame缩短80%左右。以下代码可以做出图二中的导航台的设计。

<FRAMESET COLS="100,*" FRAMEBORDER="0" BORDER=0 BORDER="0">

<FRAMESET ROWS="1,*" FRAMEBORDER="0" BORDER=0 BORDER="0">

<FRAME SRC="blank.html" NAME="hidden" SCROLLING=NO>

<FRAME SRC="menu.cfm" NAME="menu" SCROLLING=NO>

</FRAMESET>

<FRAME SRC="main.cfm" NAME="main" SCROLLING=AUTO>

</FRAMESET>

图二：在导航列中设置隐性的frame。

一般，将你的隐性frame保留在另一个frame的顶部比较好，这样你就不会出现找不到的情况。

为说明这些概念，我们直接看两个例子，你还可以下载源代码进行学习。

例一、

一个用户已经登录到站点上，我正在跟踪一个名为userid的变量。在一个活动的应用程序中，它会通过一个变量传递过去，但是在我们的例子中，我就将它设置在文件的顶部。用户可以从看到的页面选择一个客户端并看到所有相关联的公司通知。

现在我将使用例子中的数据源。用户所查询的信息位于名为“ClientMemo”的table中，view-tracking records存储在“ReadMemos”的table中。为了简化table的结构，因为我们都习惯了处理非标准化的数据库，在ClientMemo的table中的每一行都有client name和unique ID。

用ColdFusion生成SELECT选择框非常方便，因此该页面载入后，选择框中将出现一个客户列表。JavaScript在这里的独特之处是在“onChange”事件中。当用户从下拉菜单中选择一个客户之后，JavaScript将给隐性frame发出一个文件请求，其中带有Userid变量和已选定的ClientNumber的值。请注意我们是如何将JavaScript函数封装到CFOUTPUT 标识中并在location call中创建Userid 变量的。

getmemo.cfm文件记录请求并将所有记录传给client。在接着建立一个JavaScript变量回传到main frame时，通过查询做一个CFOUTPUT循环，。循环结束后，main frame中的TEXTAREA将根据适当的值做刷新。所有的隐性frame都不会显示出HTML代码。只有一些不可视的JavaScript。假如你的隐性frame和某种颜色混合时，一定别忘了添加一个BODY tag。

在隐性frame中运行的代码如下：

<!--- get a list of all the memos for this client --->

<CFQUERY DATASOURCE="example1" NAME="memoquery">

SELECT DateEntered, MemoText

FROM ClientMemo

WHERE ClientNum = #ClientNum#

ORDER BY DateEntered

</CFQUERY>

<SCRIPT>

var WholeMemo = "";

<!--- loop through the results and build up the return string --->

<CFOUTPUT QUERY=memoquery>

WholeMemo += "Date:

#Month(DateEntered)#/#Day(DateEntered)#/#Year(DateEntered)#\n";

WholeMemo += "#Replace(MemoText, ' " ', ' "" ', "All")#

WholeMemo += "\n----------------------------\n"

</CFOUTPUT>

<!--- this part sets the value in the other document --->

top.main.document.exampleform.TheMemo.value = WholeMemo;

</SCRIPT>

这样我们看到使用ColdFusion创建的JavaScript语句，以及在页面背后运行的查询。你可能会注意到，你可以在一个单独的传递或多个传递中使用ColdFusion建立JavaScript变量。但是，如果你没有实际在某处更新一个文档并在query string中建立变量，你就无法创建带有JavaScript变量的ColdFusion应用。

例子二

试想如果用户基于智能的SELECT选择框使用一个应用将有多么简单。他们可以在第一个框中选出一个目录，这时，在第二个框中出现的选项都是仅仅和用户第一次的选择相关的内容。这时，用户可以根据需要在第二个选择框中做进一步的选定工作，然后第二次选择的内容立刻就被显示出来。在例二中我们说明使用JavaScript功能的浏览器如何实现这种效果。

为方便说明，我使用一个非常简单的例子。在第一次SELECT中，选择项为A，B，C。每次选中不同的字母，SELECT将查询一个table并动态生成第二个SELECT的目录项，再次选择每个目录项，就回从数据库中调出相应的文本内容，并以前面选定的字母为开头。

在隐性frame中运行的代码:

<!--- Query to get the list of matches --->

<CFQUERY DATASOURCE="example" NAME="allTheMatches">

SELECT TheWord, WordNum

FROM TheWords

WHERE TheWord LIKE '#firstletter#%'

</CFQUERY>

<SCRIPT>

var DestDoc = top.main.document;

var DestField = SourceDoc.exampleform2.matches;

<!--- Loop through the query calling the 'Add' function in the other frame -?br>

<CFOUTPUT QUERY="allTheMatches">

top.main.addToSelectUnique(DestField, '#TheWord#', '#WordNum#')

</CFOUTPUT>

<!--- if there were no matches then send a message to that effect --->

<CFIF allTheMatches.recordCount EQ 0>

top.main.addToSelectUnique(DestField, 'No Matches', '0')

</CFIF>

</SCRIPT>

通过以上代码，你会发现，当SELECT框改变时，就会呼叫'getmatches'函数。如果选中某个字母，控制权就传给隐性frame。接着查询数据库取出相应数据，生成第二个SELECT框。最后，循环查询结果，一行一行的添加数据。和例一不同的是，隐性frame呼叫位于main frame中的JavaScript函数，并将数据回传给main frame。而例一是隐性frame自己呼叫JavaScript并更新main frame。