龍行天下

javascript調(diào)用方式：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<script. type=”text/javascript” src=”FCKeditor/fckeditor.js”></scrīpt>
<textarea name=”content” cols=”80″ rows=”4″>
</textarea>
<script. type=”text/javascript”>
var FCKeditor = new FCKeditor(”content”);
oFCKeditor.BasePath = “FCKeditor/”;
oFCKeditor.Height = 400;
oFCKeditor.ToolbarSet = “Default”;
oFCKeditor.ReplaceTextarea();
</script>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
如果想要使用從數(shù)據(jù)庫(kù)讀來(lái)的文本數(shù)據(jù)或者是后臺(tái)來(lái)自文件的txt/html文本數(shù)據(jù)。
只要在
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<textarea name=”content” cols=”80″ rows=”4″>
</textarea>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
中加入自己的顯示內(nèi)容的formbean對(duì)應(yīng)字段即可
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<textarea name=”content” cols=”80″ rows=”4″>
<c:out value=”${contentData}” />
</textarea>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
這樣內(nèi)容就會(huì)被顯示在FCKeditor編輯框中了，點(diǎn)擊提交按鈕以后就可以在后臺(tái)的相應(yīng)java action中得到content參數(shù)中的內(nèi)容就是頁(yè)面上FCKeditor中的內(nèi)容數(shù)據(jù)了?？梢栽趕truts/jsf中使用。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
由于給FCKeditor瘦身，所以常會(huì)報(bào)缺少對(duì)象支持等錯(cuò)誤，只要在FCKeditor/editor/lang中加上相應(yīng)的js語(yǔ)言文件即可。如果加載頁(yè)面失?。‵CKeditor未定義）還有一個(gè)可能就是引用FCKeditor/fckeditor.js文件路徑不對(duì)！
關(guān)于FCKeditor瘦身要點(diǎn)如下：
1.將FCKeditor目錄下及子目錄下所有以“_”下劃線開(kāi)頭的文件夾刪除
2.FCKeditor根目錄下只保留fckconfig.js, fckeditor.js, fckstyles.xml, fcktemplates.xml，其余全部刪除
3.將editor/filemanager/upload目錄下文件及文件夾清空
4.將/editor/filemanager/browser/default/connectors/下的所有文件刪除
5.還可以將editor/skins目錄下的皮膚文件刪除，只留下default一套皮膚（如果你不需要換皮膚的話）
6.還可以將editor/lang目錄下文件刪除，只保留en.js, fcklanguagemanager.js, zh-cn.js, zh.js文件
7.如果你是使用javascrīpt來(lái)調(diào)用加載FCKeditor，那么就不需要在web.xml中配置fckeditor的tag文件。
8.還有一個(gè)問(wèn)題剛開(kāi)始使用FCKeditor的人常會(huì)遇到就怎么控制它的toolbar的大小和元素排列，其實(shí)很簡(jiǎn)單。
在fckconfig.js中用這樣的標(biāo)簽[]來(lái)劃分每行的元素的多少，這樣就可以控制toolbar的長(zhǎng)短和大小了，具體示例參看：fckconfig.js中的toolbarset[”Default”]
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
用fckconfig.js中的一些選項(xiàng)來(lái)控制toolbarset中控件的功能，實(shí)現(xiàn)功能裁剪：
1)：取消超鏈接中的瀏覽服務(wù)器和上傳功能，方法如下：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
FCKConfig.LinkBrowser = true;
FCKConfig.LinkUpload = true;
改為：
FCKConfig.LinkBrowser = false;
FCKConfig.LinkUpload = false;
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
2)：取消圖片鏈接中的瀏覽服務(wù)器和上傳功能，方法如下：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
FCKConfig.ImageUpload = true;
FCKConfig.ImageBrowser = true;
改為：
FCKConfig.ImageUpload = false;
FCKConfig.ImageBrowser = false;
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
3)：Dlg Button中取消高級(jí)功能，方法如下：
FCKConfig.LinkDlgHideAdvanced = false ;
FCKConfig.ImageDlgHideAdvanced = false ;
改為：
FCKConfig.ImageDlgHideAdvanced = true ;
FCKConfig.LinkDlgHideTarget = true ;
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
下一篇介紹FCKeditor的上傳和瀏覽服務(wù)器功能，以及如何在里面實(shí)現(xiàn)動(dòng)態(tài)
超連接，轉(zhuǎn)發(fā)到servlet經(jīng)過(guò)filter以后去調(diào)用服務(wù)器的action
如何實(shí)現(xiàn)對(duì)應(yīng)用戶瀏覽自己的圖片的列表實(shí)現(xiàn)！
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
FCKeditor集成java servlet可以實(shí)現(xiàn)文件的上傳和服務(wù)器端列表讀取功能FCKeditor自己提供了兩個(gè)servlet來(lái)分別實(shí)現(xiàn)上傳文件功能，和讀取服務(wù)器端文件列表功能，這兩個(gè)servlet分別為：
com.fredck.FCKeditor.connector.ConnectorServlet（讀取文件列表）
com.fredck.FCKeditor.uploader.SimpleUploaderServlet（實(shí)現(xiàn)文件上傳）
1.瀏覽服務(wù)器端文件列表
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
web.xml文件中，比如：ConnectorServlet中的配置選項(xiàng)：
<init-param>
<param-name>baseDir</param-name>
<param-value>/UserFiles/</param-value>
</init-param>
意思是在瀏覽服務(wù)器上的baseDir配置指定里面的所有文件及其目錄結(jié)構(gòu)列表。
如果你的baseDir沒(méi)有配置，Connector將會(huì)自動(dòng)創(chuàng)建一個(gè)默認(rèn)的文件夾
UserFiles，對(duì)應(yīng)的ConnectorServlet中init()方法中代碼如下：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
baseDir = getInitParameter(”baseDir”);
if (baseDir == null)
baseDir = “/UserFiles/”;
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
還想說(shuō)一下的是，F(xiàn)CKeditor的client調(diào)用server的servlet方法采用的是Ajax思想來(lái)實(shí)現(xiàn)。當(dāng)你點(diǎn)擊瀏覽服務(wù)器(browser server)的時(shí)候就會(huì)觸發(fā)一個(gè)異步的javascrīpt + xmlhttp的調(diào)用響應(yīng)，后臺(tái)的servlet會(huì)去完成你要請(qǐng)求的事件，然后數(shù)據(jù)以xml方式返回給client來(lái)解析。很明顯，你要實(shí)現(xiàn)去數(shù)據(jù)庫(kù)或者其他的文件系統(tǒng)請(qǐng)求列表，你只要修改
ConnectorServlet中兩個(gè)私有方法：getFolders 和 getFiles
讓它去你指定的地方得到文件列表即可，這樣你的文件可以放在任何你指定目錄下。多說(shuō)一句，很多人都想知道個(gè)人blog系統(tǒng)中怎么實(shí)現(xiàn)上傳文件以后對(duì)應(yīng)用戶瀏覽自己的列表的，我的做法很簡(jiǎn)單，建立你用戶名的文件夾，你上傳只能上傳到你的目錄夾，瀏覽可以通過(guò)程序指定瀏覽對(duì)應(yīng)用戶下的文件夾即可，這個(gè)時(shí)候你要修改Connectorservlet中的路徑即可！
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
2.超連接重定位問(wèn)題
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
FCKeditor可以插入超連接，實(shí)現(xiàn)對(duì)文件的預(yù)覽功能，只要我們稍微改變我們可以使FCKeditor編輯器支持對(duì)任意文件系統(tǒng)下的任意文件的客戶端瀏覽和下載保存！FCKeditor本來(lái)提供的是相對(duì)URL超鏈接，只要我們修改ConnectorServlet中傳遞給客戶端的地址的時(shí)候，把它改寫(xiě)成絕對(duì)URL然后再通過(guò)我們自己的filter的servlet實(shí)現(xiàn)重定向去一個(gè)下載/瀏覽文件的struts的action方法就可以實(shí)現(xiàn)在客戶端對(duì)超連接文件的下載和瀏覽！說(shuō)一下具體做法吧：
1)：修改ConnectorServlet傳遞給客戶端javascrīpt的路徑，代碼如下：
String currentUrl = “http://” + request.getserver +request.getServerPort + request.getContextPath + resourcePath;
以上代碼請(qǐng)?jiān)贑onnectorServlet的doGet()里面拼裝！在調(diào)用CreateCommonXml()私有方法的時(shí)候參數(shù)傳入：
myEl.setAttribute(”path”,currentPath);
myEl.setAttribute(”url”,currentUrl);
提醒一下resourcePath為在web.xml配置文件中ConnectorServlet中的一個(gè)初始化參數(shù)配置，等一下利用filter實(shí)現(xiàn)對(duì)超連接的重定位就提取URL中的這個(gè)配置參數(shù)來(lái)判斷，配置如下：
<init-param>
<param-name>resourcePath</param-name>
<param-value>/fileSystem/</param-value>
</init-param>
2)：建立你的filter servlet，實(shí)現(xiàn)對(duì)URL的截獲，對(duì)符合要求的URL進(jìn)行重定位到你的對(duì)應(yīng)action中去即可
3)：實(shí)現(xiàn)你的對(duì)應(yīng)action來(lái)實(shí)現(xiàn)文件的上傳和下載功能即可！
4)：擴(kuò)展功能－實(shí)現(xiàn)對(duì)URL的加密，對(duì)連接的URL中加上一串字符，最后幾位作為算法校驗(yàn)，對(duì)不符合要求的URL連接,filter將會(huì)拒絕重定位到指定action。此外利用自己寫(xiě)的擴(kuò)展類(lèi)還可以實(shí)現(xiàn)對(duì)超連接的文件類(lèi)型進(jìn)行限制，比如你只能超連接JPG|GIF|DOC|TXT|HTML等幾種后綴名的文件，對(duì)其他文件即使你指定超連接也讓你瀏覽和下載，這些都可以在web.xml中通過(guò)修改對(duì)應(yīng)servlet的配置文件的初始化參數(shù)實(shí)現(xiàn)。
3.頁(yè)面javascrīpt修改
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
瀏覽服務(wù)器的功能對(duì)應(yīng)的html/javascrīpt相關(guān)的文件為：browser.html和frmresourcelist.html對(duì)應(yīng)你想傳遞的信息你可以append在文件名的字符串后面，在GetFileRowHtml（）的javascrīpt函數(shù)中實(shí)現(xiàn)對(duì)文件名的截取，這樣client只會(huì)顯示文件名，而你可以得到文件的數(shù)據(jù)庫(kù)唯一標(biāo)識(shí)，任何你想要的信息你都可以通過(guò)修改ConnectorServlet中的私有方法getFiles()來(lái)實(shí)現(xiàn)，只要修改頁(yè)面frmresurcelist.html中的GetFileRowHtml（）中傳入變量fileName即可。你還可以在點(diǎn)擊選中文件的時(shí)候?qū)崿F(xiàn)一個(gè)你自己的Ajax調(diào)用，一切取決你的項(xiàng)目需要！
4.我不是一個(gè)javascrīpt高手，其實(shí)如果我對(duì)javascrīpt了解多一些也許對(duì)客戶端的代碼修改以后做出更眩的功能?？梢愿玫耐瓿蓪?duì)FCKeditor裁剪。
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
5.注意點(diǎn)
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
無(wú)論怎么修改別人的東西，請(qǐng)一定尊重開(kāi)源精神！
很多人配置好了FCKeditor的上傳功能以后常會(huì)遇到xmlhttp request 404 error,后面是一串路徑，其實(shí)就是你的servlet-mapping中的路徑不對(duì)，你只要把xmlhttp request errot 404 后面跟的路徑，copy到你的web.xml中對(duì)應(yīng)紅色文字的位置，如下：
<servlet-mapping>
<servlet-name>Connector</servlet-name>
<url-pattern>/FCKeditor/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern>
</servlet-mapping>
別忘了SimpleUploader的servlet－mapping也要做同樣的修改！
還有一個(gè)錯(cuò)誤就是http 500錯(cuò)誤，這個(gè)可能是你的URL請(qǐng)求不對(duì)，應(yīng)該和FCKeditor沒(méi)關(guān)系的!
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
fckconfig.js總配置文件，可用記錄本打開(kāi)，修改后將文件存為utf-8 編碼格式。找到：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
FCKConfig.TabSpaces = 0;
改為：
FCKConfig.TabSpaces = 1;
即在編輯器域內(nèi)可以使用Tab鍵。
如果你的編輯器還用在網(wǎng)站前臺(tái)的話，比如說(shuō)用于留言本或是日記回復(fù)時(shí)，那就不得不考慮安全了，
在前臺(tái)千萬(wàn)不要使用Default的toolbar，要么自定義一下功能，要么就用系統(tǒng)已經(jīng)定義好的Basic，
也就是基本的toolbar，找到：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
FCKConfig.ToolbarSets[”Basic”] = [
[’Bold’,'Italic’,'-’,'OrderedList’,'UnorderedList’,'-’,/*’Link’,*/’Unlink’,'-’,'Style’,'FontSize’,'TextColor’,'BGColor’,'-’,
‘Smiley’,'SpecialChar’,'Replace’,'Preview’] ];
這是改過(guò)的Basic，把圖像功能去掉，把添加鏈接功能去掉，因?yàn)閳D像和鏈接和flash和圖像按鈕添加功能都能讓前臺(tái)頁(yè)直接訪問(wèn)和上傳文件， fckeditor還支持編輯域內(nèi)的鼠標(biāo)右鍵功能。
FCKConfig.ContextMenu = [’Generic’,/*’Link’,*/’Anchor’,/*’Image’,*/’Flash’,'Select’,'Textarea’,'Checkbox’,'Radio’,'TextField’,'HiddenField’,
/*’ImageButton’,*/’Button’,'BulletedList’,'NumberedList’,'TableCell’,'Table’,'Form’];
這也是改過(guò)的把鼠標(biāo)右鍵的“鏈接、圖像，F(xiàn)LASH，圖像按鈕”功能都去掉。
找到：
FCKConfig.FontNames = ‘Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana’;
加上幾種我們常用的字體
FCKConfig.FontNames = ‘宋體;黑體;隸書(shū);楷體_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana’;
添加文件 /TestFCKeditor/test.jsp:
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<%@ page language=”java” import=”com.fredck.FCKeditor.*” %>
<%@ taglib uri=”/TestFCKeditor” prefix=”FCK” %>
<script. type=”text/javascript” src=”/TestFCKeditor/FCKeditor/fckeditor.js”></script>
<%–
三種方法調(diào)用FCKeditor
1.FCKeditor自定義標(biāo)簽 (必須加頭文件 <%@ taglib uri=”/TestFCKeditor” prefix=”FCK” %> )
2.script腳本語(yǔ)言調(diào)用 (必須引用 腳本文件 <script. type=”text/javascript” src=”/TestFCKeditor/FCKeditor/fckeditor.js”></script> )
3.FCKeditor API 調(diào)用 (必須加頭文件 <%@ page language=”java” import=”com.fredck.FCKeditor.*” %> )
–%>
<%–
<form. action=”show.jsp” method=”post” target=”_blank”>
<FCK:editor id=”content” basePath=”/TestFCKeditor/FCKeditor/”
width=”700″ height=”500″ skinPath=”/TestFCKeditor/FCKeditor/editor/skins/silver/”
toolbarSet = “Default”>
內(nèi)容
</FCK:editor>
<input type=”submit” value=”Submit”>
</form>
–%>
<form. action=”show.jsp” method=”post” target=”_blank”>
<table border=”0″ width=”700″>
<tr>
<td>
<textarea id=”content” name=”content” style=”WIDTH: 100%; HEIGHT: 400px”>input</textarea>
<script. type=”text/javascript”>
var FCKeditor = new FCKeditor(’content? ;
oFCKeditor.BasePath = “/TestFCKeditor/FCKeditor/” ;
oFCKeditor.Height = 400;
oFCKeditor.ToolbarSet = “Default” ;
oFCKeditor.ReplaceTextarea();
</script>
<input type=”submit” value=”Submit”>
</td>
</tr>
</table>
</form>
<%–
<form. action=”show.jsp” method=”post” target=”_blank”>
<%
FCKeditor oFCKeditor ;
oFCKeditor = new FCKeditor( request, “content” ) ;
oFCKeditor.setBasePath( “/TestFCKeditor/FCKeditor/” ) ;
oFCKeditor.setValue( “input” );
out.println( oFCKeditor.create() ) ;
%>
<br>
<input type=”submit” value=”Submit”>
</form>
–%>
添加文件/TestFCKeditor/show.jsp:
<%
String content = request.getParameter(”content”);
out.print(content);
%>
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
1、適時(shí)打開(kāi)編輯器
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
很多時(shí)候，我們?cè)诖蜷_(kāi)頁(yè)面的時(shí)候不需要直接打開(kāi)編輯器，而在用到的時(shí)候才打開(kāi)，這樣一來(lái)有很好的用戶體驗(yàn)，另一方面可以消除FCK在加載時(shí)對(duì)頁(yè)面打開(kāi)速度的影響，點(diǎn)擊“Open Editor”按鈕后才打開(kāi)編輯器界面。
實(shí)現(xiàn)原理：
使用JAVASCRIPT版的FCK，在頁(yè)面加載時(shí)（未打開(kāi)FCK），創(chuàng)建一個(gè)隱藏的TextArea域，這個(gè)TextArea
的name和ID要和創(chuàng)建的FCK實(shí)例名稱一致，然后點(diǎn)擊”Open Editor”按鈕時(shí)，通過(guò)調(diào)用一段函數(shù)，使用
FCK的ReplaceTextarea()方法來(lái)創(chuàng)建FCKeditor，代碼如下：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<script. type=”text/javascript”>
<!–
function showFCK(){
var FCKeditor = new FCKeditor( ‘fbContent’ ) ;
oFCKeditor.BasePath = ‘/FCKeditor/’ ;
oFCKeditor.ToolbarSet = ‘Basic’ ;
oFCKeditor.Width = ‘100%’ ;
oFCKeditor.Height = ‘200′ ;
oFCKeditor.ReplaceTextarea() ;
}
//–>
</script>
<textarea name=”fbContent” id=”fbContent”></textarea>
2、使用FCKeditor 的 API
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
FCKeditor編輯器，提供了非常豐富的API，用于給End User實(shí)現(xiàn)很多想要定制的功能，比如最基本的數(shù)據(jù)驗(yàn)證，如何在提交的時(shí)候用JS判斷當(dāng)前編輯器區(qū)域內(nèi)是否有內(nèi)容，F(xiàn)CK的API提供了GetLength()方法；
再比如如何通過(guò)腳本向FCK里插入內(nèi)容，使用InsertHTML()等；
還有，在用戶定制功能時(shí)，中間步驟可能要執(zhí)行FCK的一些內(nèi)嵌操作，那就用ExecuteCommand()方法。
詳細(xì)的API列表，請(qǐng)查看FCKeditor的Wiki。而常用的API，請(qǐng)查看FCK壓縮包里的_samples/html/sample08.html。此處就不貼代碼了。
3、外聯(lián)編輯條（多個(gè)編輯域共用一個(gè)編輯條）
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
這個(gè)功能是2.3版本才開(kāi)始提供的，以前版本的FCKeditor要在同一個(gè)頁(yè)面里用多個(gè)編輯器的話，得一個(gè)個(gè)創(chuàng)建，現(xiàn)在有了這個(gè)外聯(lián)功能，就不用那么麻煩了，只需要把工具條放在一個(gè)適當(dāng)?shù)奈恢?，后面就可以無(wú)限制的創(chuàng)建編輯域了。
要實(shí)現(xiàn)這種功能呢，需要先在頁(yè)面中定義一個(gè)工具條的容器：<div id=”xToolbar”></div>，然后再根據(jù)這個(gè)容器的id屬性進(jìn)行設(shè)置。
JAVASCRIPT實(shí)現(xiàn)代碼：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<div id=”xToolbar”></div>
FCKeditor 1:
<script. type=”text/javascript”>
<!–
// Automatically calculates the editor base path based on the _samples directory.
// This is usefull only for these samples. A real application should use something like this:
// oFCKeditor.BasePath = ‘/fckeditor/’; // ‘/fckeditor/’ is the default value.
var sBasePath = document.location.pathname.substring(0,document.location.pathname.lastIndexOf(’_samples’));
var FCKeditor = new FCKeditor( ‘FCKeditor_1′ );
oFCKeditor.BasePath = sBasePath;
oFCKeditor.Height = 100;
oFCKeditor.Config[ ‘ToolbarLocation’ ] = ‘Out:parent(xToolbar)’;
oFCKeditor.Value = ‘This is some <strong>sample text</strong>. You are using FCKeditor.’;
oFCKeditor.Create();
//–>
</script>
<br />
FCKeditor 2:
<script. type=”text/javascript”>
<!–
FCKeditor = new FCKeditor( ‘FCKeditor_2′ );
oFCKeditor.BasePath = sBasePath;
oFCKeditor.Height = 100;
oFCKeditor.Config[ ‘ToolbarLocation’ ] = ‘Out:parent(xToolbar)’;
oFCKeditor.Value = ‘This is some <strong>sample text</strong>. You are using FCKeditor.’;
oFCKeditor.Create();
//–>
</script>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
此部分的詳細(xì)DEMO請(qǐng)參照_samples/html/sample11.html，_samples/html/sample11_frame.html
4、文件管理功能、文件上傳的權(quán)限問(wèn)題
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
一直以來(lái)FCKeditor的文件管理部分的安全是個(gè)值得注意，但很多人沒(méi)注意到的地方，雖然FCKeditor在各個(gè)Release版本中一直存在的一個(gè)功能就是對(duì)上傳文件類(lèi)型進(jìn)行過(guò)濾，但是她沒(méi)考慮過(guò)另一個(gè)問(wèn)題：到底允許誰(shuí)能上傳？到底誰(shuí)能瀏覽服務(wù)器文件？
之前剛開(kāi)始用FCKeditor時(shí)，我就出現(xiàn)過(guò)這個(gè)問(wèn)題，還好NetRube（FCKeditor中文化以及FCKeditor ASP版上傳程序的作者）及時(shí)提醒了我，做法是去修改FCK上傳程序，在里面進(jìn)行權(quán)限判斷，并且再在fckconfig.js里把相應(yīng)的一些功能去掉。但隨之FCK版本的不斷升級(jí)，每升一次都要去改一次配置程序fckconfig.js，我發(fā)覺(jué)厭煩了，就沒(méi)什么辦法能更好的控制這種配置么？事實(shí)上，是有的。
在fckconfig.js里面，有關(guān)于是否打開(kāi)上傳和瀏覽服務(wù)器的設(shè)置，在創(chuàng)建FCKeditor時(shí)，通過(guò)程序來(lái)判斷是否創(chuàng)建有上傳瀏覽功能的編輯器。首先，我先在fckconfig.js里面把所有的上傳和瀏覽設(shè)置全設(shè)為false，接著我使用的代碼如下：
JAVASCRIPT版本：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
<script. type=”text/javascript”>
var FCKeditor = new FCKeditor( ‘fbContent’ );
<% if power = powercode then %>
oFCKeditor.Config[’LinkBrowser’] = true;
oFCKeditor.Config[’ImageBrowser’] = true;
oFCKeditor.Config[’FlashBrowser’] = true;
oFCKeditor.Config[’LinkUpload’] = true;
oFCKeditor.Config[’ImageUpload’] = true;
oFCKeditor.Config[’FlashUpload’] = true;
<% end if %>
oFCKeditor.ToolbarSet = ‘Basic’;
oFCKeditor.Width = ‘100%’;
oFCKeditor.Height = ‘200′;
oFCKeditor.Value = ‘’;
oFCKeditor.Create();
</script>
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
在按鈕旁邊加文字
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
打開(kāi) editor/js/ 兩個(gè)js文件
fckeditorcode_gecko.js
fckeditorcode_ie.js
第一個(gè)是支持非ie瀏覽器的
第二個(gè)文件是支持ie瀏覽器的
搜索 FCKToolbarButton，可以看到許多類(lèi)似這樣的語(yǔ)句：
case ‘Save’:B = new FCKToolbarButton(’Save’, FCKLang.Save, null, null, true, null, 3); break;
‘Save’是按鈕英文名字
FCKToolbarButton 的四個(gè)參數(shù)分別是：
按鈕命令名稱，按鈕標(biāo)簽文字，按鈕工具提示，按鈕樣式，按鈕是否在源代碼模式可見(jiàn)，按鈕下拉菜單其中將第4項(xiàng)參數(shù)設(shè)置為 FCK_TOOLBARITEM_ICONTEXT 即可使按鈕旁邊出現(xiàn)文字，注意沒(méi)有引號(hào)。
例如：
case ‘Preview’:B = new FCKToolbarButton(’Preview’, FCKLang.Preview, null, FCK_TOOLBARITEM_ICONTEXT, true, null, 5);
這樣我們就可以將 我們經(jīng)常用的3種模式源代碼、預(yù)覽、全屏編輯按鈕都加上文字了。
解釋fck樣式的工作原理
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
fck的樣式設(shè)置涉及到了兩個(gè)文件，一個(gè)是你定義好的樣式表文件.css，另一個(gè)是告訴fck樣式表如何使用的xml文件，兩個(gè)文件確一不可。
css文件的位置是不做要求的，但是需要你在應(yīng)用的編輯器的頁(yè)面上插入樣式表文件的鏈接。這樣才能顯示出來(lái)樣式。
fckstyles.xml 在與editor目錄同級(jí)的目錄下。該文件定義了那些樣式可以使用在那些標(biāo)簽里面。
這就是fck自帶的樣式xml定義：
<?xml version=”1.0″ encoding=”utf-8″ ?>
<Styles>
<Style name=”Image on Left” element=”img”>
<Attribute name=”style” value=”padding: 5px; margin-right: 5px” />
<Attribute name=”border” value=”2″ />
<Attribute name=”align” value=”left” />
</Style>
<Style name=”Image on Right” element=”img”>
<Attribute name=”style” value=”padding: 5px; margin-left: 5px” />
<Attribute name=”border” value=”2″ />
<Attribute name=”align” value=”right” />
</Style>
<Style name=”Custom Bold” element=”span”>
<Attribute name=”style” value=”font-weight: bold;” />
</Style>
<Style name=”Custom Italic” element=”em” />
<Style name=”Title” element=”span”>
<Attribute name=”class” value=”Title” />
</Style>
<Style name=”Code” element=”span”>
<Attribute name=”class” value=”Code” />
</Style>
<Style name=”Title H3″ element=”h3″ />
<Style name=”Custom Ruler” element=”hr”>
<Attribute name=”size” value=”1″ />
<Attribute name=”color” value=”#ff0000″ />
</Style>
</Styles>
每一個(gè)<style>將來(lái)會(huì)生成一個(gè)樣式的菜單項(xiàng)。name名稱就是顯示在菜單里的文字；element定義了該樣式可以應(yīng)用在那種html標(biāo)簽上，<Attribute>的 name 指定了將會(huì)修改標(biāo)簽的哪個(gè)屬性來(lái)應(yīng)用樣式，value則是修改成的值。
看這個(gè)：
<Style name=”Title” element=”span”>
<Attribute name=”class” value=”Title” />
</Style>
如果你在fck選定了文字 “經(jīng)典論壇 》 前臺(tái)制作與腳本專欄 》 FCKeditor 實(shí)戰(zhàn)技巧 - 1 》 編輯帖子” 應(yīng)用該樣式 則原來(lái)文字就會(huì)變成<span class=”Title”>經(jīng)典論壇 》 前臺(tái)制作與腳本專欄 》 FCKeditor 實(shí)戰(zhàn)技巧 - 1 》 編輯帖子</span>
注意：如果編輯器呈整頁(yè)編輯狀態(tài)，那么整頁(yè)里面也需要插入樣式表鏈接才能顯示出來(lái)樣式。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
FCKeditor JavaScript. API（翻譯整理）
原文地址：http://wiki.fckeditor.net/Developer%27s_Guide/Javascript_API
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
FCK 編輯器加載后，將會(huì)注冊(cè)一個(gè)全局的 FCKeditorAPI 對(duì)象。
FCKeditorAPI 對(duì)象在頁(yè)面加載期間是無(wú)效的，直到頁(yè)面加載完成。如果需要交互式地知道 FCK 編輯器已經(jīng)加載完成，可使用“FCKeditor_OnComplete”函數(shù)。
<script. type=”text/javascript”>
function FCKeditor_OnComplete(editorInstance) {
FCKeditorAPI.GetInstance(’FCKeditor1′).Commands.GetCommand(’FitWindow’).Execute();
}
</script>
在當(dāng)前頁(yè)獲得 FCK 編輯器實(shí)例：
var Editor = FCKeditorAPI.GetInstance(’InstanceName’);
從 FCK 編輯器的彈出窗口中獲得 FCK 編輯器實(shí)例：
var Editor = window.parent.InnerDialogLoaded().FCK;
從框架頁(yè)面的子框架中獲得其它子框架的 FCK 編輯器實(shí)例：
var Editor = window.FrameName.FCKeditorAPI.GetInstance(’InstanceName’);
從頁(yè)面彈出窗口中獲得父窗口的 FCK 編輯器實(shí)例：
var Editor = opener.FCKeditorAPI.GetInstance(’InstanceName’);
獲得 FCK 編輯器的內(nèi)容：
oEditor.GetXHTML(formatted); // formatted 為：true|false，表示是否按HTML格式取出
也可用：
oEditor.GetXHTML();
設(shè)置 FCK 編輯器的內(nèi)容：
oEditor.SetHTML(”content”, false); // 第二個(gè)參數(shù)為：true|false，是否以所見(jiàn)即所得方式設(shè)置其內(nèi)容。此方法常用于“設(shè)置初始值”或“表單重置”操作。
插入內(nèi)容到 FCK 編輯器：
oEditor.InsertHtml(”html”); // “html”為HTML文本
檢查 FCK 編輯器內(nèi)容是否發(fā)生變化：
oEditor.IsDirty();
在 FCK 編輯器之外調(diào)用 FCK 編輯器工具條命令：
命令列表如下：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
DocProps, Templates, Link, Unlink, Anchor, BulletedList, NumberedList, About, Find, Replace, Image, Flash, SpecialChar, Smiley, Table, TableProp, TableCellProp, UniversalKey, Style, FontName, FontSize, FontFormat, Source, Preview, Save, NewPage, PageBreak, TextColor, BGColor, PasteText, PasteWord, TableInsertRow, TableDeleteRows, TableInsertColumn, TableDeleteColumns, TableInsertCell, TableDeleteCells, TableMergeCells, TableSplitCell, TableDelete, Form, Checkbox, Radio, TextField, Textarea, HiddenField, Button, Select, ImageButton, SpellCheck, FitWindow, Undo, Redo
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
使用方法如下：
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
oEditor.Commands.GetCommand(’FitWindow’).Execute();
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

1、獲取編輯器中HTML內(nèi)容

2、獲取編輯器中文字內(nèi)容（在博客發(fā)布時(shí)獲取無(wú)html代碼摘要使用）

3、設(shè)置編輯器中內(nèi)容

 

 

實(shí)現(xiàn)像google suggest自動(dòng)完成功能

首先創(chuàng)建一個(gè)jsp

<%@ page language="java" pageEncoding="UTF-8"%>

<html>
<head>
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/effects.js"></script>
<script type="text/javascript" src="js/controls.js"></script>
<style>
div.auto_complete {
  width: 350px;
  background: #fff;
}
div.auto_complete ul {
  border:1px solid #888;
  margin:0;
  padding:0;
  width:100%;
  list-style-type:none;
}
div.auto_complete ul li {
  margin:0;
  padding:3px;
}
div.auto_complete ul li.selected {
  background-color: #ffb;
}
div.auto_complete ul strong.highlight {
  color: #800;
  margin:0;
  padding:0;
}
</style>

</head>
<body>
<input type="text" id="autocomplete"/>
<div id="results" class="auto_complete"></div>
<script type="text/javascript">
 new Ajax.Autocompleter(
  "autocomplete",
  "results",
  "list.html", {
   method: "GET"
  }
 );
</script>
</body>
</html>

 

list.html

<ul>
<li>Aria</li>
<li>Aaaa</li>
<li>Afdsa</li>
<li>bsa</li>
</ul>

上面list.html采用靜態(tài)頁(yè)面返回列表，讀者可以使用動(dòng)態(tài)頁(yè)面返回結(jié)果。

看了幾篇中英文的AJAX庫(kù)/框架比較文章，為方便選擇使用，特歸納如下：
首先，要在兩個(gè)類(lèi)別中選擇，一個(gè)是編譯類(lèi)，一個(gè)是非編譯類(lèi)別。
Echo2/GWT是將JAVA代碼編譯成JAVASCRIPT，乍看很方便，不用掌握J(rèn)S也能做出炫目界面。但這只適于不會(huì)或者不想了解JS的情況，對(duì)于還是想完全控制和定制界面的項(xiàng)目就不適合。
另外，有一種觀點(diǎn)認(rèn)為JAVA->JS轉(zhuǎn)換是一種低級(jí)語(yǔ)言向高級(jí)語(yǔ)言轉(zhuǎn)換，本身沒(méi)有意義。有點(diǎn)像去學(xué)匯編，然后再找個(gè)工具把匯編語(yǔ)言代碼轉(zhuǎn)換成C代碼來(lái)用。我雖然沒(méi)完全想通這個(gè)觀點(diǎn)，不過(guò)，我一直用C/C++，這幾年才逐漸發(fā)現(xiàn)JAVA確實(shí)是一種進(jìn)化。沒(méi)準(zhǔn)別人說(shuō)的是對(duì)的呢？
在Echo2和GWT中，GWT大部分工作是在客戶端，盡量少跟SERVER打交道，適合大型網(wǎng)站運(yùn)用；ECHO2信奉“用到才加載”的信條，所以會(huì)有大量向SERVER的訪問(wèn)，適合企業(yè)應(yīng)用。另外，個(gè)人覺(jué)得ECHO2是個(gè)更全面的的一站式框架，界面也非常炫。但它的開(kāi)發(fā)工具要收費(fèi)。
再談非編譯類(lèi)別，它們包括DOJO、PROTOTYPE、JQEURY，下面一一介紹：
先說(shuō)PROTOTYPE，它比較輕量極，能讓你的代碼更加簡(jiǎn)化。最經(jīng)典莫過(guò)于“美圓函數(shù)”：
document.getElementById(’elementid’) 變成$(’elementid’)
它加強(qiáng)了JS語(yǔ)言的可開(kāi)發(fā)性，降低了學(xué)習(xí)JS的門(mén)檻。
DOJO最吸引人的是它的事件系統(tǒng)和豐富的可定制組件。它可以用形如下面的語(yǔ)句為各種HTML元素加入事件：
dojo.event.connect(someNode, "onclick", doStuff);
正由于DOJO提供了強(qiáng)大功能，它分成了許多包，可以分別包含使用。
JQUERY也提供了美圓函數(shù)，它的插件系統(tǒng)也提供象DOJO的組件，但它沒(méi)有PROTOTYPE那樣簡(jiǎn)潔，也沒(méi)有DOJO這么多的組件供使用，但它兼收兩家優(yōu)點(diǎn)，并且個(gè)頭不大，文檔也算完整，所以說(shuō)它介乎于前述兩者之間。
所以，如果你需要非常完整的工具組件請(qǐng)用DOJO，如果你想優(yōu)化你的JS代碼，提高書(shū)寫(xiě)技巧請(qǐng)用PROTOTYPE，如果你想兩者兼顧就用JQUERY。

     摘要: Table of Contents 1. Programming Guide 1.1. Prototype是什么? 1.2. 關(guān)聯(lián)文章 1.3. 通用性方法 1.3.1. 使用 $()方法 1.3.2. 使用$F()方法 1.3.3. 使用$A()方法 1.3.4. 使用$H()方法 1.3.5. 使用$R()方法 1.3.6. 使用Try.these()方...  閱讀全文

2.3  Prototype對(duì)Ajax的支持

作為一個(gè)Ajax開(kāi)發(fā)框架，Prototype對(duì)Ajax開(kāi)發(fā)提供了有力的支持。在Prototype中，與Ajax相關(guān)的類(lèi)和對(duì)象包括：Ajax、Ajax.Responsders、Ajax.Base、Ajax.Request、Ajax. PeriodicalUpdater和Ajax.Updater，圖2-3所示為這些類(lèi)和對(duì)象之間的關(guān)系及其常用屬性和方法，下面分別對(duì)這些類(lèi)和對(duì)象進(jìn)行介紹。

圖2-3  Prototype中Ajax相關(guān)類(lèi)和對(duì)象關(guān)系示意圖

2.3.1  Ajax對(duì)象

Ajax對(duì)象為其他的Ajax功能類(lèi)提供了最基本的支持，它的實(shí)現(xiàn)如2.2.7節(jié)中例2-10所示，其中包括一個(gè)方法getTransport和一個(gè)屬性activeRequestCount。getTransport方法返回一個(gè)XMLHttpRequest對(duì)象，activeRequestCount屬性代表正在處理中的Ajax請(qǐng)求的個(gè)數(shù)。

2.3.2  Ajax.Base類(lèi)

Ajax.Base類(lèi)是Ajax.Request類(lèi)和Ajax.PeriodicalUpdater類(lèi)的基類(lèi)。它提供了3個(gè)方法：

l  setOptions：設(shè)置Ajax操作所使用的選項(xiàng)。

l  responseIsSuccess：判斷Ajax操作是否成功。

l  responseIsFailure：判斷Ajax操作是否失?。ㄅcresponseIsSuccess相反）。

Ajax.Base類(lèi)的主要作用是提取出一些公用的方法，其他類(lèi)通過(guò)繼承的方式使用這些方法，實(shí)現(xiàn)代碼復(fù)用。

2.3.3  Ajax.Request類(lèi)

這是Prototype中最經(jīng)常使用的一個(gè)Ajax相關(guān)類(lèi)。Ajax.Request類(lèi)的方法通常是內(nèi)部使用的，因此這里就不一一列舉，有興趣的讀者可以參考Prototype的源代碼。這里重點(diǎn)講講如何使用Ajax.Request類(lèi)，首先給出一個(gè)最簡(jiǎn)單的Ajax.Request類(lèi)的應(yīng)用示例，如例2-11所示，注意示例中的黑體字。

例2-11  Ajax.Request類(lèi)應(yīng)用示例

Ajax.Request測(cè)試頁(yè)面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

    <head>

        <title>chapter 3</title>

        <script type="text/javascript" language="javascript"

         src="prototype.js" ></script>

        <script type="text/javascript" language="javascript">

        function test() {

            // 創(chuàng)建Ajax.Request對(duì)象，發(fā)起一個(gè)Ajax請(qǐng)求

            var myAjax = new Ajax.Request(

                'data.html', // 請(qǐng)求的URL

                {

                    method: 'get',  // 使用GET方式發(fā)送HTTP請(qǐng)求

                    onComplete: showResponse // 指定請(qǐng)求成功完成時(shí)需要執(zhí)行的方法

                }

            );

        }

        function showResponse(response) {

            $('divResult').innerHTML = response.responseText;

        }

        </script>

    </head>

    <body>

    <input type="button" value="click" onclick="test()" />

    <div id="divResult" />

    </body>

</html>

data.html：

<input type="text" id="name" />

<input type="button" value="Click Me" onclick="sayHi()">

Ajax.Request對(duì)象在初始化時(shí)需要提供兩個(gè)參數(shù)：第1個(gè)參數(shù)是將要請(qǐng)求頁(yè)面的URL，這里使用的data.html是一個(gè)普通的HTML靜態(tài)頁(yè)面；第2個(gè)參數(shù)是Ajax操作的選項(xiàng)，在Prototype中并沒(méi)有專門(mén)為Ajax操作選項(xiàng)定義一個(gè)類(lèi)，通常都是像例2-11這樣，通過(guò)匿名對(duì)象的方式設(shè)置Ajax操作的參數(shù)。在例2-11中，Ajax操作選項(xiàng)具有兩個(gè)屬性：method表示HTTP請(qǐng)求方式，默認(rèn)是POST方式；onComplete指定了Ajax操作完成以后（即XMLHttpRequest對(duì)象的status屬性為4時(shí)），頁(yè)面將要執(zhí)行的函數(shù)。當(dāng)然，Ajax操作還包括很多其他選項(xiàng)，如表2-1所示。

表2-1  Ajax操作選項(xiàng)屬性含義

屬性名稱	含義
method	HTTP請(qǐng)求方式（POST/GET/HEAD）。
parameters	在HTTP請(qǐng)求中傳入的URL格式的值列表，即URL串中問(wèn)號(hào)之后的部分。
asynchronous	是否做異步XMLHttpRequest請(qǐng)求。
postBody	在POST請(qǐng)求方式下，傳入請(qǐng)求體中的內(nèi)容。
requestHeaders	和請(qǐng)求一起被傳入的HTTP頭部列表，這個(gè)列表必須含有偶數(shù)個(gè)項(xiàng)目，因?yàn)榱斜碇忻績(jī)身?xiàng)為一組，分別代表自定義部分的名稱和與之對(duì)應(yīng)的字符串值。
onXXXXXXXX	在HTTP請(qǐng)求、響應(yīng)的過(guò)程中，當(dāng)XMLHttpRequest對(duì)象狀態(tài)發(fā)生變化時(shí)調(diào)用的響應(yīng)函數(shù)。響應(yīng)函數(shù)有5個(gè)：onUninitialized、onLoading、onLoaded、onInteractive和onComplete。傳入這些函數(shù)的參數(shù)可以有2個(gè)，其中第1個(gè)參數(shù)是執(zhí)行HTTP請(qǐng)求的XMLHttpRequest對(duì)象，第2個(gè)參數(shù)是包含被執(zhí)行的X-JSON響應(yīng)的HTTP頭。
onSuccess	Ajax操作成功完成時(shí)調(diào)用的響應(yīng)函數(shù)，傳入的參數(shù)與onXXXXXXXX相同。
onFailure	Ajax操作請(qǐng)求完成但出現(xiàn)錯(cuò)誤時(shí)調(diào)用的響應(yīng)函數(shù)，傳入的參數(shù)與onXXXXXXXX相同。
onException	Ajax操作發(fā)生異常情況時(shí)調(diào)用的響應(yīng)函數(shù)，它可以接收2個(gè)參數(shù)，其中第1個(gè)參數(shù)是執(zhí)行HTTP請(qǐng)求的XMLHttpRequest對(duì)象，第2個(gè)參數(shù)是異常對(duì)象。

2.3.4  Ajax.Updater類(lèi)

例2-11使用Ajax.Request類(lèi)實(shí)現(xiàn)了頁(yè)面的局部刷新效果，而這樣類(lèi)似的功能在Ajax應(yīng)用中是經(jīng)常使用的。因此，為了簡(jiǎn)化這種工作，Prototype框架從Ajax.Requet類(lèi)中派生出一個(gè)子類(lèi)——Ajax.Updater。與Ajax.Request相比，Ajax.Updater的初始化多了一個(gè)container參數(shù)，該參數(shù)代表將要更新的頁(yè)面元素的id。例2-11的功能通過(guò)Ajax.Updater的實(shí)現(xiàn)，會(huì)變得更加簡(jiǎn)單，如例2-12所示。

例2-12  Ajax.Updater類(lèi)的應(yīng)用示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

    <head>

        <title>chapter 3</title>

        <script type="text/javascript" language="javascript"

         src="prototype.js" ></script>

        <script type="text/javascript" language="javascript">

        function test() {

            var myAjax = new Ajax.Updater(

                'divResult', // 更新的頁(yè)面元素

                'data.html', // 請(qǐng)求的URL

                {

                    method: 'get'

                }

            );

        }

        </script>

    </head>

    <body>

    <input type="button" value="click" onclick="test()" />

    <div id="divResult" />

    </body>

</html>

此外，Ajax.Updater類(lèi)還有另外一個(gè)功能，如果請(qǐng)求的頁(yè)面內(nèi)容中包括JavaScript腳本，Ajax.Updater類(lèi)可以執(zhí)行其中的腳本，只需要在Ajax操作選項(xiàng)中增加屬性“evalScripts: true”即可。對(duì)例2-11中的data.html進(jìn)行修改，在其中加入JavaScript腳本，如例2-13所示。

例2-13  data.html

<script language="javascript" type="text/javascript">

sayHi = function() {

    alert("Hello, " + $F('name') + "!");

}

</script>

<input type="text" id="name" />

<input type="button" value="Click Me" onclick="sayHi()">

調(diào)用Ajax.Updater的JavaScript腳本修改為：

function test() {

    var myAjax = new Ajax.Updater(

        'divResult', // 更新的頁(yè)面元素

        'data.html', // 請(qǐng)求的URL

        {

            method: 'get',

            evalScripts: true

        }

    );

}

這樣就可以使用data.html頁(yè)面的內(nèi)容更新當(dāng)前頁(yè)面中的<div>元素divResult，并且執(zhí)行data.html頁(yè)面中包含的JavaScript腳本。

這里需要注意的是例2-13中sayHi函數(shù)的寫(xiě)法，如果寫(xiě)成

function sayHi() {

    alert("Hello, " + $F('name') + "!");

}

或者

var sayHi = function() {

    alert("Hello, " + $F('name') + "!");

}

程序是不能正常運(yùn)行的。這是因?yàn)锳jax.Updater執(zhí)行腳本是通過(guò)eval的方式，而不是將腳本內(nèi)容引入到當(dāng)前頁(yè)面，直接聲明的function sayHi或者用var聲明的sayHi函數(shù)，其作用域只是在這段腳本內(nèi)部，外部的其他腳本不能訪問(wèn)sayHi函數(shù)。而按照例2-13的方式聲明的函數(shù)，其作用域是整個(gè)window。

2.3.5  Ajax.PeriodicalUpdater類(lèi)

和Ajax.Request類(lèi)相似，Ajax.PeriodicalUpdater類(lèi)也繼承自Ajax.Base類(lèi)。在一些Ajax應(yīng)用中，需要周期性地更新某些頁(yè)面元素，例如天氣預(yù)報(bào)、即時(shí)新聞等等。實(shí)現(xiàn)這樣的功能通常要使用JavaScript中的定時(shí)器函數(shù)setTimeout、clearTimeout等，而有了Ajax.PeriodicalUpdater類(lèi)可以很好地簡(jiǎn)化這類(lèi)編碼工作。

新建一個(gè)Ajax. PeriodicalUpdater類(lèi)的實(shí)例需要指定3個(gè)參數(shù)：

l  container：將要更新的頁(yè)面元素id；

l  url：請(qǐng)求的URL地址；

l  options：Ajax操作選項(xiàng)。

和Ajax.Updater類(lèi)相似，Ajax.PeriodicalUpdater類(lèi)也支持動(dòng)態(tài)執(zhí)行JavaScript腳本，只需在Ajax操作選項(xiàng)中增加（evalScripts: true）屬性值即可。

Ajax.PeriodicalUpdater類(lèi)支持兩個(gè)特殊的Ajax操作選項(xiàng)：frequency和decay。frequency參數(shù)很容易理解，既然是定時(shí)更新頁(yè)面元素，或者定時(shí)執(zhí)行腳本，那么多長(zhǎng)時(shí)間更新或者執(zhí)行一次呢？frequency指的就是兩次Ajax操作之間的時(shí)間間隔，單位是秒，默認(rèn)值為2秒。

如果僅指定frequency參數(shù)，程序會(huì)按照固定的時(shí)間間隔執(zhí)行Ajax操作。這樣的更新策略合理嗎？答案取決于請(qǐng)求URL中數(shù)據(jù)的更新頻率。如果請(qǐng)求的數(shù)據(jù)會(huì)很有規(guī)律地按照固定頻率改變，那么只要設(shè)置一個(gè)合適的frequency值，就可以很有效地實(shí)現(xiàn)頁(yè)面的定時(shí)更新。然而實(shí)際應(yīng)用中的數(shù)據(jù)往往不會(huì)那么理想，例如新聞，可能在一天中只有特定的一段時(shí)間更新頻率會(huì)很高，而在其他時(shí)間則幾乎沒(méi)有變化。經(jīng)常遇到這樣的情況該怎么辦呢？Ajax.PeriodicalUpdater類(lèi)支持的decay屬性就是為了解決這個(gè)問(wèn)題而產(chǎn)生的。當(dāng)option中帶有decay屬性時(shí)，如果請(qǐng)求返回的數(shù)據(jù)與上次相同，那么下次進(jìn)行Ajax操作的時(shí)間間隔會(huì)乘以一個(gè)decay的系數(shù)。

為了比較明顯地看到decay屬性的效果，在請(qǐng)求的測(cè)試頁(yè)面中加入記錄時(shí)間的腳本，代碼如例2-14所示。

例2-14  Ajax.PeriodicalUpdater類(lèi)應(yīng)用示例

ex10.html：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

    <head>

        <title>chapter 3</title>

        <script type="text/javascript" language="javascript"

         src="prototype.js" ></script>

        <script type="text/javascript" language="javascript">

        var str='';

        var intcount=0;

        function test() {

            var myAjax = new Ajax.PeriodicalUpdater(

                'divResult', // 定時(shí)更新的頁(yè)面元素

                'script1.html', // 請(qǐng)求的URL

                {

                    method: 'get', // HTTP請(qǐng)求的方式為GET

                    evalScripts: true, // 是否執(zhí)行請(qǐng)求頁(yè)面中的腳本

                    frequency: 1, // 更新的頻率

                    decay: 1 // 衰減系數(shù)

                }

            );

        }

        </script>

    </head>

    <body>

    <input type="button" value="click" onclick="test()" />

    <div id="divResult" ></div>

    <div id="divResult2" ></div>

    </body>

</html>

script1.html:

<script language="javascript" type="text/javascript">

// Ajax.PeriodicalUpdater調(diào)用函數(shù)計(jì)數(shù)

// 在<div>元素divResult2中增加一行結(jié)果，并記錄當(dāng)前時(shí)間和

// Ajax.PeriodicalUpdater的調(diào)用次數(shù)

intcount++;

str = $('divResult2').innerHTML;

$('divResult2').innerHTML = str + "count = " + intcount+ ": " + new Date() + "<br>";

</script>

例2-14的運(yùn)行結(jié)果如圖2-4所示。

圖2-4  Ajax.PeriodicalUpdater類(lèi)應(yīng)用示例

可以看到，由于請(qǐng)求返回的數(shù)據(jù)一直沒(méi)有發(fā)生變化，每次請(qǐng)求時(shí)間的間隔是上一次的2倍（decay=2）。如果某一次請(qǐng)求返回的數(shù)據(jù)發(fā)生了變化，那么執(zhí)行請(qǐng)求的時(shí)間間隔則恢復(fù)到初始值。

2.3.6  Ajax.Responders對(duì)象

Ajax.Responders對(duì)象維護(hù)了一個(gè)正在運(yùn)行的Ajax對(duì)象列表，在需要實(shí)現(xiàn)一些全局的功能時(shí)就可以使用它。例如，在Ajax請(qǐng)求發(fā)出以后需要提示用戶操作正在執(zhí)行中，而操作返回以后則取消提示。利用Ajax.Responders對(duì)象就可以實(shí)現(xiàn)這樣的功能，如例2-15所示。

例2-15  Ajax.Responders對(duì)象應(yīng)用示例

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

    <head>

        <title>chapter 3</title>

        <script type="text/javascript" language="javascript"

         src="prototype.js" ></script>

        <script type="text/javascript" language="javascript">

        function test() {

            var myAjax = new Ajax.Request(

                'data.html',

                {

                    method: 'get',

                    onComplete: showResponse

                }

            );

        }

        function showResponse(response) {

            $('divResult').innerHTML = response.responseText;

        }      

        var handle = {

            onCreate: function() {

                Element.show('loading'); // 當(dāng)創(chuàng)建Ajax請(qǐng)求時(shí)，顯示loading

            },

            onComplete: function() {

                // 當(dāng)請(qǐng)求成功返回時(shí)，如果當(dāng)前沒(méi)有其他正在運(yùn)行中的Ajax請(qǐng)求，隱藏loading

                if (Ajax.activeRequestCount == 0) {

                    Element.hide('loading');

                }

            }

        };

        // 將handle注冊(cè)到全局的Ajax.Responders對(duì)象中，使其生效

        Ajax.Responders.register(handle);

        </script>

    </head>

    <body>

    <input type="button" value="click" onclick="test()" />

    <div id="divResult" ></div>

    <div id='loading' style="display:none">

        <img src="loading.gif">Loading...

    </div>

    </body>

</html>

例2-15中定義了一個(gè)handle對(duì)象，其中包含onCreate和onComplete函數(shù)。頁(yè)面中發(fā)出任何一個(gè)Ajax請(qǐng)求時(shí)都會(huì)調(diào)用onCreate方法，而請(qǐng)求完成時(shí)都會(huì)調(diào)用onComplete方法。例2-15的運(yùn)行結(jié)果如圖2-5所示。