問題描述：通過ajax的異步處理來切換多張報表的模型，類似潤乾中的

具體實現(xiàn)：

首先先做兩張普通的raq報表，用于之后展現(xiàn)所用。

在最終展現(xiàn)的頁面中加入兩個標(biāo)簽，分別通過觸發(fā)js來進行異步處理，分別傳入之前兩張報表展現(xiàn)的url。

標(biāo)簽1

標(biāo)簽2

點擊標(biāo)簽動態(tài)加載內(nèi)容。

然后實現(xiàn)javascript代碼：

var xmlHttp; //用于保存XMLHttpRequest對象的全局變量

//用于創(chuàng)建XMLHttpRequest對象

function createXmlHttp() {

//根據(jù)window.XMLHttpRequest對象是否存在使用不同的創(chuàng)建方式

if (window.XMLHttpRequest) {

xmlHttp = new XMLHttpRequest(); //FireFox、Opera等瀏覽器支持的創(chuàng)建方式

} else {

xmlHttp = new ActiveXObject(“Microsoft.XMLHTTP”);//IE瀏覽器支持的創(chuàng)建方式

}

}

//獲取頁面信息的調(diào)用函數(shù)

function switchPage(srcTab, pageName) {

resetTabs();

srcTab.className = “tab tabsel”;

createXmlHttp(); //創(chuàng)建XmlHttpRequest對象

writePageInfo(“正在加載……”); //顯示提示信息

xmlHttp.onreadystatechange = writePageInfo;

xmlHttp.open(“GET”, pageName, true);

xmlHttp.send(null);

}

//獲取頁面信息的回調(diào)函數(shù)

function writePageInfo(pageInfo) {

//如果沒有傳入pageInfo參數(shù)，則讀取xmlHttp對象的響應(yīng)結(jié)果

if (pageInfo == undefined) {

if (xmlHttp.readyState == 4) {

var pageInfo = xmlHttp.responseText;

document.getElementById(“pageInfo”).innerHTML = pageInfo;

}

} else {

document.getElementById(“pageInfo”).innerHTML = pageInfo;

}

}

//恢復(fù)所有標(biāo)簽的class屬性

function resetTabs() {

//獲取tabdiv下的所有span節(jié)點

var tabs = document.getElementById(“tabdiv”).getElementsByTagName(“span”);

//遍歷span節(jié)點，將class屬性恢復(fù)為”tab”

for (var i=0; i

tabs[i].className = “tab”;

}

}

服務(wù)器端相應(yīng)則可直接使用潤乾默認展現(xiàn)報表的showReport.jsp來進行處理將結(jié)果返回。

在頁面中第一次展現(xiàn)時只是個空頁面

點擊標(biāo)簽后異步加載不同的報表頁面。

這樣還可以分別在報表中添加導(dǎo)出等功能按鈕，分別調(diào)用。實現(xiàn)了異步處理展現(xiàn)累死報表組風(fēng)格的報表。

ps：當(dāng)然標(biāo)簽邊框等風(fēng)格可以通過css來進行控制，進行美工的設(shè)置。

總結(jié)

以上是生活随笔為你收集整理的润乾ajax,通过异步请求实现报表组功能的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。