很多報(bào)表軟件可以利用JS接口來(lái)實(shí)現(xiàn)更多更復(fù)雜的功能。以FineReport為例，開(kāi)放了大量的JS API給用戶(hù)，根據(jù)執(zhí)行JS的主體不同可以將分為三大類(lèi)：FR、FS和contentWindow。
在js語(yǔ)句中執(zhí)行可以使用FR的方法或者屬性，比如說(shuō)FR.Msg.alert，FR中的方法比如引入finereport.js。FS的方法可以用于數(shù)據(jù)決策系統(tǒng)中的js接口，比如說(shuō)FS.tabPane.addItem。而contentWindow是在web頁(yè)面集成的時(shí)候，將F報(bào)表嵌入在iframe中，調(diào)用報(bào)表對(duì)象時(shí)使用的接口，比如說(shuō)：document.getElementById('reportFrame').contentWindow，其中document.getElementById('reportFrame')是獲取iframe對(duì)象，contentWindow是報(bào)表對(duì)象，相當(dāng)于html中的window對(duì)象。
由于篇幅，這里先介紹FR
FR
大家知道，預(yù)覽報(bào)表時(shí)，報(bào)表servlet會(huì)將cpt模板轉(zhuǎn)為html，在這個(gè)html的head頭部中會(huì)引入FR的js，如下：
<script type="text/javascript" src="/WebReport/ReportServer?op=emb&resource=finereport.js"></script>
這個(gè)finereport.js中包含了許多內(nèi)置的function以及一些公有的屬性，不管在模板中還是其他網(wǎng)頁(yè)中，只要引入了finereport.js，就能夠通過(guò)FR.xxx的形式調(diào)用公有的屬性與方法
比如，在模板中使用，訪(fǎng)問(wèn)模板時(shí)會(huì)自動(dòng)引入finereport.js，因此在模板的js腳本中可以直接使用FR.xxx來(lái)調(diào)用方法，如下圖：
或者需要在自己的網(wǎng)頁(yè)如某個(gè)jsp頁(yè)面中調(diào)用FR的方法，要先引入finereport.js，再通過(guò)FR.xxx來(lái)調(diào)用，如下：
<html>
<head>
<script type="text/javascript" src="/WebReport/ReportServer?op=emb&resource=finereport.js"></script>
<script type="text/javascript">
var url = FR.cjkEncode("/WebReport/ReportServer?reportlet=Gettingstarted.cpt&地區(qū)=華東");
window.open(url);
</script>
</head>
<body>
</body>
</html>
對(duì)于常用的FR方法，這里列了一張表
方法 | 返回值 | 說(shuō)明 |
ajax | void | ajax請(qǐng)求 |
cjkDecode(cjkEncode String) | String | 對(duì)cjkEncode過(guò)的字符串進(jìn)行反編碼 |
cjkEncode(String) | String | 對(duì)字符串進(jìn)行cjkEncode編碼 |
closeDialog() | void | 關(guān)閉對(duì)話(huà)框 |
doHyperlinkByGet(url,config,target,feature) | void | 超級(jí)鏈接，get傳遞config參數(shù)到target中，并在feature里面設(shè)置窗口屬性 |
doHyperlinkByPost(url,config,target,feature) | void | 超級(jí)鏈接，post傳遞config參數(shù)，并將結(jié)果顯示在target中,并在feature里面設(shè)置窗口屬性 |
doURLAppletPrint(printurl,isPopUp,config) | void | applet打印 |
doURLFlashPrint(printurl,isPopUp,config) | void | flasht打印 |
doURLPDFPrint(printurl,isPopUp,config) | void | pdf打印 |
$.isArray(object) | Boolean | 是否為數(shù)組，是返回true，否返回false |
isEmpty(object) | Boolean | 是否為空，是返回true，否返回false |
jsonDecode(jsonEncode String) | String | 對(duì)jsonEncode過(guò)的字符串進(jìn)行反編碼 |
jsonEncode(String) | String | 對(duì)字符串進(jìn)行jsonEncode編碼 |
showDialog(title, width, height, innerContent) | void | 顯示一個(gè)對(duì)話(huà)框 |
這里主要細(xì)講一下Msg和Ajax方法。
1 FR.Msg
FR內(nèi)置了統(tǒng)一風(fēng)格的消息框，替代實(shí)現(xiàn)了window中的alert、confirm以及prompt。
1.1 FR.Msg.alert方法
使用方法
FR.Msg.alert(title, message, callback)，彈出警告框。
title：對(duì)話(huà)框標(biāo)題；message：對(duì)話(huà)框里顯示的提示詳細(xì)；callback：點(diǎn)擊確定時(shí)調(diào)用的方法。
注意，callback是一個(gè)function方法，所以在寫(xiě)callback的時(shí)候必須為一個(gè)方法。
如在某個(gè)控件增加編輯結(jié)束事件，JS為：FR.Msg.alert("警告","值錯(cuò)誤");，在該控件編輯結(jié)束后，會(huì)看到如下圖所示的對(duì)話(huà)框：
1.2 FR.Msg.confirm方法
使用方法
FR.Msg.confirm(title, message, callback, min_width)，彈出帶有確認(rèn)和取消按鈕的對(duì)話(huà)框。
title：對(duì)話(huà)框標(biāo)題；message：對(duì)話(huà)框里顯示的提示詳細(xì)；cellback：點(diǎn)擊確定時(shí)調(diào)用的方法；min_width：表示最小寬度。
如在某個(gè)刪除按鈕中增加點(diǎn)擊事件，JS為：FR.Msg.confirm("警告","確認(rèn)要?jiǎng)h除嗎?");，點(diǎn)擊刪除行時(shí)會(huì)看到，會(huì)看到如下圖所示的對(duì)話(huà)框：
注意，此方法無(wú)法獲取點(diǎn)擊“確定”或“取消”的返回值，此方法主要是觸發(fā)回調(diào)函數(shù)的。若希望通過(guò)返回值的不同來(lái)進(jìn)行下面的操作，則可使用window中的confirm
1.3 FR.Msg.prompt方法
使用方法
FR.Msg.prompt(title, message, value, callback, min_width)，可以傳遞參數(shù)的對(duì)話(huà)框
title：對(duì)話(huà)框標(biāo)題；message：對(duì)話(huà)框里顯示的提示詳細(xì)；callback：點(diǎn)擊確定時(shí)調(diào)用的方法；Value：參數(shù)傳遞的默認(rèn)值；min_width：表示最小寬度。
如在某個(gè)控件增加點(diǎn)擊事件，JS為：FR.Msg.prompt("輸入","愛(ài)好","運(yùn)動(dòng)");，在該控件被點(diǎn)擊時(shí)，會(huì)看到如下圖所示的對(duì)話(huà)框：
1.4 FR.Msg.toast方法
使用方法
FR.Msg.toast(message)，報(bào)表從頁(yè)面右上角彈出來(lái)的那個(gè)長(zhǎng)條形信息。
message：彈出的信息
如給某個(gè)模板增加填報(bào)成功事件，JS為：FR.Msg.toast("填報(bào)成功");，在點(diǎn)擊提交按鈕，提交成功后會(huì)看到頁(yè)面的右上角彈出如下對(duì)話(huà)框：
2 FR.ajax
大家知道JS是前端代碼，直接由瀏覽器來(lái)執(zhí)行，不會(huì)與服務(wù)器進(jìn)行交互。
通過(guò)AJAX，用戶(hù)就可以使用JavaScript的XMLHttpRequest對(duì)象來(lái)直接與服務(wù)器進(jìn)行通信。且在不重載頁(yè)面的情況下與Web服務(wù)器交換數(shù)據(jù)，也就是所謂的異步請(qǐng)求。
2.1 調(diào)用語(yǔ)法
如下ajax示例：
FR.ajax({
url: "some.jsp",
type: "GET",
data: "p1=a&p2=b",
success: function(msg){
alert( "Data Saved: " + msg );
}
});
2.2 ajax中的選項(xiàng)說(shuō)明
上例中的url、type、data等都是ajax請(qǐng)求設(shè)置時(shí)的選項(xiàng)，這些選項(xiàng)都是可選的，以下列出常用選項(xiàng)并說(shuō)明。
async：Boolean
默認(rèn)為true，所有請(qǐng)求均為異步請(qǐng)求。如果需要發(fā)送同步請(qǐng)求，請(qǐng)將此選項(xiàng)設(shè)置為 false。
注：同步請(qǐng)求將鎖住瀏覽器，用戶(hù)其它操作必須等待請(qǐng)求完成才可以執(zhí)行。
complete：Function
請(qǐng)求完成后回調(diào)函數(shù)(請(qǐng)求成功或失敗之后均調(diào)用)。如下：
FR.ajax({
url: "some.jsp",
complete: function(XMLHttpRequest, textStatus){
alert(this.url);
}
});
其中參數(shù)為XMLHttpRequest 對(duì)象和一個(gè)描述成功請(qǐng)求是否成功的字符串(成功textStatus=success，否則為error)。
在function中可以通過(guò)this.xxx來(lái)調(diào)用該ajax請(qǐng)求中的選項(xiàng)值。
data：Object/String
發(fā)送到服務(wù)器的數(shù)據(jù)。GET請(qǐng)求中將自動(dòng)轉(zhuǎn)換為請(qǐng)求字符串格式，附加在url后。
值必須是Key/Value格式，可以是字符串如"p1=pavalue&p2=p2value"，或者是對(duì)象如{p1:p1value,p2:p2value}。
dataType：String
預(yù)期服務(wù)器返回的數(shù)據(jù)類(lèi)型。如果不指定，將自動(dòng)根據(jù)HTTP包MIME信息來(lái)智能判斷。可用值有：
"xml"：返回 XML 文檔
"html"：返回純文本HTML信息；包含的script標(biāo)簽會(huì)在插入dom時(shí)執(zhí)行。
"script"：返回純文本JavaScript代碼。
"json"：返回JSON數(shù)據(jù)。
"text"返回純文本字符串。
error：Function
請(qǐng)求失敗時(shí)調(diào)用此函數(shù)。如下：
FR.ajax({
url: "some.jsp",
error: function(XMLHttpRequest, textStatus, errorThrown){
alert(this.url);
}
});
其中參數(shù)為XMLHttpRequest 對(duì)象、錯(cuò)誤信息、捕獲的異常對(duì)象。
通常textStatus和errorThrown之中只有一個(gè)會(huì)包含信息。
success：Function
請(qǐng)求成功后的回調(diào)函數(shù)，如下：
FR.ajax({
url: "/WebReport/a.html",
success: function(data, textStatus){
alert(this.url);
}
});
其中data為服務(wù)器返回的，并根據(jù)dataType參數(shù)進(jìn)行處理后的數(shù)據(jù)。textStatus為狀態(tài)值sucess。
timeout：Number
設(shè)置請(qǐng)求超時(shí)時(shí)間（毫秒）。此設(shè)置將覆蓋全局設(shè)置。
ype：String
請(qǐng)求方式POSTGET，默認(rèn)為GET。
url：String
發(fā)送請(qǐng)求的地址。
關(guān)于FS和contentWindow，會(huì)在下一節(jié)介紹。